你不知道的js中关于this绑定机制的解析[看完还不懂算我输]

前言

最近正在看《你不知道的JavaScript》，里面关于this绑定机制的部分讲的特别好，很清晰，这部分对咱们js的使用也是至关关键的，而且这也是一个面试的高频考点，因此整理一篇文章分享一下这部分的内容，相信看本文的解析，你必定会有所收获的，若是喜欢的话能够点波赞/关注，支持一下。

游泳、健身了解一下：博客、前端积累文档、公众号、GitHub

---

为何要用this：

function identify() {
  console.log("Hello,I'm " + this.name);
}
let me = {
  name: "Kyle"
};
let you = {
  name: "Reader"
};
identify.call(me); // Hello,I'm Kyle
identify.call(you); // Hello,I'm Reader
复制代码

这个简单的栗子，能够在不一样的对象中复用函数identify，不用针对每一个对象编写一个新函数。

this解决的问题:

this提供了一种更优雅的方法来隐式'传递'一个对象的引用，所以能够将API设计得更加简洁而且易于复用。

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(); // 2
复制代码

因此：对于默认绑定来讲，决定this绑定对象的是函数体是否处于严格模式，严格指向undefined，非严格指向全局对象。

一般不会在代码中混用严格模式和非严格模式，因此这种状况很罕见，知道一下就能够了，避免某些变态的面试题挖坑。

隐式绑定：

规则：函数在调用位置，是否有上下文对象，若是有，那么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" - 指向全局
复制代码

隐式绑定丢失：

隐式绑定丢失的问题：实际上就是函数调用时，并无上下文对象，只是对函数的引用，因此会致使隐式绑定丢失。

一样的问题，还发生在传入回调函数中，这种状况更加常见，而且隐蔽，相似：

test(obj2.foo); // 传入函数的引用，调用时也是没有上下文对象。
复制代码

显式绑定:

就像咱们上面看到的，若是单纯使用隐式绑定确定没有办法获得指望的绑定，幸亏咱们还能够在某个对象上强制调用函数，从而将this绑定在这个对象上。

规则：咱们能够经过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绑定：

书中提到：在js中，实际上并不存在所谓的'构造函数'，只有对于函数的'构造调用'。

new的时候会作哪些事情：

1. 建立一个全新的对象。
2. 这个新对象会被执行 [[Prototype]] 链接。
3. 这个新对象会绑定到函数调用的this。
4. 若是函数没有返回其余对象，那么new表达式中的函数调用会自动返回这个新对象。

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

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

this四种绑定规则的优先级

若是在某个调用位置应用了多条规则，如何肯定哪条规则生效？

obj.foo.call(obj2); // this指向obj2 显式绑定比隐式绑定优先级高。
    new obj.foo(); // thsi指向new新建立的对象 new绑定比隐式绑定优先级高。
复制代码

显式绑定和new绑定没法直接比较(会报错),默认绑定是不该用其余规则以后的兜底绑定因此优先级最低，最后的结果是：

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

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

箭头函数的this指向不会使用上述的四条规则：

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

从上述栗子能够得出，箭头函数的this规则：

1. 箭头函数中的this继承于它外面第一个不是箭头函数的函数的this指向。
2. 箭头函数的 this 一旦绑定了上下文，就不会被任何代码改变。

PS: 后面写了篇箭头函数和普通函数的区别以及箭头函数的注意事项、不适用场景,感兴趣的同窗能够扩展一下。

---

结语

认真看完的话，相信你已经get到this的用法了，最后推荐一下《你不知道的JavaScript》，这本书真的很好，写的也颇有趣，没看过的小伙伴抓紧入手了。

博客、前端积累文档、公众号、GitHub、wx:OBkoro一、邮箱：obkoro1@foxmail.com

以上2018.6.30