javascript中apply()方法和call()方法有什么区别?

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视频教程》),希望大家共同学习,共同进步。

时间: 2024-08-10 21:21:06

javascript中apply()方法和call()方法有什么区别?的相关文章

线程中sleep方法和wait方法有什么区别?(转)

线程中sleep方法和wait方法有什么区别? 如果你没有接触过java的多线程,那么多对于这两个方法可能有点陌生,看名字好像这两个方法是差不多的,但是实际上面差别好大. 首先我们看一下官方的API Sleep(sleep有两个方法,另一个方法传递两个参数,还有一个参数也是时间,只不过是纳秒级别的,所以和这个方法几乎一样,所以这里只分析这个毫秒级别的方法) public static void sleep(long millis) throws InterruptedException 首先是个

JavaScript的apply()方法和call()方法

1 <script type="text/javascript"> 2 /*定义一个人类*/ 3 function Person(name,age) 4 { 5 this.name=name; 6 this.age=age; 7 } 8 /*定义一个学生类*/ 9 functionStudent(name,age,grade) 10 { 11 Person.apply(this,arguments); 12 this.grade=grade; 13 } 14 //创建一个学

Javascript中call方法和apply方法用法和区别

第一次在博客园上面写博客,知识因为看书的时候发现了一些有意思的知识,顺便查了一下资料,就发到博客上来了,希望对大家有点帮助. 连续几天阅读<javascript高级程序设计>这本书了,逐渐发现了以前很多自己完全没有用过甚至见过的神奇知识点.今天在阅读到有关函数的属性和方法的时候,略感高级,于是乎,查阅了不少他人的博客,在此总结一下这两个方法的以下几个方面: 1.call()和apply()的作用和用法 2.什么时候用apply(),什么时候用call() 书上提到,每个函数都包含两个非继承而来

JavaScript中的apply()方法和call()方法使用介绍

javascript中apply和call方法的作用及区别说明 call和apply的说明 call,apply都属于Function.prototype的一个方法,它是JavaScript引擎内在实现的,因为属于Function.prototype,所以每个Function对象实例(就是每个方法)都有call,apply属性.既然作为方法的属性,那它们的使用就当然是针对方法的了,这两个方法是容易混淆的,因为它们的作用一样,只是使用方式不同. 语法:foo.call(this, arg1,arg

jquery中prop()方法和attr()方法的区别

jquery1.6中新加了一个方法prop(),一直没用过它,官方解释只有一句话:获取在匹配的元素集中的第一个元素的属性值. 大家都知道有的浏览器只要写disabled,checked就可以了,而有的要写成disabled = "disabled",checked="checked",比如用attr("checked")获取checkbox的checked属性时选中的时候可以取到值,值为"checked"但没选中获取值就是un

java中paint方法和paintComponent方法的不同

/* 1.由Component.java源代码中可以看见其中的paint()方法体是空的,在Container中重写了该方法,其子类Window等也重写了该方法 2.由JComponent.java源代码中可以看见其中的paint()方法中调用paintComponent, paintChildren, paintBorder等方法: 所以该类中的paint方法会影响子组件的绘制, 而paintComponent方法只会影响该组件本身 3.paint方法 和 paintComponent方法都是

关于JavaScript中apply与call的用法意义及区别(转)

JavaScript中有一个call和apply方法,其作用基本相同,但也有略微的区别.先来看看JS手册中对call的解释: call 方法调用一个对象的一个方法,以另一个对象替换当前对象.call([thisObj[,arg1[, arg2[,   [,.argN]]]]])参数thisObj可选项.将被用作当前对象的对象.arg1, arg2,  , argN可选项.将被传递方法参数序列.说明call 方法可以用来代替另一个对象调用一个方法.call 方法可将一个函数的对象上下文从初始的上下

Thread类的sleep()方法和对象的wait()方法都可以让线程暂停执行,它们有什么区别? 线程的sleep()方法和yield()方法有什么区别?

Thread类的sleep()方法和对象的wait()方法都可以让线程暂停执行,它们有什么区别? sleep()方法(休眠)是线程类(Thread)的静态方法,调用此方法会让当前线程暂停执行指定的时间,将执行机会(CPU)让给其他线程,但是对象的锁依然保持,因此休眠时间结束后会自动恢复.wait()是Object类的方法,调用对象的wait()方法导致当前线程放弃对象的锁(线程暂停执行),进入对象的等待池(wait pool),只有调用对象的notify()方法(或notifyAll()方法)时

彻底理解了call()方法,apply()方法和bind()方法

javascript中的每一个作用域中都有一个this对象,它代表的是调用函数的对象.在全局作用域中,this代表的是全局对象(在web浏览器中指的是window).如果包含this的函数是一个对象的方法,this指向的就是这个对象.因此在上面例子中就不用直接写对象的名字,而是使用this代替它,例如: var human = { name: '霍林林', sayName: function(){ console.log(this.name); } } human.sayName(); 下面这个