本文介绍JavaScript原型式继承的实现原理,源自Douglas Crockford提出的object()函数。该方法通过临时构造函数共享父对象引用属性,导致实例间属性共享。ES5引入Object.create()规范化此过程,支持定义额外属性,是理解原型继承的关键。
本文详细解析JavaScript中基于原型的继承实现机制,通过具体代码示例展示其工作原理,为开发者提供实用的参考与学习价值。
原型式继承的起源与原理
2006年,Douglas Crockford发表文章《JavaScript中的原型式继承》,提出一种无需创建自定义类型即可基于已有对象创建新对象的继承思路。其核心在于利用原型链实现对象复用,并给出了相应的函数实现代码。
function object(o){
function F(){};
F.prototype = o;
return new F();
}
具体实现逻辑如下:
object()函数实现与引用共享问题
//在object()函数的内部,先创建了一个临时性的构造函数,然后将传入的对象作为这个构造函数的原型,最后返回了这个临时类型的一个新实例
var person = {
name:"Nick",
friends:["xiaowang","xiaochen"]
};
var person1 = object(person);
person1.name = "Mike";
person1.friends.push("xiaozhang");
var person2 = object(person);
person2.name = "lifei";
person2.friends.push("xiaoli");
console.log("person1:" + person1.name);
console.log("person2:" + person2.name)
console.log("person1 friends:" + person1.friends);
console.log("person2 friends:" + person2.friends);
console.log("all friends:" + person.friends);
执行上述代码后的输出结果如下:

观察发现,该模式与原型链继承极为相似。无论创建多少个实例,父类中的引用类型属性(如数组)均被所有实例共享。正因这种通过原型共享引用值的特性,该模式被称为原型式继承,其名称与原型链仅一字之差。
ES5 Object.create()规范化继承
ES5标准引入了Object.create()方法,对原型式继承进行了规范化。该方法接收两个参数:第一个参数指定新对象的原型对象,第二个可选参数用于定义新对象的额外属性。当仅传入一个参数时,其功能与前述object()函数完全一致。