JavaScript之this

一、this

什么是this

this可以用在构造函数之中，表示实例对象。除此之外，this还可以用在别的场合。但不管是什么场合，this`都有一个共同点：它总是返回一个对象

var person = {
  name: '张三',
  describe: function () {
    return '姓名：'+ this.name;
  }
};

person.describe()
// "姓名：张三"
this.name表示name属性所在的那个对象。由于this.name是在describe方法中调用，而describe方法所在的当前对象是person，因此this指向person，this.name就是person.name。

1.this实质

JavaScript 语言之所以有 this 的设计，跟内存里面的数据结构有关系

var obj = { foo:  5 };
JavaScript 引擎会先在内存里面，生成一个对象{ foo: 5 }，然后把这个对象的内存地址赋值给变量obj。也就是说，变量obj是一个地址（reference）

基本对象

原始的对象以字典结构保存，每一个属性名都对应一个属性描述对象。举例来说，foo属性，实际上是以下面的形式保存的。

var obj = { foo:  5 };
foo属性的值保存在属性描述对象的value属性里面
{
  foo: {
    [[value]]: 5
    [[writable]]: true
    [[enumerable]]: true
    [[configurable]]: true
  }
}

复杂对象

当属性的值是一个函数时，引擎会将函数单独保存在内存中，然后再将函数的地址赋值给foo属性的value属性

var obj = { foo: function () {} };
foo属性的值保存在内存地址里面
{
  foo: {
    [[value]]: 函数的地址
    ...
  }
}
    
由于函数是一个单独的值，所以它可以在不同的环境（上下文）执行
var f = function () {
  console.log(this.x);
}

var x = 1;
var obj = {
  f: f,
  x: 2,
};

// 单独执行
f() // 1

// obj 环境执行
obj.f() // 2

2.this的动态指向

由于对象的属性可以赋给另一个对象，所以属性所在的当前对象是可变的，即this的指向是可变的。

function f() {
  return '姓名：'+ this.name;
}

var A = {
  name: '张三',
  describe: f
};

var B = {
  name: '李四',
  describe: f
};

A.describe() // "姓名：张三"
B.describe() // "姓名：李四"

3.使用场合

（1）全局环境

全局环境使用this，它指的就是顶层对象window
this === window // true

function f() {
  console.log(this === window);
}
f() // true

（2）构造函数

构造函数中的this，指的是实例对象。

var Obj = function (p) {
  this.p = p;
};
var o = new Obj('Hello World!');
o.p // "Hello World!"
定义了一个构造函数Obj。由于this指向实例对象，所以在构造函数内部定义this.p，就相当于定义实例对象有一个p属性。

（3）对象的方法

如果对象的方法里面包含this，this的指向就是方法运行时所在的对象。该方法赋值给另一个对象，就会改变this的指向。

var obj ={
  foo: function () {
    console.log(this);
  }
};
内部的this指向obj
obj.foo() // obj

下面的情况会改变this指向

var obj ={
  foo: function () {
    console.log(this);
  }
};

// 情况一
(obj.foo = obj.foo)() // window
// 情况二
(false || obj.foo)() // window
// 情况三
(1, obj.foo)() // window
JavaScript 引擎内部，obj和obj.foo储存在两个内存地址，称为地址一和地址二。obj.foo()这样调用时，是从地址一调用地址二，因此地址二的运行环境是地址一，this指向obj。但是，上面三种情况，都是直接取出地址二进行调用，这样的话，运行环境就是全局环境，因此this指向全局环境

如果this所在的方法不在对象的第一层，这时this只是指向当前一层的对象，而不会继承更上面的层

var a = {
  p: 'Hello',
  b: {
    m: function() {
      console.log(this.p);
    }
  }
};

a.b.m() // undefined
a.b.m方法在a对象的第二层，该方法内部的this不是指向a，而是指向a.b

二、绑定 this 的方法

JavaScript 提供了call、apply、bind这三个方法，来切换/固定this的指向。

1.Function.prototype.call()

函数实例的call方法，可以指定函数内部this的指向（即函数执行时所在的作用域），然后在所指定的作用域中，调用该函数。

var n = 123;
var obj = { n: 456 };

function a() {
  console.log(this.n);
}

a.call() // 123
a.call(null) // 123
a.call(undefined) // 123
a.call(window) // 123
a.call(obj) // 456

call方法还可以接受多个参数

function add(a, b) {
  return a + b;
}
第一个参数就是this所要指向的那个对象
add.call(this, 1, 2) // 3

2.Function.prototype.apply()

apply方法的作用与call方法类似，也是改变this指向，然后再调用该函数。唯一的区别就是，它接收一个数组作为函数执行时的参数

function f(x, y){
  console.log(x + y);
}

f.apply(null, [1, 1]) // 2

举例应用

（1）找出数组最大元素
var a = [10, 2, 4, 15, 9];
Math.max.apply(null, a) // 15
（2）转换类似数组的对象      --length为数组长度
Array.prototype.slice.apply({0: 1, length: 1}) // [1]
Array.prototype.slice.apply({0: 1, length: 2}) // [1, undefined]

3.Function.prototype.bind()

bind方法用于将函数体内的this绑定到某个对象，然后返回一个新函数

var d = new Date();
d.getTime() // 1481869925657

var print = d.getTime;
print() // Uncaught TypeError: this is not a Date object.
getTime方法内部的this，绑定Date对象的实例，赋给变量print以后，内部的this指向print

var print = d.getTime.bind(d);      //利用bind绑定
print() // 1481869925657

bind还可以接受更多的参数，将这些参数绑定原函数的参数

var add = function (x, y) {
  return x * this.m + y * this.n;
}

var obj = {
  m: 2,
  n: 2
};

var newAdd = add.bind(obj, 5);
newAdd(5) // 20
bind方法除了绑定this对象，还将add函数的第一个参数x绑定成5，然后返回一个新函数newAdd，这个函数只要再接受一个参数y就能运行了