JS对象介绍
前置知识：
关于使用对象，可以先阅读一下我的《11.使用对象》这篇文章。
#1.概念
对象是一个包含相关数据和方法的集合，由变量和方法组成，通常称为对象的属性和方法，比如：
let me = {
name : 'pingan',
eat: function(){
console.log('eat eat eat!!!');
}
}
其中，name就是me这个对象的一个属性，eat就是me这个对象的一个方法。
访问对象的属性是这样的：
me.name; // "pingan"
me.eat(); // "eat eat eat!!!"
另外在访问对象属性时，有以下两种方式：
let me = {
name : 'pingan',
}
// 点表示法
me.name; // me.name => "pingan"
// 括号表示法
me["name"];// me.name => "pingan"
括号表示法中，必须是字符串。
我们常常这么设置对象的属性：
let me = {
name : 'pingan',
}
// 点表示法
me.name = "leo"; // me => {name: "leo"}
// 括号表示法
me["name"] = "leo";// me => {name: "leo"}
#2.简单的面向对象介绍
这里简单介绍下JavaScrip的面向对象编程OOP。
面向对象编程（Object Oriented Programming，OOP，面向对象程序设计）是一种计算机编程架构。OOP 的一条基本原则是计算机程序是由单个能够起到子程序作用的单元或对象组合而成。 —— 百度百科
我们这里定义一个简单的对象模型，比如我，我的身上可能有很多信息（姓名，年龄，身高等等），这时候我们可以将这些信息抽取出来，像这样：
let leo = {
name : 'leo',
age : 26,
height : 180,
}
这样我们就将我的信息抽取成一个JS的对象了，但是这样有个局限性，这样定义的话，一次只能定义一个人，如果这时候，有一百个人，那么我们就需要定义一百个这样的对象，显然这是不可取的。
所以，这里就引入一个重要的函数——构造函数，将相同的特性封装成通用的对象，实现定义一次，其他地方都可以使用，这也是OOP的核心思想：
// 传入 name 参数使得可以定义任何人作为对象
function Person (name){
let me = {};
me.name = name;
me.doSomething = function(){
console.log(me.name);
}
return me;
}
创建一个函数“Person”，只要传入不同的name即可得到不同的对象：
let leo = Person("leo");
leo.name; // "leo"
let pingan = Person("pingan");
pingan.name; // "pingan"
但是似乎Person对象的定义，显得不够精简，因为还要定义一个空对象来接收各个属性和方法，幸好JavaScrip在构造函数中提供一个便捷的方法，我们将代码改造下：
function Person (name){
this.name = name;
this.doSomething = function(){
console.log(this.name);
}
}
对于this关键词，即无论是该对象的哪个实例被构造函数创建，它的name属性都是参数name的值，doSomething方法中使用的也是参数name。简单理解就是用this指代了Person。
构造函数通常首字母大写，用于区分普通函数。
接下来，通过new关键词，使用前面创建的构造函数（使用构造函数也叫实例化）：
let leo = new Person("leo");
leo.name; // "leo"
let pingan = new Person("pingan");
pingan.name; // "pingan"
然后一个简单的构造函数就写好了，通常在开发的时候，可能会有很多的参数：
function Man(name, age, height, weight){
this.name = name;
this.age = age + '岁';
this.HeightAndWeight = {
height,
weight
};
this.doSomething = function (){
console.log(`
${this.name}: height:${this.HeightAndWeight.height}m,
weight:${this.HeightAndWeight.weight}Kg!!`
);
};
}
let leo = new Man("leo",25,1.8,68);
leo.doSomething(); // leo: height:1.8m, weight:68Kg!!
#3.JS中的原型
#3.1理解原型
这里需要先了解一下Object和Function,这两个函数都是JS的自带函数，Object继承自己，Function继承自己，相互继承对方，即Object和Function既是函数也是对象。
console.log(Function instanceof Object); // true
console.log(Object instanceof Function); // true
Object 是 Function的实例，而Function是它自己的实例。
console.log(Function.prototype); // ƒ () { [native code] }
console.log(Object.prototype); // Object
另外，只有通过Function创建的函数都是函数对象，其他都是普通对象（通常由Object创建）：
function f1(){};
typeof f1 //"function"
var o1 = new f1();
typeof o1 //"object"
var o2 = {};
typeof o2 //"object"
理论知识：
JavaScript 常被描述为一种基于原型的语言 (prototype-based language)——每个对象拥有一个原型对象，对象以其原型为模板、从原型继承方法和属性。
原型对象也可能拥有原型，并从中继承方法和属性，一层一层、以此类推。这种关系常被称为原型链(prototype chain)，它解释了为何一个对象会拥有定义在其他对象中的属性和方法。
准确地说，这些属性和方法定义在Object的构造器函数(constructor functions)之上的prototype属性上，而非对象实例本身。
个人理解：
- JS中所有的函数对象，都有一个
prototype属性，对应当前对象的原型，但普通对象没有，而prototype属性下还有一个constructor，指向这个函数。
var p = {};
p.prototype; // undefined
p instanceof Object; // true
function f (){};
f.prototype; // object {constructor: ƒ}
f === f.prototype.constructor; // true
Object === Object.prototype.constructor; // true
- JS中所有的对象，都有一个
_proto_属性，指向实例对象的构造函数原型（由于_proto_是个非标准属性，因此只有ff和chrome两个浏览器支持，标准方法是Object.getPrototypeOf()）。
var p = new Person();
p._proto === Person.prototype; //true
修改原型：
经常我们也需要对原型进行修改：
function Person (name){
this.name = name;
}
// 添加一个getName方法
Person.prototype.getName = function(){
return "名字：" + this.name;
}
var p = new Person("leo");
p.getName(); // "名字：leo"
这里也说明了原型进行继承，p继承Person原型中新增的函数属性getName。
#3.2原型链
概念：
javascript中，每个对象都会在内部生成一个 proto 属性，当我们访问一个对象属性时，如果这个对象不存在就回去 proto 指向的对象里面找，一层一层找下去，，知道找到为止，如果到了原型链顶端，还没找到，则返回undefined，这就是javascript原型链的概念。
总结：
- 除了
Object的prototype的原型是null，所有对象和原型都有自己的原型，对象的原型指向原型对象。 - JS中所有的东西都是对象,所有的东西都由
Object衍生而来, 即所有东西原型链的终点指向null。
更加详细的介绍，可以查看下面参考文章。
#参考文章
2.JSON对象介绍
前置知识：
JSON是一种按照JavaScript对象语法的数据格式。
#1.概念
概念有三点：
JSON全称JavaScript对象表示法（JavaScript Object Notation）。
JSON是存储和交换文本信息的语法。类似XML。
JSON比XML更小、更快，更易解析。
———— 摘自 W3school JSON教程
JSON 使用 JavaScript 语法来描述数据对象，但是 JSON 仍然独立于语言和平台。JSON 解析器和 JSON 库支持许多不同的编程语言。
#2.语法
JSON在使用过程中可作为一个对象或者字符串存在，当作为对象时，用于获取JSON中的数据，而作为字符串时常用于网络数据传输。
JSON语法规则：
- 数据在名称/值对中
- 数据由逗号分隔
- 花括号保存对象
- 方括号保存数组
通常，JSON数据书写格式是名称/键值：
"name" : "pingan"
而JSON的值可以是 ：
- 数字（整数或浮点数）
- 字符串（在双引号中）
- 逻辑值（
true或false） - 数组（在方括号中）
- 对象（在花括号中）
null
JSON常常有三种类型：
三种类型：简单之，对象和数组。
必须注意：JSON字符串必须是双引号，单引号会语法错误。
#2.1 简单值
简单值可以是字符串:
"hello leo!"
也可以是数字,逻辑值：
1
#2.2 对象类型
内容放在花括号内，是多个键值对。
JSON对象 与 js 对象的三个区别：
- JSON对象 必须加双引号，而 js 对象属性名可以不加双引号。
- JSON对象 没有变量声明，而 js 对象有。
- JSON对象 没有分号，而 js 对象有。
// js 对象
var obj = {
name : "pingan",
age : "25",
};
// json 对象
{
"name" : "pingan",
"age" : "25",
"box" : [
"a","b","c"
]
}
#2.3 数组类型
内容放在方括号内。
JSON数组也没有分号和变量，常常可以把JSON数组和对象结合使用，构成更复杂的数据集合。
[
{
"name" : "leo",
"age" : 25,
"box" : ["a","b","c"]
},
{
"name" : "pingan",
"age" : 25,
"box" : ["a","b","c"]
}
]
#3. 使用
JSON最常见的用法就是，从服务端获取JSON数据，再将JSON数据转成JavaScrip对象使用。
JSON对象有两个方法：
-
JSON.stringify()： 序列化操作，将JavaScript对象转换成JSON字符串。 -
JSON.prase()：反序列化操作，将JSON字符串解析成JavaScript值。
#3.1 序列化操作
序列化操作常常使用JSON.stringify()。
简单例子:
let leo = {
name : "leo",
age : 25,
box : ["a","b","c"]
}
let pingan = JSON.stringify(leo);
console.log(pingan); // "{"name":"leo","age":25,"box":["a","b","c"]}"
注意：
- 默认情况下，
JSON.stringify()输出的JSON字符串不包含任何空格字符或缩进，因此结果就像上面那样。 - 序列化
JavaScript对象时，所有函数及原型成员都会被忽略，不体现在结果上。 - 值为
undefined的任何属性都会被跳过。
因此，最终的值都是有效的JSON数据类型的实例属性。
#3.2 反序列化操作
序列化操作常常使用JSON.parse()。
简单例子：
let copyPingan = JSON.parse(pingan);
copyPingan; // {name: "leo", age: 25, box: Array(3)}
如果传入JSON.parse()的字符串不是有效的JSON，则会抛出错误。
注意：
虽然pingan和copyPingan属性相同，但两者独立，没有任何关系。
#4.序列化选项
JSON.stringify()除了要传入序列化对象作为参数，还可以接收其他两个参数，用来指定序列化JavaScript对象的方式：
- 过滤器：可以是个数组，也可以是个函数。
- 选项：表示是否在
JSON字符串中保留缩进。
单独或组合使用两者，可以更加全面深入的控制JSON的序列化。
#4.1 过滤器
若过滤器的参数是数组，则JSON.stringify()返回的结果将只包含数组中的属性：
var leo = {
name : "leo",
age : 25,
box : ["a","b","c"]
}
var pingan = JSON.stringify(leo,["name","age"]);
console.log(pingan); // "{"name":"leo","age":25}"
若过滤器的参数是函数，则情况就不一样了，传入的函数需有两个参数（属性名和属性值）：
var leo = {
"name" : "leo",
"age" : 25,
"box" : ["a","b","c"]
}
var pingan = JSON.stringify(leo,function(key, value){
switch(key){
case "name":
return "我叫" + value
case "age":
return value + "岁"
default:
return value
}
});
console.log(pingan); // "{"name":"我叫leo","age":"25岁","box":["a","b","c"]}"
注意：使用switch的时候，必须指定default否则会返回undefined。
#4.2 选项
JSON.stringify()第三个参数是个选项，控制结果中的缩进和空白符。
- 若选项只有一个值，则表示每个级别缩进的空格数，最大值为
10，超过10则只会是10。
var leo = {
"name" : "leo",
"age" : 25,
"box" : ["a","b","c"]
}
var pingan = JSON.stringify(leo, null, 4);
console.log(pingan);
/*
"{
"name": "leo",
"age": 25,
"box": [
"a",
"b",
"c"
]
}"
*/
[#]5.解析选项
JSON.parse()可以接收一个函数作为参数，对每个键值对调用，为了跟JSON.stringify()的过滤函数区别，这个函数成为还原函数。
- 若还原函数返回
undefined，则表示要从结果中删除对应的键。 - 若还原函数返回其他值，则将该值插入结果中。
还原函数接收两个参数：属性名和属性值。
举例，在日期字符串转换为Date对象中，经常要用到还原函数：
var leo = {
"name" : "leo",
"age" : 25,
"date" : new Date(1993, 9, 9)
}
var pingan = JSON.stringify(leo);
var copy = JSON.parse(pingan,function (key, value){
// return key == "date" ? new Date(value) : value;
if(key == "date"){
return new Date(value);
}else{
return value;
}
})
console.log(copy);
// "{"name":"leo","age":25,"date":"1993-10-08T16:00:00.000Z"}"
var obj = {
name:"mumu",
age:18,
money:null,
say:function(){alert("babababa")},
family:["爸爸","妈妈","哥哥","姐姐"]
}
var str = JSON.stringify(obj);
// 将javascript 对象转换为JSON字符串;
console.log(str);
// 把字符串 转换为javascript 对象
var obj2 = JSON.parse(str);
console.log(obj);
console.log(obj2);
[#]参考文章
- W3school JSON教程
- 《JavaScrip高级程序设计》
