1. ECMAScript 实现继承的方式不止一种,这是因为 ECMAScript 的继承并不是明确规定的,而是通过模拟实现的。
2. 继承实现的两种方式:对象冒充和原型方式
3. 对象冒充
function ClassA(sColor){
this.color = sColor;
this.sayColor = function(){
alert(this.color);
}
}
function ClassB(sColor){
this.newMethod = ClassA;
this.newMethod(sColor);
delete this.newMethod;
}
原理:当调用 this.newMethod(sColor) 时,相当于调用 ClassA 的构造函数。在 ClassA 函数里面,通过 this 来对属性 color 和方法 sayColor 赋值。和 Java 一样,ECMAScript 的 this 保存时调用该方法的对象的引用,所以当在 ClassB 中通过 this.newMethod(sColor) 调用构造函数 ClassA 时,ClassA 中的 this 其实是新创建的 ClassB 的实例。于是新创建的 ClassB 的实例就拥有了 color 属性和 sayColor 方法。
注意,如果还有其它的属性和方法,必需在 delete this.newMethod 之后执行,否则会覆盖超类中相关的属性和方法。如:
function ClassB(sColor,sName){
this.newMethod = ClassA;
this.newMethod(sColor);
delete this.newMethod;
this.name = sName;
this.sayName = function(){
alert(this.name);
}
}
4. 通过 call 方法实现继承
其实,call 方式实现继承就是对象冒充,它们的实现原理是一样的。它的第一个参数用作函数的 this 对象,其它参数都直接传递给函数自身。示例:
function ClassB(sColor,sName){
//this.newMethod = ClassA;
//this.newMethod(sColor);
//delete this.newMethod;
ClassA.call(this,sColor);
this.name = sName;
this.sayName = function(){
alert(this.name);
}
}
5. 通过 apply 方法实现继承
原理与 call 方法相同,只不过 apply 只有两个参数,一个是用作 this 的对象,另一个是传递给函数的参数的数组。示例:
function ClassB(sColor,sName){
//this.newMethod = ClassA;
//this.newMethod(sColor);
//delete this.newMethod;
//ClassA.call(this,sColor);
ClassA.apply(this,new Array(sColor));
this.name = sName;
this.sayName = function(){
alert(this.name);
}
}
6. 原型链方式实现继承
function ClassA(){
}
ClassA.prototype.color = "red";
ClassA.sayHello = function(){
alert(this.color);
}
funciton ClassB(){
}
ClassB.prototype = new ClassA();
这就实现了继承。每当 ClassB 被实例化对象时,prototype 里的所有属性都被传递到新的实例中,当然包括 new ClassA();这种做法的弊端是,无法给构造函数传递初始化参数。于是,引出了混合方式的继承实现机制。
7. 混合方式
function ClassA(sColor){
this.color = sColor;
}
ClassA.prototype.sayColor = funciton(){
alert(this.color);
}
function ClassB(sName,sColor){
ClassA.call(sColor);
this.name = sName;
}
ClassB.prototype = new ClassA();
ClassB.prototype.sayName = function(){
alert(this.name);
}
定义对象的最好方式是用构造函数定义属性,用原型方式定义方法。这里实现继承机制也是相同的道理。
分享到:
相关推荐
在JavaScript中继承是一个非常复杂的话题,比其他任何面向对象的语言中的继承都复杂得多。在大多数其他面向对象语言中,继承一个类只需使用一个关键字即可。与它们不同,在JavaScript中要想达到传承公用成员的目的,...
JavaScript继承的三种方法实例 继承 继承: 首先继承是一种关系,类(class)与类之间的关系,JS中没有类,但是可以通过构造函数模拟类,然后通过原型来实现继承。 继承也是为了数据共享,js中的继承也是为了实现...
Javascript继承机制原理 可以参考下
JavaScript继承与多继承实例分析.docx
javascript继承之为什么要继承.docx
JavaScript继承机制研究.pdf
说好的讲解JavaScript继承,可是迟迟到现在讲解。废话不多说,直接进入正题。 既然你想了解继承,证明你对JavaScript面向对象已经有一定的了解,如还有什么不理解的可以参考《面向对象JS基础讲解,工厂模式、构造...
JavaScript继承机制探讨及其应用.pdf
Javascript继承[参考].pdf
详解Javascript继承的实现_.docx
javascript 继承派生等问题的资料,都是网上收集的,学会apply call 就懂js面向对象的原理了。
本文实例讲述了JavaScript继承与聚合。分享给大家供大家参考,具体如下: 一、继承 第一种方式:类与被继承类直接耦合度高 1. 首先,准备一个可以被继承的类(父类),例如 //创建一个人员类 function Person(name)...
javascript继承问题,不知道写的可不可以,就勉强看看呗
JavaScript面向对象编程中使用继承,详细讲解四种实现方法的原理。
正因为JavaScript本身没有完整的类和继承的实现,并且我们也看到通过手工实现的方式存在很多问题, 因此对于这个富有挑战性的任务网上已经有很多实现了
NULL 博文链接:https://snandy.iteye.com/blog/429140
javascript毫无疑问是面向对象的,可日常使用中,怎么实现类,对象,继承这种高级语言特性呢.看完这个文档就很清楚啦,很不错的东西,适合有一丁点Javascript基础的童鞋
学完了Javascript类和对象的创建之后,现在总结一下Javascript继承机制的实现。Javascript并不像Java那样对继承机制有严格明确的定义,它的实现方式正如它的变量的使用方式那样也是十分宽松的,你可以设计自己的方法...
然而,继承中所涉及的不仅仅是一个对象,并且 js 也没有继承这一现有的机制,那它如何实现的呢? 原型 在 JavaScript 中,每个构造函数都拥有一个prototype属性,它指向构造函数的原型对象,这个原型对象中有一个 ...
深入学习javascript继承之前,先了解下面的几个概念: 父类:被继承的类 子类:由继承得来的类 超类:也就是父类 抽象类:一般不用来实例化的类,它的用途是用来给其他类继承. 基类:提供给其他类可以继承的类 派生类:由基类...