我真的懂 this 吗

先知

this 实际上是在函数被调用时发生的绑定，它指向哪里完全取决于函数在哪里被调用。

大提示: 不想看分析的可以直接拉到最后看结论。

面试常见题

第一题

function foo(){
  console.log(this.a)
}
var obj = {
  a :2,
  foo:foo
}
var bar = obj.foo
obj.foo() 
bar()

问：最后两个打印出什么？

第二题

function foo(){
  console.log(this.a)
}
var obj = {
  a :2,
  foo:foo
}
var obj2 = {
  a:1,
  obj:obj
}
var obj3 = obj2.obj.foo
obj2.obj.foo() // 2
obj3() //undefined

问：最后两个打印出什么？
答？

我们如何理解 this 绑定的到底是谁？或者说 this 到底是谁？下面介绍四种方法

1. 默认绑定

什么是默认绑定呢？上代码先

var a = 2;
function foo(){
  console.log(this.a)
}
function foo2(){
  'use strict'
  console.log(this.a)
}
foo() // 2
foo2() //  TypeError: Cannot read property 'a' of undefined

在上面的代码中，「 foo() 直接使用时不带任何修饰的函数引用进行调用的」，
因此只能使用「默认绑定」
所以到 foo() 中的 this 绑定到「全局对象 window 」，而「严格模式」时，全局对象无法被绑定，所以 this 绑定到「undefined」
默认绑定即不带任何修饰的函数引用被调用时的绑定，此时 this 绑定到「全局对象 window 」或者「undefined」

2. 隐式绑定

隐式绑定是什么呢？隐式的绑定

当函数引用有上下文对象时，隐式绑定会把函数调用中的 this 绑定到这个上下文对象。

那么回到面试题

2.1 面试题一

function foo(){ console.log(this.a)}
var obj = { a :2,  foo:foo }
var bar = obj.foo
obj.foo() //2
bar()  /undefined

foo() 被调用时，落脚点指向 obj 对象（上下文对象），所以 this 绑定到 obj ，this.a 即 obj.a , 所以打印出了 2

但是为什么 bar() 打印出了 undefined 呢？

虽然 bar 是 obj.foo 的引用，但实际上是 foo函数本身的引用，所以此时 bar() 是不带任何修饰的函数调用，使用默认调用

2.2 面试题二

function foo(){ console.log(this.a)  }
var obj = {  a :2,  foo:foo  }
var obj2 = {  a:1,  obj:obj   }
var obj3 = obj2.obj.foo
obj2.obj.foo() // 2
obj3() //undefined

跟上面一题相同，虽然引用链比较长，但是最后 foo() 是在 obj 中被调用，所以 this 绑定到 obj ，引用链只有最后一层影响调用位置。

隐式绑定总结：函数在上下文对象中调用时， this 绑定到上下文对象上。

3. 显式绑定

使用「 call apply bind 」进行绑定 this , this 绑定到第一个传入的参数

MDN三者的用法

3.1 call 的使用

回到面试题第一题，我们使用「 call 」进行显式绑定

function foo(){ console.log(this.a)  }
var obj = {
  a :2,
  foo:foo
}
var bar =obj.foo
obj.foo() // 2
bar.call(obj) //2

此时两者都打印出 2 ，因为我们将 this 绑定到 obj ，打印出的即是 //obj.a //2

3.2 apply 绑定第一个参数是 this , 二参是一个数组

3.3 bind 是绑定第一个参数是 this

显式绑定总结: 使用call apply bind 时，第一个参数是 this ，不传的话，默认为 undefined 。

4. new 绑定

使用 new 来调用函数，到底做了什么？

1. 创建一个全新的对象
1. 这个新对象的proto 链接到构造函数的 prototype
1. 这个新对象会绑定到函数调用的 this
1. 如果函数没有返回其他对象，那么 new 表达式中的函数调用会自动返回这个新对象。

function foo(a){
  this.a = a 
}
var bar = new foo(2)

console.log(bar.a) // 2

分析：使用 new 调用 foo() 时，我们构造一个对象并把它绑定到 foo() 调用的 this 上

new 绑定总结： new 绑定中 this 绑定的就是新生成的对象

总结

1. 「箭头函数」内的 this 就是外面的 this ，外面的 this 是啥看下面四条
2 . 「 new 绑定」函数是否在 new 中调用？如果是 this 绑定的即是新创建的对象。
var bar = new foo()
1. 「显式绑定」函数是否通过 call 、apply、 bind 绑定？this绑定的时第一个参数
  var bar = foo.call(obj)
4.「隐式绑定」函数是否在某个上下文中调用？是的话，this 绑定的是那个上下文对象
var bar = obj.foo()
1. 「默认绑定」如果都不是，那么就是默认绑定。严格模式绑定到 undefined ，否则绑定到全局对象
  var bar = foo()

后记

你要是看不懂我也没办法了。。。。

文章为个人总结，不足之处还请留言或私信。

转载请注明出处。

以上。