我们在项目中经常使用call或者apply来继承某个类的实例属性和方法。但是你知道两者的却区别是什么吗?了解两者的区别,有助于你正确的选择使用call还是apply。
在javascript中call方法和apply方法调用产生的效果是一样的,只是语法(参数)不一样。
目录:
1、call和apply的区别,然后实例演示
2、call和apply的常用应用场合
3、call和apply不能继承原型的属性和方法
4、怎样继承原型的属性和方法
1、call和apply的区别,然后实例演示
call语法如下:
obj.call(要替换的执行环境,参数1, 参数2,……,参数n);
【实例】创建Person类,接收name和age两个参数及提供getName()和getAge()方法。然后创建一个Student对象从Person中继承name和age实例属性和方法。
// Person构造函数 function Person(name, age){ this.name = name; this.age = age; // 添加方法到原型 if (typeof Person.prototype.getName != "function") { Person.prototype.getName = function(){ return this.name; }; Person.prototype.getAge = function(){ return this.age; } } } // Student构造函数 function Student(name, stuNum, age, qq){ this.stuNum = stuNum; this.qq = qq; // 继承Person类的实例属性 Person.call(this, name, age); } var stu = new Student("administritor", "No.1001", 23, "1840554"); alert([stu.name, stu.age]); // 结果:administritor,23
apply语法如下:
object.apply(要替换的执行环境,[参数1, 参数2,……,参数n ]);
【实例】创建Person类,接收name和age两个参数及提供getName()和getAge()方法。然后创建一个Student对象从Person中继承name和age实例属性和方法。
// Person的构造函数 function Person(name, age){ this.name = name; this.age = age; // 添加方法到原型 if (typeof Person.prototype.getName != "function") { Person.prototype.getName = function(){ return this.name; }; Person.prototype.getAge = function(){ return this.age; } } } // Student的构造函数 function Student(name, stuNum, age, qq){ this.stuNum = stuNum; this.qq = qq; // 继承Person类的实例属性 Person.apply(this, [name, age]); } var stu = new Student("administritor", "No.1001", 23, "1840554"); alert([stu.name, stu.age]); // 结果:administritor,23
从上面实例可以看出,call和apply的主要区别是在指定调用object对象时传递构造参数的方式。call使用的类似java中的可变参数,即将构造参数一次排在“要替换的执行环境”后面。apply则使用一个数组将构造参数进行包装,然后传递。
2、call和apply的常用应用场合
【实例】如果Person对象的构造参数和Student对象的构造参数完全一样(包括顺序)。此时,我们应该选择call还是apply呢?由于apply接收一个数组、Person和Student的构造参数一样且arguments也是一个数组。则,我们可以直接用:object.apply(this, arguments);就可进行继承。但是有人说,call也可以啊。我直接将参数依次写在object.call(this, arg1, arg2,...,argn)。如果Person和Student的参数有n个,则你需要写多少呢,你能保证你不会把顺序写错,你觉得代码可读性好吗?因此,如果被继承和继承的构造函数一样(包括参数顺序),则推荐使用apply方式。
// Person构造函数 function Person(name, age){ this.name = name; this.age = age; // 添加方法到原型 if (typeof Person.prototype.getName != "function") { Person.prototype.getName = function(){ return this.name; }; Person.prototype.getAge = function(){ return this.age; } } } // Student构造函数 function Student(name, age){ // Person.apply(this, [name, age]); // 同上 Person.apply(this, arguments); if (typeof Student.prototype.setName != "function") { Student.prototype.setName = function(name){ this.name = name; }; Student.prototype.setAge = function(age){ this.age = age; }; } } // 测试 var stu = new Student("administritor", 23); alert([stu.name, stu.age]); stu.setName("operation"); stu.setAge(41); alert([stu.name, stu.age]);
如果Person和Student的参数不一样,则两种方式你就选择你自己喜欢的方式。
// Person构造函数 function Person(name, age){ this.name = name; this.age = age; } // 方式一: function Student(name, sex, age, email){ this.sex = sex; this.email = email; Person.call(this, naem, age); } 方式二: function Student(name, sex, age, email){ this.sex = sex; this.email = email; Person.apply(this, [name, age]); }
相关推荐
JavaScript中call与apply方法
call与apply区别 详细解读
07-call、apply、bind三者的异同
理解JavaScript的caller callee call apply
本文实例分析了JavaScript中call和apply方法的区别。分享给大家供大家参考,具体如下: 这两个方法不经常用,但是在某些特殊场合中是非常有用的,下面主要说下它们的区别: 1、首先,JavaScript是一门面向对象的语言...
NULL 博文链接:https://ufoqhmdt.iteye.com/blog/1676748
一、call和apply的说明 1、call,apply都属于Function.prototype的一个方法,它是JavaScript引擎内在实现的,因为属于Function.prototype,所以每个Function对象实例(就是每个方法)都有call,apply属性。既然作为...
JavaScript中通过call或者apply用来代替另一个对象调用一个方法,将一个函数的对象上下文从初始的上下文改变为由 thisObj 指定的新对象
js中call,apply,setCapture,releaseCapture的使用.pdf
我们可以将call和apply看做是某个对象的方法,通过调用方法的形式来间接调用函数
JS 中没有诸如 Java、C#等高级语言中的 extend 关键字,因此 JS 中没有继承的概念,如果一定要继承的话,call 和 apply 可以实现这个功
javascript callApply代码示例
在 javascript 中,call 和 apply 都是为了改变某个函数运行时的上下文(context)而存在的,一般来说,this总是指向调用某个方法的对象,但是使用call()和apply()方法时,就会改变this的指向 语法: apply() 接收两...
总结 1、相同点 2、区别 call() 方法 /* 正常模式 */ let obj = { sum(a, b) { console.log(this) return a + b } } // 执行 sum 函数的 apply、bind 方法,打印的 this 同下 obj.sum.call() // 打印...
好了,不给大家唠嗑了,言归正传吧,先给大家讲下apply和call方法的定义。 具体内容如下所示: 1、方法定义 call, apply都属于Function.prototype的一个方法,它是JavaScript引擎内在实现的,因为属于Function....
两个方法基本区别在于传参不同。 call(obj,arg1,arg2,arg3);call第一个参数传对象,可以是null。参数以逗号分开进行传值,参数可以是任何类型。 apply(obj,[arg1,arg2,arg3]);apply第一个参数传对象,参数可以是数组...
本文主要Javascript中call,apply,bind方法的进行全面分析,并在文章结尾对call,apply,bind方法的联系和区别做了总结,具有很好的参考价值,需要的朋友一起来看下吧
在JavaScript 中,this的指向是动态变化的,很可能在写程序的过程中,无意中破坏掉this的指向,所以我们需要一种可以把this的含义固定的技术,于是就有了call,apply 和bind这三个方法,来改变函数体内部 this 的...
淡淡简单描述javascript中方法apply和call