JavaScript原型式继承与寄生式继承详解
本文详解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
以上内容涵盖了原型式继承与寄生式继承的核心原理及实现方式,供开发者参考。
怎么用 Promise 封装 JavaScript sleep 函数实现异步延时
2026-11-05 17:49:14
什么时候该用JS构造器:与工厂模式、字面量的选择对比
2026-11-05 16:18:22
推荐几款轻量级JS照片墙开源库及对比
2026-11-05 15:56:19
JavaScript递归写法有哪些常见陷阱及避免方法
2026-11-05 14:53:38
JS数组浅拷贝与深拷贝怎么选?场景与方法总结
2026-11-05 14:41:02
