javascript 原型模式的工作原理到对象模式的探寻（中）

本文深入探讨了JavaScript中实现继承的多种方式，包括原型链、构造函数和组合继承等，并分析了各自的优缺点。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

谈到Javascript面向对象，有几个非常重要的知识点：

创建对象的模式
原型与原型链
继承方式

上篇文章主要记录了Javascript 创建对象的常用模式和原型的概念。这篇将学习 Javascript 原型链和继承方式。
继承是面向对象语言中非常重要的一个概念，在ECMAScript中，继承是主要通过原型链来实现的。
简单点来说，就是让一个sub prototype对象包含一个指向其super prototype(或parent prototype)对象的指针。
实例化 sub prototype 后的到的 Instance ，当我们访问其中的某个属性或者方法时，会经历以下流程：搜索Instance->搜索sub prototype->搜索super prototype。这样原型与原型之间会产生一个链状的关系，我们可以通过原型链来访问到其他原型对象的属性，也就是继承了其他原型对象。如下一段代码：

function SuperType(){}
SuperType.prototype.getSuper = function(){
    console.log("super");
};
function SubType(){}
SubType.prototype = new SuperType();
SubType.prototype.getSub = function(){
    console.log("sub");
};
var instance = new SubType();
instance.getSub();
instance.getSuper();
//"sub"
//"super"

原型链继承关系

在这段代码中，有几个值得注意的点：

创建原型时，都没有使用对象字面量的方式。上一篇文章提到过的，使用对象字面量创建的时候会将原型链重写。
Instance的 constructor 在这里是指向SuperType的。

原型链会导致的问题也很明显：包含引用类型的原型属性会被所有实例共享；创建子类型时，向父类的构造函数中传参会影响到其他继承该父类的子类型。
于是和创建对象一样，借助构造函数继承的方式也随即出现，原理很简单，就是在SubType 的作用域下执行SuperType构造函数。这样，SubTyper就继承了SuperType 的所有属性，当然这是进行了一次copy，在内存空间上必定会有一些浪费。

function SuperType(name){
    this.name = name;
}
function SubType(){
    SuperType.call(this,"Nick");
}
var instance = new SubType();
console.log(instance.name);
// "Nick"

所有最终的合适的解决方案还是组合两者的继承。

function SuperType(name){
    this.name = name;
    this.colors = ["r","b"];
}
SuperType.prototype.sayName = function(){
    cosole.log(this.name);
};
function SubType(name,age){
    SuperType.call(this,name);
    this.age = age;
}
SubType.prototype = new SuperType();
SubType.prototype.constructor = SubType;
SubType.prototype.sayAge = function(){
    cosole.log(this.age);
}
var instance1 = new SubType("Nick",44);
var instance2 = new SubType("LDT",22);
instance1.push("y");
instance1.sayName();
instance2.sayName();
instance1.sayAge();
instance2.sayAge();
console.log(instance1.colors);
console.log(instance2.colors);
/***
"Nick"
"LDT"
44
22
"r,b,y"
"r,b,"
***/