javascript中类式继承和原型式继承的实现方法和区别

在所有面向对象的编程中,继承是一个重要的话题。一般说来,在设计类的时候,我们希望能减少重复性的代码,并且尽量弱化对象间的耦合(让一个类继承另一个类可能会导致二者产生强耦合)。关于“解耦”是程序设计中另一个重要的话题,本篇重点来看看在javascript如何实现继承。

其它的面向对象程序设计语言都是通过关键字来解决继承的问题(比如extend或inherit等方式)。但是javascript中并没有定义这种实现的机制,如果一个类需要继承另一个类,这个继承过程需要程序员自己通过编码来实现。

一、类式继承的实现

1、创建一个类的方式:

 1 //定义类的构造函数
 2 function Person(name) {
 3     this.name = name || ‘默认姓名‘;
 4 }
 5 //定义该类所有实例的公共方法
 6 Person.prototype.getName = function() {
 7     return this.name;
 8 }
 9
10 var smith = new Person(‘Smith‘);
11 var jacky = new Person(‘Jacky‘);
12
13 console.log( smith.getName(), jacky.getName() ); //Smith Jacky

2、继承这个类:这需要分两个步骤来实现,第1步是继承父类构造函数中定义的属性,第2步是继承父类的prototype属性

//定义类的构造函数
function Person(name) {
    this.name = name || ‘默认姓名‘;
}
//定义该类所有实例的公共方法
Person.prototype.getName = function() {
    return this.name;
}
function Author(name, books) {
    //继承父类构造函数中定义的属性
    //通过改变父类构造函数的执行上下文来继承
    Person.call(this, name);
    this.books = books;
}

//继承父类对应的方法
Author.prototype = new Person(); //Author.prototype.constructor === Person
Author.prototype.constructor = Author; //修正修改原型链时造成的constructor丢失
Author.prototype.getBooks = function() {
    return this.books;
};

//测试
var smith = new Person(‘Smith‘);
var jacky = new Author(‘Jacky‘, [‘BookA‘, ‘BookB‘]);

console.log(smith.getName()); //Smith
console.log(jacky.getName()); //Jacky
console.log(jacky.getBooks().join(‘, ‘)); //BookA, BookB
console.log(smith.getBooks().join(‘, ‘)); //Uncaught TypeError: smith.getBooks is not a function

从测试的结果中可以看出,Author正确继承了Person,而且修改Author的原型时,并不会对Person产生影响。这其中的关键一句就是 Author.prototype = new Person(),要与Author.prototype = Person.prototype区分开来。前者产生了一个实例,这个实例有Person.prototype的副本(这里先这么理解,后面有更详细的解析)。后者是指将两者的prototype指向同一个原型对象。

那么,这也意味着每次继承都将产生一个父类的副本,肯定对内存产生消耗,但为了类式继承这个内存开销必须得支付,但还可以做得更节省一点:Author.prototype = new Person()这一句其实多执行了构造函数一次(而这一次其实只需在子类构造函数中执行即可),尤其是在父类的构造函数很庞大时很耗时和内存。修改一下继承的方式,如下:

Author.prototype = (function() {
    function F() {}
    F.prototype = Person.prototype;
    return new F();
})();

如上所示的代码,new时,去掉了对父类的构造函数的调用,节省了一次调用的开销。

3、类式继承显著的特点每一次实例化对象时,子类都将执行一次父类的构造函数。如果E继承了D,D继承了C,C继承了B,B继承了A,在实例化一个E时,一共要经过几次构造函数的调用呢?

/*继承方法的函数*/
function extend(son, father) {
    function F() {}
    F.prototype = father.prototype;
    son.prototype = new F();
    son.prototype.constructor = son;
}
//A类
function A() {
    console.log(‘A()‘);
}
A.prototype.hello = function() {
    console.log(‘Hello, world.‘);
}
//B类
function B() {
    A.call(this);
    console.log(‘B()‘);
}
extend(B, A);
//C类
function C() {
    B.call(this);
    console.log(‘C()‘);
}
extend(C, B);
//D类
function D() {
    C.call(this);
    console.log(‘D()‘);
}
extend(D, C);
//E类
function E() {
    D.call(this);
    console.log(‘E()‘);
}
extend(E, D);

//创建一个E的实例
var e = new E(); //A() B() C() D() E()
e.hello(); //hello, world.

5次,这还只是实例化一个E时调用的次数。所以,我们应该尽可能的减少继承的级别。但这并不是说不要使用这种类式继承,而是应该根据自己的应用场合决定采用什么方法。

二、原型式继承

