彻底理解JS中的this

众所周知，this是JavaScript中很重要的关键字，根据不同的使用情况，this的指向会有所不同，总的来说就是指向函数运行时的环境对象（箭头函数除外）。下面就分情况来进行讨论。

this的指向？

1. 全局作用域下的this和一般函数中的this：

全局作用域下以的this以及全局作用域下普通函数中的this就指向全局对象，即window(浏览器)/{}(Node.js全局环境)/global(Node.js普通函数)

this === window; //true

function f(){
    return this;
}
f() === window; //true

如果函数中使用use strict，this则会指向undefined！

另外this没有作用域限制，嵌套函数不会继承上层函数的this!如果作为函数调用，会指向全局或undefined。因此如果想在外部函数访问this的值，权威指南给出的写法是将其保存到一个变量里：
var self = this;

2. 对象方法中的this

函数由哪个对象调用，this就指向哪个对象。下面一段代码中的函数f由obj对象调用，this自然就指向了obj对象。

var obj = {
  prop: 1,
  f: function(){
      return this.prop;
  }
};
obj.f();   //1

再来看一段代码:下面这段代码中，p对象继承自obj对象，p.f()中调用的虽然是obj中的f函数，但是this还是会指向p对象。再一次验证了之前说过原理，谁调用函数this就指向谁。

var obj = {
    f: function(){
        return this.a + this.b;
    }
};
var p = Object.create(obj);
p.a = 1;
p.b = 2;
p.f();  //3

3. 构造函数中的this

构造函数中的this比较特殊，这里先要简单介绍一下JS中构造器的工作流程，在使用new关键字的时候，会进行以下操作：

1. 创建一个空对象
2. 将该空对象的原型指向构造函数的prototype属性
3. 构造函数中的this指向该空对象
4. 执行构造函数中代码进行赋值操作

可以看到第三步就是把this指向了创建的空对象。

function Obj(){
    this.x = 1;
}
var obj = new Obj();
obj.x;  //1

4. call() & apply()方法与this

JS提供了call()和apply()方法，调用他们的必须是一个函数对象，因为他们定义在Function.prototype上。(ES6中apply被定义到Reflect对象上)他们的作用基本相同，只是接收参数不相同。他们用来间接调用函数，可以显式指定调用需要的this值(严格模式下可以是null或undefined，非严格模式下会被全局对象代替)。

call(obj, para1, para2...)

apply(obj, [para1, para2...])

他们的第一个参数都要传入调用函数的对象，也就是将this指向该对象(如果是函数就指向函数的引用，基础类型就指向对应包装对象，严格模式下可以传null/undefined,非严格模式下null和undefined会被全局对象代替)。后面是一个参数列表，apply要求该列表装在数组中(也可以是类数组对象)。下面的代码中通过call/apply把add函数中的this指向了obj对象。

function add(c){
  return this.a + this.b + c;
}
var obj = {
  a:1,
  b:2,
}
add.call(obj, 5);   //1+2+5 => 8
add.apply(obj,[4]); //1+2+4 => 7

5. bind()方法与this

bind()方法是ES5新增，作用同样也是将函数绑定至某个对象。该方法传入一个对象作为参数，也会返回一个新的函数。该方法主要作用有两个：改变this指向以及实现柯里化(Currying)。 下面代码是改变this指向的一个例子。

function f(){
  return this.a;
}

var g = f.bind({a: "test"});
g();    //test

柯里化(Currying)

这里顺便介绍一下柯里化技术。所谓柯里化通俗来说就是把多个参数的函数变成一个参数的函数。bind能实现这项技术是因为bind其余的参数会作为新函数的参数进行调用。下面的例子展示了bind来实现的方法，

function add(a, b){
  return a+b;
}

var f = add.bind(undefined, 10);
f(30);      //10+30 => 40

6. ES6箭头函数中的this

箭头函数中的this指向比较特殊，他是固定的。会在定义时进行绑定，而不是函数运行时被绑定到运行时所处的对象。MDN上的解释是：箭头函数不会创建自己的this,它只会从自己的作用域链的上一层继承this。(有关作用域链的内容，JS权威指南上已经介绍的比较清楚了,个人觉得作用域链这段看英文原版的好理解一些)

下面代码中如果不使用箭头函数，this就会指向运行时所在的obj对象，输出结果为2。而如果使用箭头函数，由于JS没有块级作用域，因此通过作用域链向上查询并不会是obj，而是全局对象，自然输出的也就是1了。

var a = 1;
var obj = {
  a: 2,
  f1: function(){
    return this.a;
  },
  f2: () => this.a
}
obj.f1();    //2 普通函数  
obj.f2();    //1 箭头函数

而如果外层是函数，JS中的局部作用域就指函数作用域，因此this会继承自上一层函数的this，这里借用一下阮老师的例子说明。如果是普通函数，因为定时器方法的this永远指向window，会输出21。而使用箭头函数，setTimeout定义生效是在foo函数中，this会继承作用域链上一层(外层代码块)的this，也就是{id:42}，输出自然是42了。这种特性很利于回调函数的封装。

function foo() {
  setTimeout(() => {
    console.log('id:', this.id);
  }, 100);
}

var id = 21;
foo.call({ id: 42 });
// id: 42

总结

总的来说，还是那句话，谁调用函数this就指向谁。但是也要注意构造器，以及箭头函数里的一些特殊之处，如果有不正确以及不准确的地方，还请大家指正！(^ _ ^)