浅谈javascript的call()、apply()、bind()的用法

我会尽可能详细地讲解“浅谈javascript的call()、apply()、bind()的用法”的完整攻略。

什么是call()、apply()、bind()

在javascript中，call()、apply()、bind()都是用于修改函数执行时的上下文（即函数运行时的this指向）。

call()和apply()都可以在函数调用时改变函数体内的this指向。而且两者传参的方式有所不同。其中，call()的参数是一系列的值，而apply()的参数是一个数组。

bind()则是新生的改变this连接指向的函数，并能返回一个新的函数给我们使用。

call()、apply()的用法

示例1

function showName() {
  console.log(this.name);
}

var obj1 = {
  name: '张三'
};

showName.call(obj1); // 输出"张三"

以上示例中定义了一个函数showName()，并定义了一个对象obj1，对象中定义了一个名为name的属性。接下来，我们将showName()函数的上下文传入obj1对象，因此，在调用showName.call(obj1)时，函数内的this指向obj1，那么在控制台输出的内容就将为张三。

示例2

function showInfo(message) {
  console.log(message + this.name);
}

var obj2 = {
  name: '李四'
};

showInfo.apply(obj2, ['我的名字是']); // 输出"我的名字是李四"

以上另一个示例中，我们定义了一个新的函数showInfo()，并定义了新的对象obj2，同样定义了一个名为name的属性。在调用showInfo.apply(obj2, ['我的名字是'])时，将showInfo()函数的上下文传入obj2对象，并在函数中引用了一个传递进来的message参数，最后输出的内容就变成了传递进来的message和obj2对象的name属性值。因此，在控制台输出为我的名字是李四。

bind()的用法

示例3

var obj3 = {
  x: 10,
  y: 20
};

function Point() {
  this.point = [this.x, this.y];
}

var p = new Point();
console.log(p.point); // 输出"[undefined, undefined]"

var bindPoint = Point.bind(obj3);
var pBind = new bindPoint();
console.log(pBind.point); // 输出"[10, 20]"

以上示例中，我们定义了一个对象obj3，其中定义了x和y两个属性。接着我们定义了一个函数Point()，同时在函数中定义了一个point数组，数组中存放的是x和y的值。在调用new Point()时，我们发现数组里的this.x和this.y的值都为undefined，这是因为this指向的是Point()函数本身，而不是我们所希望的obj3对象。

因此，我们使用bind()来改变Point()函数的this指向，并将其绑定到obj3对象上，那么变量bindPoint将会是一个与Point()函数相绑定的新函数。接着我们再次调用new bindPoint()并输出其point数组中的值，那么控制台输出的内容就将为[10, 20]。

总结

以上就是关于javascript中的call()、apply()、bind()三个函数的简介和使用方法，通过这些示例我们相信大家已经能够更加清楚地理解三者之间的区别和用法了。需要注意的是，这些函数都是可用于修改函数执行时的上下文的，而且在实际开发中常常会被使用到。