JavaScript作为web前端开发的必用技术之一,在前端编写的过程中,都会涉及到。但在编写JavaScript的过程中,有一些方法却让人很是纳闷,比如apply()和call()方法。
存在即是合理的,很多时候在编程中,我们不得不用apply()和call()方法的场景,下面我们就通过代码来看看这两种方法的应用。
<html>
<body>
<script>
var product = "house";
var boss = {
chooseWorker: function(makeFunction){
return makeFunction(2);
},
make: function(count){ // 为了与foodWorker和carWorker的make方法做对比
console.log("boss does not work");
}
};
var foodWorker = {
product : "food",
make: function(count){
console.log("foodWorker: make " + count + " " + this.product);
}
};
var carWorker = {
product : "car",
make: function(count){
console.log("carWorker: make " + count + " " + this.product);
}
};
boss.chooseWorker(foodWorker.make);
boss.chooseWorker(carWorker.make);
</script>
<body>
</html>
在这段代码里面,要达到的目的是:通过传递worker对象的make方法的方式来让boss选择生产出那种产品,boss的chooseWorker方法的参数是make方法。本来期望传给chooseWorker方法的参数如果是foodWorker的make方法就生产food,如果是carWorker的make方法就生产carWorker。期望的结果是这样:
foodWorker: make 2 food
carWorker: make 2 car
但是结果却是这样的:
foodWorker: make 2 house
carWorker: make 2 house
那为什么传递的是指定对象的方法,里面的this.product却是“house”呢?
原因是JavaScript对象的函数本身并不包含对象的信息的信息,如果直接调用makeFunction,其调用方默认是window对象,也就是说this==window,所以this.product就是“house”了。要想达到预想的效果,就得用到apply方法了。比如这样:
<html>
<body>
<script>
var product = "house";
var boss = {
chooseWorker: function(makeFunction, worker){
return makeFunction.apply(worker, [2]);
},
make: function(count){
console.log("boss does not work");
www.maizitime.com
}
};
var foodWorker = {
product : "food",
make: function(count){
console.log("foodWorker: make " + count + " " + this.product);
}
};
var carWorker = {
product : "car",
make: function(count){
console.log("carWorker: make " + count + " " + this.product);
}
};
boss.chooseWorker(foodWorker.make, foodWorker);
boss.chooseWorker(carWorker.make, carWorker);
</script>
<body>
</html>
其输出结果就达到预期了,对于一些设计模式和继承使用的时候,apply和call方法常被用到。主要是解决this对象的指向问题,当然也可以通过使用apply和call来替换方法的调用者。
在JavaScript中,apply和call的作用基本相同,唯一的区别是apply有两个参数,而call只有一个参数。apply的第一个参数是函数的调用对象,第二个参数是函数的参数列表(参数数组)。当然如果函数没有参数,可以给apply方法传空数组([]);call的参数只有一个,就是函数的调用对象。apply包含了call的功能,所以一般用apply就行了。
这就是JavaScript的apply()和call()方法的一些基本使用,是小编在网上查阅JavaScript相关资料时精心收刮而来(如需了解更多JavaScript知识点,可看《JavaScript视频教程》),希望大家共同学习,共同进步。