JavaScript中this的指向问题以及call、apply、bind改变this指向

this的指向，一句话总结就是谁调用的就指向谁，那接下来我们就看下常见的函数调用方式：

1. 普通函数

function show() {
  console.log(this === window) // true
}
show()

普通函数的this默认指向的是window，因为调用show方法其实是省略了window，实际上是window.show()

2. 对象方法

var obj = {
  show: function () {
    console.log(this === obj)
  }
}
obj.show()

函数作为对象方法的调用就很明显了，obj调用的this自然指向obj

3. 构造函数

function Person() {
  this.say = function () {
    console.log(this === per) // true
  }
}
Person.prototype.show = function () {
  console.log(this === per) // true
}

var per = new Person()
per.say()
per.show()

构造函数中的方法是per这个实例对象调用的，所以this指向实例对象

4. 绑定事件函数

document.querySelector("#btn").onclick=function(){
    console.log(this === document.querySelector("#btn"))
}

按钮的点击事件，因为是按钮调用的，所以this指向按钮这个dom对象

5. 定时器函数

setInterval(function () {
  console.log(this === window)
}, 1000)

定时器函数是window调用的，this自然指向的是window，同理 setTimeout也是

6. 立即执行函数

;(function () {
  console.log(this === window)
})()

立即执行函数也是window调用的，this指向window。这有个小知识点，以(开头最好再前面加上;避免js执行解析的时候出错。

总结一下：

7. 改变this指向（call、apply、bind）

但是this的指向并不是一成不变的，js中提供了3种改变this执向的方法：call、apply、bind

其中apply和call用途完全一样，区别只是传参形式不同:

call是 (改变this需要指向的对象, param1,param2,param3…)

apply是 (改变this需要指向的对象, [param1,param2,param3])，可以根据具体情况选择。

接下来看个例子：

var name = "小吴"
var obj = {
  name: "李四"
}
function show() {
  console.log(this.name)
}
show() // 小吴
show.call(obj) // 李四

第一个show是普通函数调用，指向的是window，window上的name是“小吴”

第二个利用了call改变了this指向obj对象，obj上的name是“李四”

bind和前两者的相同点在于都会改变this指向，不同点在于bind并不会马上调用，前两者都会马上调用。

var name = "小吴"
var obj = {
  name: "李四"
}
function show() {
  console.log(this.name)
}
show.bind(obj)() //李四