高手为你解答this指向问题

this指向分为7种情况:箭头函数、new、bind、apply 和 call、obj. 、直接调用、不在函数里

1. 箭头函数

箭头函数内的this指向外层的this。所以要知道箭头函数的this就得先知道外层this的指向。

2.new

当使用new关键字调用函数时，函数中的this一定是JS创建的新对象。

3.bind

特点1：多次bind时只认第一次bind的值。

function func() {
  console.log(this)
}

func.bind(1).bind(2)() // 1

特点2：箭头函数中this不会被修改

func = () => {
  console.log(this)
}

func.bind(1)() // Window，箭头函数优先

特点3：bind与new

function func() {
  console.log(this, this.__proto__ === func.prototype)
}

boundFunc = func.bind(1)
new boundFunc() // Object true

4.apply和call

apply()和call()的第一个参数都是this，区别在于通过apply调用时实参是放到数组中的，而通过call调用时实参是逗号分隔的。

易错点：箭头函数中this不会被修改

func = () => {
  // 这里 this 指向取决于外层 this
  console.log(this)
}

func.apply(1) // Window，箭头函数优先

 易错点:bind函数中this不会被修改

function func() {
  console.log(this)
}

boundFunc = func.bind(1)
boundFunc.apply(2) // 1，bind()优先

5.obj.

function func() {
  console.log(this.x)
}

obj = { x: 1 }
obj.func = func
obj.func() // 1

跟上述一样，箭头函数跟bind函数的优先级更高

6.直接调用

在函数不满足前面的场景，被直接调用时，this 将指向全局对象。在浏览器环境中全局对象是 Window，在 Node.js 环境中是 Global。普通函数指向Window。

function func() {
  console.log(this)
}

func() // Window

7.不在函数里

• 在 <script /> 标签里，this 指向 Window。
• 在 Node.js 的模块文件里，this 指向 Module 的默认导出对象，也就是 module.exports。