全面理解JavaScript中的this

this在JavaScript中彷佛能够视而不见，但不去正视它学到的就只是残缺的JS。抛开这些“形而上”的意义不说，从实用性及代码简洁展现this的不可或缺的地位，举例子：

function identifyUser () {
  return this.name.toUpperCase();
}

let obj1 = {
  name: leeper;
}

let obj2 = {
  name: Sandman;
}

identifyUser.call(obj1) // -> LEEPER
identifyUser.call(obj2) // -> SANDMAN

若是不使用this，就须要给identifyUser()显示传入一个上下文对象，但随着使用模式的增长，显示传递上下文对象成了”噩梦“，让代码也变得愈来愈混乱。为了将API设计得更加简洁并易于复用，就必须正视this。

什么是this

若是在任何函数体外部，不管是否在严格模式，this都指代全局对象。这里着重讨论的是函数体内部的this。JavaScript的this老是指向一个对象，具体指向哪一个对象是在运行时基于函数的执行环境动态绑定的，而非函数被声明时的环境。

调用方式

在函数内部，this的绑定和函数声明的位置没有任何关系，只取决于函数的调用方式：

• 做为普通函数调用

this的值默认指向全局对象：

let a = 233;
function foo () {
  console.log(this.a);
}
foo() // -> 233

但在严格模式下，this默认为undefined；

• 做为对象的方法调用

函数调用时会绑定到上下文对象：

let obj = {
  a: 233,
  foo: foo
};
function foo () {
  console.log(this.a);
}
obj.foo(); // -> 233

对象引用链中只有在最后一层调用位置中起做用：

function foo () {
  console.log(this.a);
}
let obj1 = {
  a: 233,
  foo: foo
};
let obj2 = {
  a: 2333,
  obj1: obj1
}
obj2.obj1.foo() // -> 233

• bind方法

在讲bind以前不得不先提两种绑定丢失的状况：

// 第一种

function foo () {
  console.log(this.a);
}
var obj = {
  a: 233,
  foo: foo
};
var bar = obj.foo;
var a = 'global a';
bar(); // -> 'global a'

// 虽然bar是obj.foo的一个引用，但实际上，它引用的foo函数自己，做为普通函数直接调用，非严格模式下，this指向全局对象。

// 第二种
function foo () {
  console.log(this.a);
}
var obj = {
  a: 233,
  foo: foo
};
var a = "global a";
function doFn(fn) {
  fn();
}
doFn(obj.foo); // -> 'global a'

function foo () {
  console.log(this.a);
}
var obj = {
  a: 233,
  foo: foo
};
var a = "global a";
setTimeout(obj.foo, 0) // -> 'global a'

参数传入的是函数，做为普通函数调用，会致使被传入的这个函数this绑定丢失，this会指向默认的全局对象。
bind方法能够解决上this绑定丢失的状况：

function foo () {
  console.log(this.a);
}
var obj = {
  a: 233,
  foo: foo
};
var a = "global a";
var bar = foo.bind(obj);
function doFn (fn) {
  fn();
}
doFn(bar); // -> 233

fn.bind(某个对象)会建立一个与fn具备相同函数体和做用域的新函数，在这个新函数中，this将永久地绑定到了bind的第一个参数，不管这个函数如何被调用。

• call与apply方法

这两个方法的第一个参数是一个对象，是给this准备的，接着在调用函数时将其绑定到this。

let obj = {
  a:233
};
function foo () {
  console.log(this.a);
}
foo.call(obj) // -> 233

this绑定角度看，apply方法与call方法，区别在于其余参数上。

• 做为构造函数调用

使用new来调用函数时，会自动执行下面操做：

- 构造一个全新的对象；
- 构造出的新对象会被执行[[Prototype]]链接；
- 新对象会绑定到函数调用的this;
- 若是函数没有返回其余对象，那么表达式中的函数调用会自动返回这个新对象。

function foo (a) {
 this.a = a;
  }
  var bar = new foo(233);
  console.log(bar.a); // -> 233

使用new来调用foo()时，会构造一个新对象并把它绑定到foo()调用中的this上。

• 做为DOM事件处理函数

当函数被用做事件处理函数时，它的this会指向触发事件的元素。

• 箭头函数

箭头函数会继承外层函数调用的this绑定，在全局做用域中则会绑定到全局对象上。

function foo () {
  setTimeout(() => {
    console.log('a', this.a);
    }, 0);
}
var a = 'global a';
foo.call({a: 233}); // -> 233

若是是普通函数，执行时this应该指向全局对象，输出的'global a'，而箭头函数this继承它的外层foo函数的this绑定，因为使用call方法将foo函数的this绑定指向{a: 233}，因此输出233。

根据优先级判断常见this

• 函数是否在new中调用？若是是的话，this绑定的是新建立的对象；
• 函数是否经过call, apply或者bind绑定调用？若是是，this绑定的是指定的对象；
• 函数是否在某个上下文对象中调用（ var bar = obj.foo() ）？若是是，this绑定到那个上下文对象；
• 若是都不是，考虑是不是默认绑定，绑定到全局对象。若是是在严格模式下，则绑定到undefined。

总结

• 在任何函数体外部，不管是否在严格模式，this都指代全局对象。
• 在函数内部，this的绑定和函数声明的位置没有任何关系，只取决于函数的调用方式。
• 箭头函数会继承外层函数调用的this绑定，在全局做用域中则会绑定到全局对象上。