JS继承模式

最新推荐文章于 2025-08-12 10:15:52 发布

原创最新推荐文章于 2025-08-12 10:15:52 发布 · 189 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#JS基础

JS 专栏收录该内容

12 篇文章

订阅专栏

JS继承模式

继承发展史

1 传统模式 -->原型链

过多继承了没用属性

Grand.prototype.lastNmae= 'Wang';
function Grand() {

}
var grand = new Grand();

Father.prototype = grand;
function  Father() {

}
var father  =  new Father();

Son.prototype = father;
function  Son() {

}

2 借用构造函数

不能继承借用构造函数的原型

每次构造函数都要多走一个函数

function Person(name,age,sex) {
    this.name = name;
    this.age = age;
    this.sex = sex;
}
function Stuendt(name,age,sex,grade) {
    Person.call(this,name,age,sex);
    this.grade = grade;
}
var student = new Stuendt("j",23,'male',2017);

3共享原型

不能随便改动自己的原型

Father.prototype.lastName = 'Wang';
function Father() {

}
function Son()  {

}
Son.prototype = Father.prototype;
var son = new Son();
var father  = new Father();

优化以上代码

Father.prototype.lastName = 'Wang';
function Father() {

}
function Son()  {

}

function inherit(Target,Origin) {
    Target.prototype = Origin.prototype;

}
inherit(Son,Father);
var son = new Son();
var father  = new Father();

但是这里如果son 要加一个属性则会影响father

eg：

Father.prototype.lastName = 'Wang';
function Father() {

}
function Son()  {

}

function inherit(Target,Origin) {
    Target.prototype = Origin.prototype;

}
inherit(Son,Father);
Son.prototype.sex = "male";
var son = new Son();
var father  = new Father();

很明显改动son后father的原型也发生了改变。

4圣杯模式

Father.prototype.lastName = 'Wang';
function Father() {

}
function Son()  {

}

function inherit(Target,Origin) {
    function F(){}
    F.prototype = Origin.prototype;
    Target.prototype = new F();

}
inherit(Son,Father);
Son.prototype.sex = "male";
var son = new Son();
var father  = new Father();

但是这里还存在一个问题：

son._proto_ --> new F()._proto_ --> Father.proto

所以为了让 son的constructor变为自己的，所以继续优化得：

Father.prototype.lastName = 'Wang';
function Father() {

}
function Son()  {

}

function inherit(Target,Origin) {
    function F(){}
    F.prototype = Origin.prototype;
    Target.prototype = new F();
    Target.prototype.constructor =  Target;

}
inherit(Son,Father);
Son.prototype.sex = "male";
var son = new Son();
var father  = new Father();

这就是为了让son 的构造函数变为自己的

Target.prototype.constructor = Target;

这里为了能够让son知道自己继承自谁所以以上程序可以继续优化得：

Father.prototype.lastName = 'Wang';
function Father() {

}
function Son()  {

}

function inherit(Target,Origin) {
    function F(){}
    F.prototype = Origin.prototype;
    Target.prototype = new F();
    Target.prototype.constructor =  Target;
    Target.prototype.uber = Origin.prototype;
}
inherit(Son,Father);
Son.prototype.sex = "male";
var son = new Son();
var father  = new Father();