跟我学习Javascript的call(),apply(),bind()与回调
基础知识
在Javascript中,函数不仅可以像其他变量一样进行传递,还可以通过call(), apply()和bind()这三种函数方法来控制函数内部的this关键字。这三种方法的主要作用是改变调用函数的this指向。
- call()方法:
call()方法的作用是在函数体内部,将一个对象绑定到this关键字。并将参数作为函数调用时传入函数。语法如下:
function.call(thisArg, arg1, arg2, ...)
其中,thisArg是指代被调用函数内部的this指向的对象,arg1, arg2, … 是指用来调用函数的参数列表。
- apply()方法:
apply()方法的作用与call()方法类似,只是在参数的形式上有所不同。apply()方法接受的是一个数组。语法如下:
function.apply(thisArg, [argArray])
其中,thisArg参数为被调用函数内部的this指向的对象,argArray参数为一个数组,包含用来调用函数的参数。
- bind()方法:
bind()方法将被调用函数的this值绑定到一个特定的对象上,并返回该函数的一个新的复制版本,这个新版本的函数内部this指向了该特定的对象。bind()方法不会调用函数,它只是返回一个新函数对象。语法如下:
function.bind(thisArg[, arg1[, arg2[, ...]]])
其中,thisArg是被绑定到函数内部this密钥的对象,而arg1,arg2等是指定在调用原始函数时所需要的参数。
示例说明
在下面这个示例中,我们定义了一个矩形对象和一个输出该对象面积的函数:
let rectangle = {
width: 10,
height: 20,
area: function() {
return this.width * this.height;
}
};
function printArea() {
console.log("The area is " + this.area());
}
我们可以使用call()、apply()和bind()来控制printArea()函数内部的this指向。
- 使用call()方法:
我们可以使用以下代码将printArea()函数与rectangle对象绑定,以便在函数内部使用矩形对象的属性和方法:
printArea.call(rectangle);
- 使用apply()方法:
可以使用以下代码将printArea()函数与rectangle对象绑定,以便在函数内部使用矩形对象的属性和方法:
printArea.apply(rectangle);
- 使用bind()方法:
我们可以使用以下代码将printArea()函数与rectangle对象绑定,并创建一个新的函数,以便在新函数中使用矩形对象的属性和方法:
let printRectangleArea = printArea.bind(rectangle);
printRectangleArea();
上述示例中,我们创建了一个新的函数printRectangleArea,该函数继承了printArea()的所有属性和方法,但它的内部this指向了rectangle对象。因此,当我们调用printRectangleArea()函数时,它就会输出正确的矩形面积。
我们还可以在一个异步操作中使用回调函数来改变函数内部this的指向。例如:
let myObj = {
myVar: 'Hello',
myFunc: function(callback) {
setTimeout(function() {
callback.call(myObj); //使用call()方法
}, 1000);
}
};
myObj.myFunc(function() {
console.log(this.myVar);
});
在这个例子中,myFunc()函数中的回调函数是通过使用call()方法来将myObj对象作为回调函数的this指向来进行调用的。
总结
使用call()、apply()和bind()方法可以使我们更好地控制函数内部this关键字的指向。这些方法可以在不更改函数原始定义的情况下,动态地向函数内部注入不同的上下文环境,从而实现更加灵活和多样化的函数调用方式。同时,在使用回调函数时,这些方法也能帮助我们改变函数内部this的指向,从而更好地管理异步代码中的上下文环境。
本站文章如无特殊说明,均为本站原创,如若转载,请注明出处:跟我学习javascript的call(),apply(),bind()与回调 - Python技术站