JS中的this关键字

执行上下文生命周期：

创建（生成变量对象、建立作用域链、确定this指向） -------》 执行（变量赋值、函数引用、执行其他代码） -------执行完毕后出栈，等待被回收-------》

1. this 的指向，是在函数被调用的时候确定的。也就是执行上下文被创建时确定的。

var a = 10;
var obj = {  a: 20}
function fn() {  console.log(this.a);}
fn(); // 10
fn.call(obj); // 20

2. 在函数执行过程中，this 一旦被确定，就不可更改了。

var a = 10;
var obj = {  a: 20}
function fn() {  
    this = obj; // 这句话试图修改this，运行后会报错  
    console.log(this.a);
}
fn();

在一个函数上下文中，this 由调用者提供，由调用函数的方式来决定。如果调用者函数，被某一个对象所拥有，那么该函数在调用时，内部的 this 指向该对象。如果函数独立调用，那么该函数内部的 this，则指向 undefined。 但是在非严格模式中，当 this 指向 undefined 时，它会被自动指向全局对象。

// 为了能够准确判断，我们在函数内部使用严格模式，因为非严格模式会自动指向全局
function fn() {  
    'use strict';  
    console.log(this);
}
fn();  // fn是调用者，独立调用
window.fn();  // fn是调用者，被window所拥有

单独的 {} 不会形成新的作用域。

3. 使用 call，apply 显示指定 this

call 和 apply 除了参数略有不同之外，其功能完全一样。它们的第一个参数都为this将要指向的对象。

function fn(num1, num2) {  
    console.log(this.a + num1 + num2);
}
var obj = { a: 20 }
fn.call(obj, 100, 10); // 130
fn.apply(obj, [20, 10]); // 50

应用场景：

• （1）将类数组对象转换为数组

function exam(a, b, c, d, e) {  
    // 先看看函数的自带属性 arguments 什么是样子的  
    console.log(arguments);  
    // 使用call/apply将arguments转换为数组, 返回结果为数组，arguments自身不会改变  
    var arg = [].slice.call(arguments);  
    console.log(arg);
}
exam(2, 8, 9, 10, 3);
// result:
// { '0': 2, '1': 8, '2': 9, '3': 10, '4': 3 }
// [ 2, 8, 9, 10, 3 ]
//
// 也常常使用该方法将DOM中的nodelist转换为数组
// [].slice.call( document.getElementsByTagName('li') );

• （2）根据需求灵活改动this指向
• （3）实现继承

// 定义父级的构造函数
var Person = function (name, age) {  
    this.name = name;  
    this.age = age;  
    this.gender = ['man', 'woman'];
} // 定义子类的构造函数
var Student = function (name, age, high) {  
    // use call  
    Person.call(this, name, age);  
    this.high = high;
}
Student.prototype.message = function () {  
console.log('name:' + this.name + ', age:' + this.age + ', high:' + this.high + ', gender:' + this.gender[0] +';');
}
new Student('xiaom', 12, '150cm').message();
// result
// ----------
// name:xiaom, age:12, high:150cm, gender:man;

在 Student 的构造函数中，借助 call 方法，将父级的构造函数执行了一次，相当于将 Person 中的代码，在Sudent 中复制了一份，其中的 this 指向为从 Student 中 new 出来的实例对象。call 方法保证了 this 的指向正确，因此就相当于实现了继承。Student 的构造函数等同于下。

var Student = function (name, age, high) {  
    this.name = name;  
    this.age = age;  
    this.gender = ['man', 'woman'];  
    // Person.call(this, name, age); 这一句话，相当于上面三句话，因此实现了继承  
    this.high = high;
}

• （4）在向其他执行上下文的传递中，确保 this 的指向保持不变

var obj = {
  a: 20,
  getA: function () {
    setTimeout(function () {
      console.log(this.a)
    }, 1000)
  }
}
obj.getA();

例子中，由于匿名函数的存在导致 this 指向的丢失，在这个匿名函数中 this 指向了全局。 借助闭包与 apply 方法，封装一个 bind 方法。

function bind (fn, obj) {
  return function () { 
    return fn.apply(obj, arguments);
  }
} 
var obj = {
  a: 20,
  getA: function () {
    setTimeout(
      bind(function () { console.log(this.a) }, this), 
      1000
    )
  }
}
obj.getA();

当然，也可以使用 ES5 中已经自带的 bind 方法。它与我上面封装的 bind 方法是一样的效果。（ES6中也常常使用箭头函数的方式来替代这种方案）

var obj = {
  a: 20,
  getA: function () {
    setTimeout(
      function () { console.log(this.a) }.bind(this), 
      1000
    )
  }
}

4. 构造函数与原型方法上的 this

通过 new 操作符调用构造函数，会经历以下4个阶段。

• 创建一个新的对象；
• 将构造函数的this指向这个新对象；
• 指向构造函数的代码，为这个对象添加属性，方法等；
• 返回新对象。