全面理解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绑定，在全局作用域中则会绑定到全局对象上。