深入理解this绑定原理

前言

前段时间，看了《你不知道的JavaScript》中this的全面解析，讲的特别好，还没看过的小伙伴抓紧去学习，在这边特意整理总结了一波，一起分享学习。在这之前可以先理解一下关于this、call、applay和bind这篇文章。

调用栈

在了解this绑定原理之前，首页要先了解JavaScript的执行栈。（执行栈也叫做调用栈）如果对调用栈还不了解，可以先详细了解深入浅出JavaScript执行上下文和执行栈。

JavaScript是单线程的，所有这决定了同一时间只能做一件事情，其他的活动或事情只能排队等候了，于是就生成出一个等候队列的执行栈（Execution Stack）。简单来说，执行栈就是为了到达当前执行位置所调用的所有函数。而调用位置就在当前正在执行的函数的前一个调用中。

function baz() {
    // 当前执行栈是：baz
    // 调用位置是baz前一个调用中，因此是全局作用域
    console.log('baz');
    bar();
}

function bar() {
    // 当前执行栈是：bar
    // 调用位置是bar前一个调用中，因此是baz
    onsole.log('bar');
}

baz()  // baz的调用位置

根据上面的规则，则不难判断出上述代码的调用栈和调用位置。而调用栈和调用位置则决定了this的绑定对象。其绑定规则有四种，只有找到调用位置，才能判断需要应用四条规则中的哪一条。

默认绑定

在非严格模式下，this指向全局对象，严格模式下this则会指向undefined

function foo() {
  console.log(this.a); // this指向全局对象
}
var a = 2;
foo(); // 2
function foo2() {
  "use strict"; // 严格模式this绑定到undefined
  console.log(this.a); 
}
foo2(); // TypeError:a undefined

但是如果在严格模式下调用其他函数，则不影响默认绑定。

function foo() {
  console.log(this.a); // foo函数不是严格模式 默认绑定全局对象
}
var a = 2;
function foo2(){
  "use strict";
  foo(); // 严格模式下调用其他函数，不影响默认绑定
}
foo2();

上述为独立的函数调用，其调位位置为全局作用域，所有this绑定在全局作用域上。

隐式绑定

函数在调用位置，是否有上下文对象，如果有，那么this就会隐式绑定到这个对象上。
也可以简单理解为是否被某个对象包含了。

function foo() {
  console.log(this.a);
}
var a = "Oops, global";
let obj2 = {
  a: 2,
  foo: foo
};
let obj1 = {
  a: 22,
  obj2: obj2
};
obj2.foo(); // 2 this指向调用函数的对象
obj1.obj2.foo(); // 2 this指向最后一层调用函数的对象

// 隐式绑定丢失
let bar = obj2.foo; // bar只是一个函数别名 是obj2.foo的一个引用
bar(); // "Oops, global" - 指向全局

上述代码中函数foo调用位置在obj2上下文中，所有this绑定在obj2作用域中,所以obj2.foo()、obj1.obj2.foo()最终都为2，而let bar = obj2.foo实际上就是函数的引用赋给变量bar，调用时，并没有上下文对象，所以会导致隐式绑定丢失。

显式绑定

通过apply、call、bind将函数中的this强制绑定到指定对象上。

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

需要注意的是：

• 如果传入了一个原始值(字符串,布尔类型，数字类型)，来当做this的绑定对象，这个原始值会转换成它的对象形式。
• 如果把null或者undefined作为this的绑定对象传入call、apply、bind，这些值会在调用时被忽略，实际应用的是默认绑定规则。

new绑定

如果对new关键字不太了解，可以先看这篇关于new命令。

使用构造调用的时候，this会自动绑定在new期间创建的对象上。

function foo(a) {
  this.a = a; // this绑定到bar上
}
let bar = new foo(2);
console.log(bar.a); // 2

四种绑定规则的优先级

• 显式绑定 > 隐式绑定 > 默认绑定
• new绑定 > 隐式绑定 > 默认绑定

function foo() {
    this.a = 100;
}
var obj1 ={
    foo: foo;
}
var obj2 = {}
obj1.foo.call(obj2, 2); // 2  this指向obj2 显式绑定比隐式绑定优先级高。

new obj1.foo(4); // thsi指向new新创建的对象 new绑定比隐式绑定优先级高。

显式绑定和new绑定无法直接比较(会报错),默认绑定是不应用其他规则之后的兜底绑定所以优先级最低。

箭头函数this指向

箭头函数this不会使用这四条绑定规则。

function foo() {
  return (a) => {
    // this继承自foo
    console.log(this.a);
  };
}
let obj1 = {
  a: 2
};
let obj2 = {
  a: 3
};
let bar = foo.call(obj1); // foo this指向obj1
bar.call(obj2); // 输出2 这里执行箭头函数 并试图绑定this指向到obj2

从上述可以得出，箭头函数的this规则：

• 箭头函数中的this继承于它外面第一个不是箭头函数的函数的this指向。如果没有则指向全局。
• 箭头函数的 this 一旦绑定了上下文，就不会被任何代码改变。

小结

如果要判断一个运行中函数this绑定，就需要找到这个函数直接调用位置。找到之后就可以顺序应用下面四条规则来判读this绑定对象。

1. 有new调用，绑定到新创建对象。
2. 由call或者apply、bind调用，绑定到指定对象。
3. 由上下文对象调用，绑定到那个上下文对象。
4. 默认：在严格模式绑定到undefined，否则绑定到全局

箭头并不适用与上述四条规则，而是由他的外层函数继承而来。

更多优质文章可以访问GitHub博客，欢迎帅哥美女前来Star！！！