JavaScript之call()、apply()、bind() 详解！

作为一名合格的前端开发者，大家都知道JavaScript中的this指向问题是一件很苦恼的事情，因为你稍不留意他就跳来跳去 很多Bug就是在不经意间this上下文出错导致。call()、apply()、bind()的作用也恰恰与this有关，因为在项目开发中很少用到，大家只知道他们是为了：“改变this指向”，但是这样草草了事的答案，只会暴露出你对它们“根本不了解”！！OK，先来看一段简单的代码：
// window
var name, age, love;
function Create(name, age, love) {
this.name = name
this.age = age
this.love = love
}
Create(‘王二牛’, ‘18岁’, ‘唱歌’) //调用函数 Create()
console.log(name, age, love) //输出结果 王二牛 18岁 唱歌

再此之前先了解call()函数的定义:

call()：它可以用来调用所有者对象作为参数的方法。通过 call()，能够使用属于另一个对象的方法。

首先，在window中定义了name age love三个变量，当执行Create()函数时 函数内部的this毫无疑问指向window，因为他没有具体指向调度者是谁，所以只能是window对象，其实此处调用相当于下面的写法：

Create.call(window, ‘王二牛’, ‘18岁’, ‘唱歌’) //编译器默认加上了call、并且指向window
然后，我们使用call()、()apply()函数改造一段改变this指向的代码：注意第一个参数此刻不是window对象，而是Person对象，故this不再指向winodw。

// call
var name, age, love;
var Person = {} //创建新对象

function Create(name, age, love) {
this.name = name
this.age = age
this.love = love
}
Create.call(Person, ‘王二牛’, ‘18岁’, ‘唱歌’) //第一个参数指向Person对象
console.log(Person) // 输出结果 {name: “王二牛”, age: “18岁”, love: “唱歌”}
语法：call()、apply()函数的第一个参数都是this的指向，即调用者。第二个参数及其以后的所有参数都是Create函数的实参；

区别：call()第二个以及之后的若干参数可以是string、function、Array、object等，且可以有多个参数；

      apply()只能有两个参数，并且实参只能以数组类型传递到调用函数内部，这也是两者唯一的区别；

接着我们来看看bind()函数的作用:

bind():将函数绑定到某一个特定的对象上，调用函数内的this指向的值会被绑定到传入bind()第一个参数的值，例如，f.bind(obj)，实际上可以理解为obj.f()；

// bind
var name = ‘张三疯’, age = 88;
var obj = {
name: ‘杨过’,
age: 18,
sex: ‘男’,
fun: function () {
console.log(this.name + " 今年" + this.age + “岁,” + “性别:” + this.sex)
}
}
var Girl = {
name: “小龙女”,
age: 16,
sex: “女”
}
obj.fun() // 输出结果 杨过 今年18岁,性别:男
obj.fun.bind(window)() // 输出结果 张三疯 今年88岁,性别:undefined
obj.fun.bind(Girl)() // 输出结果 小龙女 今年16岁,性别:女
上述代码，直接调用 obj.fun() 函数、内部的this指向了 obj 自身对象，因为调度者是obj自身。

当使用 bind 函数调用时 bind的第一个参数指向了 window 对象，即改变了 this 指向 window 中只定义了变量 name、age ，sex未定义，所以输出结果为“张三疯 今年88岁,性别:undefined”。

第三次调用改变了this指向为Girl对象，那么她的小龙女就上场了。

注意： bind()除了返回是函数以外，它的参数和 call 一样。

如果我的博客帮助你解决了开发问题，请不要吝啬你的小红心哦！