我会尽可能详细地讲解“浅谈javascript的call()、apply()、bind()的用法”的完整攻略。
在javascript中,call()、apply()、bind()都是用于修改函数执行时的上下文(即函数运行时的this指向)。
call()和apply()都可以在函数调用时改变函数体内的this指向。而且两者传参的方式有所不同。其中,call()的参数是一系列的值,而apply()的参数是一个数组。
bind()则是新生的改变this连接指向的函数,并能返回一个新的函数给我们使用。
function showName() {
console.log(this.name);
}
var obj1 = {
name: '张三'
};
showName.call(obj1); // 输出"张三"
以上示例中定义了一个函数showName()
,并定义了一个对象obj1
,对象中定义了一个名为name
的属性。接下来,我们将showName()
函数的上下文传入obj1
对象,因此,在调用showName.call(obj1)
时,函数内的this
指向obj1
,那么在控制台输出的内容就将为张三
。
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
属性值。因此,在控制台输出为我的名字是李四
。
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()
三个函数的简介和使用方法,通过这些示例我们相信大家已经能够更加清楚地理解三者之间的区别和用法了。需要注意的是,这些函数都是可用于修改函数执行时的上下文的,而且在实际开发中常常会被使用到。
本文链接:http://task.lmcjl.com/news/11054.html