1、先来看一段代码:我们先将之前类式继承中的继承prototype那一段改成另一个函数clone,然后通过字面量创建一个Person,最后让Author变成Person的克隆体。

//这个函数可以理解为克隆一个对象
function clone(object) {
    function F() {}
    F.prototype = object;
    return new F();
}

var Person = {
    name: ‘Default Name‘;
    getName: function() {
        return this.name;
    }
}

//接下来让Author变为Person的克隆体
var Author = clone(Person);

问一个问题:clone函数里的new F()为这个实例开辟内存空间来存储object的副本了吗?

按我之前的理解,回答是肯定的。但是,当我继续将代码写下去的时候,奇怪的事情发生了,代码如下:

//接下来让Author变为Person的克隆体
var Author = clone(Person);
Author.books = [];
Author.getBooks = function() {
    return this.books.join(‘, ‘);
}

//增加一个作者Smith
var Smith = clone(Author);
console.log(Smith.getName(), Smith.getBooks()); //Default Name
Smith.name = ‘Smith‘;
Smith.books.push(‘<<Book A>>‘, ‘<<Book B>>‘); //作者写了两本书
console.log(Smith.getName(), Smith.getBooks()); //Smith <<Book A>>, <<Book B>>

//再增加一个作者Jacky
var Jacky = clone(Author);
console.log(Jacky.getName(), Jacky.getBooks()); // Default Name <<Book A>>, <<Book B>>

当我们继续增加作者Jacky时,奇怪的现象发生了!!Jacky的名字依然是Default Name,但是他居然也写两本与Smith一样的书?Jacky的书都还没push呢。到了这里,我想到了引用对象的情况(引用一个对象时,引用的是该对象的内存地址),发生这样的现象,问题肯定出在clone()函数中的new F()这里。

事实上,这个clone中的new F()确实返回了一个新的对象,该对象拥有被克隆对象的所有属性。但这些属性保留的是对被克隆对象中相应属性的引用,而非一个完全独立的属性副本。换句话说,新对象的属性被克隆的对象的属性指向同一个内存地址(学过C语言的同学应该明白指针类型,这里意义差不多)。

那么为什么上面的代码中,Jacky的书与Smith的书相同了,为什么Jacky的名字却不是Smith而是Default Name呢?这就是Javascript中继承的机制所在,当Smith刚刚继承自Author时,他的属性保留了对Author的属性的引用,一旦我们显示的对Smith的属性重新赋值时,Javascritp引擎就会给Smith的该属性重新划分内存空间来存储相应的值,由于重新划分了内址地址,那么对Smith.name的改写就不会影响到Author.name去了。这就很好的解释了前面的那个问题——为什么Jacky的名字却不是Smith而是Default Name。

2、基于原型继承

通过前面的情况分析,可以看出基于原型继承的方式更能节约内存(只有在需要时候才开辟新的内存空间)。但要注意:基于原型继承时,对象的属性一定要重新赋值后(重新划分内存)再去引用该属性。对于对象的方法,如果有不同的处理方式,我们只需重新定义即可。

下面将前一段代码做一个完整、正确的范例出来,以说明原型继承的特点和使用方式:

//这个函数可以理解为克隆一个对象
function clone(object) {
    function F() {}
    F.prototype = object;
    return new F();
}

var Person = {
    name: ‘Default Name‘,
    getName: function() {
        return this.name;
    }
}

//接下来让Author变为Person的克隆体
var Author = clone(Person);
Author.books = [];
Author.getBooks = function() {
    return this.books.join(‘, ‘);
}

//增加一个作者Smith
var Smith = clone(Author);
Smith.name = ‘Smith‘;
Smith.books = [];
Smith.books.push(‘<<Book A>>‘, ‘<<Book B>>‘); //作者写了两本书
console.log(Smith.getName(), Smith.getBooks()); //Smith <<Book A>>, <<Book B>>

//再增加一个作者Jacky
var Jacky = clone(Author);
Jacky.name = ‘Jacky‘;
Jacky.books = [];
Jacky.books.push(‘<<Book C>>‘, ‘<<Book D>>‘);
console.log(Jacky.getName(), Jacky.getBooks()); // Jacky <<Book C>>, <<Book D>>

三、类式继承与原型式继承的区别与相式之处

1、类式继承中:使用构造函数初始化对象的属性,通过调用父类的构造函数来继承这些属性。通过new 父类的prototype来继承方法。

2、原型式继承中:去掉了构造函数,但需要将对象的属性和方法写一个{}里申明。准确的说,原型式继承就是类式继承中继承父类的prototype方法。

