JS Object Basics

1. Object

1.1 属性和方法

In object, values are writted in name:value pairs (name and value separated by a colon). 键值对直接用逗号隔开。

如果value不是函数，则它就是这个对象的属性property；

如果value是函数，则它就是这个对象的方法method：

var calculator = {
  num: [1, 2],
  add: function () {
    return this.num[0] + this.num[1];
  }
};
calculator.add(); //3

访问函数的property和method：

calculator.num; //[1, 2]
calculator["num"]; //[1, 2]
calculator.num[0]; //1
calculator["num"][1]; //2
calculator.add(); //3 调用method记得加括号，否则只是返回函数定义

1.2 子命名空间（对象套对象）

var person = {
  name: {
    first: "Alex",
    last: "O'Connor"
  },
  age: 30
};
person.name.first; //"Alex"

访问子命名空间，就一直链式dot下去

1.3 更新和创建属性/方法

var calculator = {
  num: [1, 2],
  add: function () {
    return this.num[0] + this.num[1];
  }
};
calculator.num = [2, 3];
calculator.add(); //5
calculator.operator = "+"; //增加了一个属性operator，其值为"+"
console.log(calculator);

用dot的表达去访问属性的时候，dot后面的就是那个属性的具体名称；而如果你想新增一个属性，但是它是变量，那么用[]表示法：

//接上面的calculator
var a = ["multiply", "divide", "substract"];
var b = ["*", "/", "-"];
calculator[a[0]] = b[0]; //属性的名字是a[0]的值
console.log(calculator);
/*
{
  num: [1, 2],
  operator: "+",
  multiply: "*",
  add: function () {
    return this.num[0] + this.num[1];
  }
}
*/

2. this

2.1 当this是在对象的method（第一层）里面

关键字"this"指向了当前代码运行时的对象( 原文：the current object the code is being written inside ).

这里指的第一层表示这个method内部不再另外包一个内部函数，this只在method的最外层函数的时候，被该对象调用这个方法时，this指向该对象。

2.2 this在全局函数内部

但是，当this在一个函数内部的时候，指向的对象其实是根据情况而定的。

其实this指向的是调用这个函数的对象。当一个函数在全局时，调用它的是全局对象window，所以这时候this指向的就是window。

//全局下
var myObj = {
  num: [1, 2],
  substract: function () {
    return this.num[1] - this.num[0];
  }
};
var num = [3, 6];
function add() {
  return this.num[0] + this.num[1];
}
add(); //9 这里调用add函数的是全局对象window，所以这个下面的this.num指的是全局变量num，而不是myObj的num
myObj.substract(); //1 这里调用substract的是myObj，所以this指向substract
var sub = myObj.substract;
sub(); //3 即使sub等于了myObj的方法定义，但是sub已经是函数了，调用这个函数的对象是全局对象window。

在strict模式下让函数的this指向undefined，因此，在strict模式下，你会得到一个错误：

"use strict";
var num = [3, 6];
function add() {
  return this.num[0] + this.num[1];
}
add(); //报错

2.3 method里面又包了函数

var myObj = {
  num: [1, 2],
  substract: function () {
    function substractFromTen() {
      return 10 - this.num[0] - this.num[1];
    }
    return substractFromTen();
  }
};
myObj.substract(); //报错，因为this在内部函数里，这时候this又指向了window

用that在第一层的时候捕获this，内层函数用that，就可以保证that指向的是对象

var myObj = {
  num: [1, 2],
  substract: function () {
    var that = this;
    function substractFromTen() {
      return 10 - that.num[0] - that.num[1];
    }
    return substractFromTen();
  }
};
myObj.substract(); //7

当然用apply，call也可以改变this的指向。

3. apply(), call(), bind()

var num = [3, 6];
function add() {
  return this.num[0] + this.num[1];
}
var myObj = {
  num: [2, 4]
}
add.apply(myObj, []);//6 将add函数里的this替换为myObj，则this实际上指向了myObj, []是像add函数传的参数, 空数组表示不传参
add.call(myObj); //6

call()和apply()的效果相同，fn.call(obj)，fn.apply(obj)都是将fn中的this替换（指向）obj，并且马上执行fn。它们两个的区别在于传参（传给前面fn的参数）的形式：

var num = 9;
function fn(num1, num2) {
    console.log(num1 + num2);
    console.log(this.num);
}
var obj = {
  num: 5
};
fn.call(obj , 100 , 200);//300 5 call参数一个个传
fn.apply(obj , [100, 200]); //300 5 apply参数放在数组里传
var temp = fn.bind(obj, 50, 60); //不执行，所以无输出
temp(); // 110 5
fn.bind(obj, 10, 20);
fn(); //NaN 9 并不会显示你bind之后的值，不改变原来的fn

bind()与call()的区别在于，同样改变this指向，但是不会马上执行。上述例子中注意，一定要把bind过后的函数给一个temp的变量，然后调用temp().

用apply(), call()可以调用函数。

Math.max.apply(null, [2, 4 ,3]); //4 本来函数Math.max是要一个个数字作为参数的，需要找一个数组里最大值的时候只要用apply把这个数组当做参数传给max就好，null在非严格模式下绑定window

4. JSON

JSON 是用于将结构化数据表示为JavaScript对象的标准格式，通常用于在网站上表示和传输数据（例如从服务器向客户端发送一些数据，因此可以将其显示在网页上）。

JSON可以作为一个对象或者字符串存在，前者用于解读 JSON 中的数据，后者用于通过网络传输 JSON 数据。

JSON 是一种纯数据格式，它只包含属性，没有方法。

4.1 JSON Syntax

JSON来源于JavaScript，所以其书写拥有JS书写的规范：

Data is in name/value pairs 这里的name必须是string，用双引号；value必须是number, string, JSON object, array, boolean, null其中的一种，不能是undefined, date, function
Data is separated by commas
Curly braces hold objects
Square brackets hold arrays

{
  "name": "John",
    "age": 30,
  "employees": [ "John", "Anna", "Peter" ],
  "sale": true,
  "middlename": null
}

4.2 JSON.stringify()

JSON.stringify()，接收一个对象作为参数，返回的是对应的JSON字符串。

4.3 JSON.parse()

JSON.parse()，接收JSON对象字符串作为参数，返回JavaScript对象。

JS 对象基础