JavaScript原型式继承与寄生式继承详解

作者:闭包旅人

时间:2026-10-23

浏览:490

本文详解JavaScript中的原型式继承与寄生式继承。原型式继承本质为浅拷贝,通过临时构造函数复用原型对象,但引用类型属性会在实例间共享。ES5引入的Object.create()实现了相同功能。寄生式继承在此基础上封装并扩展新方法,适用于需要增强对象能力的场景。

文章目录

原型式继承原理

原型式继承的核心机制实际上是一种浅拷贝操作,其目的是基于一个现有的对象模板来生成新的对象。


function object( o ){
      var G = function(){};
      G.prototype = o;
      return new G();
    }
    var obj = {
      name : 'ghostwu',
      age : 22,
      show : function(){
        return this.name + ',' + this.age;
      }
    };
    var obj2 = object( obj );
    console.log( obj2.name, obj.age, obj.show() );

在自定义的object函数实现中,以传入的对象o作为模板,在函数内部定义一个空的构造函数G。

将该构造函数的prototype属性指向模板对象o,随后返回该构造函数的一个实例。通过这种方式,新实例能够访问到模板对象o的所有属性和方法。

由于原型式继承属于浅拷贝,因此当属性值为引用类型(如数组或对象)时,这些引用会在不同的实例之间共享。

引用类型共享问题


function object( o ){
      var G = function(){};
      G.prototype = o;
      return new G();
    }
    var obj = {
      skills : [ 'php', 'javascript' ]
    };
    var obj2 = object( obj );
    obj2.skills.push( 'python' );
    var obj3 = object( obj );
    console.log( obj3.skills ); //php,javascript,python

如果某个实例(如obj2)修改了共享的skills数组,其他通过相同模板创建的实例(如obj3)访问该属性时,也会看到被修改后的结果。

在ES5标准中,语言原生提供了Object.create()方法,它直接实现了原型式继承的功能。

ES5 Object.create实现


var obj = {
      skills : [ 'php', 'javascript' ]
    };
    var obj2 = Object.create( obj );
    obj2.skills.push( 'python' );
    var obj3 = Object.create( obj );
    console.log( obj3.skills ); //php,javascript,python

寄生式继承是对原型式继承的进一步封装。它在调用原型式继承函数创建对象后,向该对象添加新的方法或属性,最后返回增强后的新对象。

寄生式继承实现


function object( o ){
      var G = function(){};
      G.prototype = o;
      return new G();
    }
    function CreateObj( srcObj ){
      var dstObj = object( srcObj );
      dstObj.sayName = function(){
        return this.userName;
      }
      return dstObj;
    }
    var obj = {
      userName : 'ghostwu',
    };
    var obj2 = CreateObj( obj );
    console.log( obj2.sayName() ); //ghostwu

以上内容涵盖了原型式继承与寄生式继承的核心原理及实现方式,供开发者参考。

实用工具推荐

电子包浆

绿化、压缩、噪点和虚拟水印,自由调节做旧程度。

使用 ›
图片压缩

选择画质和输出格式,预览压缩前后的大小。

使用 ›
相关文章