时间: 2024-08-23 16:06:43

javascript中类式继承和原型式继承的实现方法和区别的相关文章

JavaScript之面向对象学九(原型式继承和寄生式继承)

一.原型式继承 该继承模式是由道格拉斯*克罗克福德在2006年提出的实现继承的方法. 模式的基本思路:借助原型可以基于已有的对象创建新的对象,同时还不必因此创建自定义类型. 代码如下: function object(o) { function F() { //定义一个F类型的对象 this.name="111"; } F.prototype=o;//使F的原型对象指向传入对象,也就是说F继承了传入的对象,也相当于用传入的对象重写了F的原型对象 相当于如下代码 /* F.prototy

JavaScript中的继承之原型式继承

原型式继承的思想是借用原型可以基于已有的对象创建新对象,同时还不比因此创建自定义类型. 为了达到这个目的,给出如下函数: function object(o){ function F(){} F.prototype = o; return new F(); } 在object()函数内部,先创建一个临时性的构造函数,将传入的对象作为这个构造函数的原型,最后返回这个函数的新实例.说白了,就是对传入的对象执行一个浅复制. function object(o){ function F(){} F.pr

组合继承 和 原型式继承、寄生组合式继承

//以下代码均摘自 Nicholas C.Zakas<Professional JavaScript for Web Developers> //组合继承实例代码: function SuperType(name) {     this.name = name;     this.colors = ["red", "blue", "green"]; } SuperType.prototype.sayName = function() 

JavaScript继承基础讲解,原型链、借用构造函数、混合模式、原型式继承、寄生式继承、寄生组合式继承

说好的讲解JavaScript继承,可是迟迟到现在讲解.废话不多说,直接进入正题. 既然你想了解继承,证明你对JavaScript面向对象已经有一定的了解,如还有什么不理解的可以参考<面向对象JS基础讲解,工厂模式.构造函数模式.原型模式.混合模式.动态原型模式>,接下来讲一般通过那些方法完成JavaScript的继承. 原型链 JavaScript中实现继承最简单的方式就是使用原型链,将子类型的原型指向父类型的实例即可,即“子类型.prototype = new 父类型();”,实现方法如下

JavaScript之原型式继承&amp;寄生式继承和寄生组合式继承以及优缺点

一.原型式继承 1.这种方法并没有使用严格意义上的构造函数,借助原型可以基于已有的对象创建新的对象 function object(o) { function F() {} F.prototype = o; return new F(); } // 在object()函数内部,先创建一个临时性的构造函数,然后将传入的对象作为这个构造函数原型,最后返回了这个临时类型的一个新实例. // object()本质上对其中传入的对象进行了一次浅复制 // 看如下的例子: var person = { na

[js高手之路]原型式继承与寄生式继承

一.原型式继承本质其实就是个浅拷贝,以一个对象为模板复制出新的对象 1 function object( o ){ 2 var G = function(){}; 3 G.prototype = o; 4 return new G(); 5 } 6 var obj = { 7 name : 'ghostwu', 8 age : 22, 9 show : function(){ 10 return this.name + ',' + this.age; 11 } 12 }; 13 var obj2

javascript原型式继承

之前的文章里有提到过javascript类式继承,那种继承方式极大的方便了其他语言(非javascript)程序员使用javascript来实现继承,但是有缺点,就是建立了一个非必要的构造函数,那这篇文章我们来谈一谈具有javascript自身特色的原型式继承. 我们先来看一看下面的代码: var Car = { color: 'red', size: 'big', getAttr: function() { return this.color } } var car1 = Object.cre

Javascript继承4:洁净的继承者----原型式继承

//原型式继承 function inheritObj(obj){ //声明一个过渡函数对象 function F(){} //过渡对象的原型继承父对象 F.prototype = obj; //返回过渡对象的一个实例,该实例的原型继承了父对象 return new F(); } /* * 这种方式是对类式继承的一个封装,所以类式继承中存在的缺点这里依然存在 */ var car = { id:1, color:['red'] } var car1 = inheritObj(car); car1

JavaScript ----------------- 原型式继承

思想:借助原型可以基于已有的对象创建新对象,同时还不必因此创建自定义类型.为了达到这个目的,看看下面的实现方式 1 function object(o){ 2 function F(){ 3 4 } 5 F.prototype=O; 6 return new F(); 7 }; 在上面的代码段中主要做了哪些事情尼? 创建了一个临时的构造函数,同时把传入参数作为临时构造函数的原型,最后返回一个临时构造函数的实例;从本质上来讲,object 对传入其中的对象执行了一次浅复制: 1 //看实例: fu