改变函数内部的this指针的指向

如有错漏之处，请指正。

call() , apply() , bind()

call()的用法

var obj = {
    text: '我的两个爱好有：'
}

function getHobby(a, b) {
    console.log(this.text + a + '和' + b)
}

getHobby.call(obj, '足球', '羽毛球')
// 我的两个爱好有：足球和羽毛球

apply()的用法

var obj = {
    text: '我的两个爱好有：'
}

function getHobby(a, b) {
    console.log(this.text + a + '和' + b)
}

getHobby.apply(obj, ['足球', '羽毛球'])
// 我的两个爱好有：足球和羽毛球

bind()的用法

var obj = {
    text: '我的两个爱好有：'
}

function getHobby(a, b) {
    console.log(this.text + a + '和' + b)
}

getHobby.bind(obj, '足球', '羽毛球')()
// 我的两个爱好有：足球和羽毛球

对比

1. getHobby.call(obj, '足球', '羽毛球')
2. getHobby.apply(obj, ['足球', '羽毛球'])
3. getHobby.bind(obj, '足球', '羽毛球')()

通过以上对比，不难理解：

1. 三者的第一个参数，都是this的指向。
2. call和bind在第一个参数后面传入的是一个参数列表。而 apply的第二个参数为参数数组。
3. call和apply是立即调用。而bind返回对应函数，需要自己再调用()。

番外

this的指向

简单的说：默认情况下，指向全局，浏览器的话就是指向window。如果函数被某个对象调用，那么就指向这个对象。

具体看一下例子：

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

xxx()

这里就指向了window

var obj = {
  "a": 10,
  xxx: function(){
    console.log(this)
  }
}

obj.xxx()

xxx()被obj调用，所以this指向了obj

解释

其实这不是正常调用形式，这只是一种简写，完整的写法如下：

1. 在默认情况下，会隐式的调用call(undefined)

xxx()
// 等价于
xxx.call(undefined)

在浏览器中，如果传入的是undefined，那么会自动的指向 window （在严格模式下传入undefined，那么指向的是undefined）

1. 函数被某个对象调用，会隐式的调用call(这个对象)

obj.xxx()
// 等价于
obj.xxx.call(obj)

因此 this 指向了 obj。