JavaScript原型链以及ES3、ES5、ES6实现继承的不同方式

最新推荐文章于 2023-03-17 13:07:17 发布
最新推荐文章于 2023-03-17 13:07:17 发布
阅读量7.9k 收藏 14
点赞数 3
分类专栏： Web 文章标签： JavaScript 原型链 继承 class ES6
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/iispring/article/details/62219444
版权

本文首发于GitHub，《JavaScript原型链以及ES3、ES5、ES6实现继承的不同方式》，欢迎关注我的GitHub。

原型

执行代码var o = new Object();，此时o对象内部会存储一个指针，这个指针指向了Object.prototype，当执行o.toString()等方法（或访问其他属性）时，o会首先查看自身有没有该方法或属性，如果没有的话就沿着内部存储的指针找到Object.prototype对象，然后查看Object.prototype对象是否有对应名称的方法或属性，如果有就调用Object.prototype的方法或属性。我们把这个指针叫做o对象的原型，你可以把它看做是Java类继承中的super关键字。

ES3规范中定义了Object.prototype.isPrototypeOf()方法，该方法可以判断某个对象是不是另一个对象的原型。Object.prototype.isPrototypeOf(o)返回true值可以确定Object.prototype就是o对象的原型。在ES3规范中，不能直接读取o对象的原型，也就是o对象的原型看不见摸不着的。ES5.1规范定义了Object.getPrototypeOf()方法，通过该方法可以获取对象的原型。我们可以通过Object.getPrototypeOf(o) === Object.prototype再次验证Object.prototype就是o对象的原型。ES6规范更加直接，为对象添加了一个__proto__属性，通过这个属性就可以获得对象的原型，所以在支持__proto__的浏览器中，o.__proto__ === Object.prototype也会返回true。

当我们执行var x = new X();时，浏览器会执行x.__proto__ = X.prototype，会将实例化对象的原型设置为对应的类的prototype对象，这一点很重要。

原型链

我们执行如下代码：

function Person(){};
var p = new Person();

p.__proto__指向了Person.prototype，Person.prototype的原型是Person.prototype.__proto__，其指向了Object.prototype，Object.prototype.__proto__为null。

通过__proto__向上追踪形成了如下的链式结构：

p -> Person.prototype -> Object.prototype -> null

这一原型的链式结构就叫做原型链。Object.prototype的原型是null，也就是说Object.prototype没有原型。

JavaScript 对象有一个指向一个原型对象的链。当试图访问一个对象的属性时，它不仅仅在该对象上搜寻，还会搜寻该对象的原型，以及该对象的原型的原型，依此层层向上搜索，直到找到一个名字匹配的属性或到达原型链的末尾。

JavaScript中的继承是通过原型实现的，虽然在ES6中引入了class关键字，但是它只是原型的语法糖，JavaScript继承仍然是基于原型实现的。

ES3实现继承

在JavaScript中，所谓的类就是函数，函数就是类。一般情况下，我们在函数的prototype上面定义方法，因为这样所有类的实例都可以共用这些方法；在函数内部（构造函数）中初始化属性，这样所有类的实例的属性都是相互隔离的。

我们定义ClassA和ClassB两个类，想让ClassB继承自ClassA。

ClassA代码如下所示：

function ClassA(name, age) {
    this.name = name;
    this.age = age;
}

ClassA.prototype.sayName = function () {
    console.log(this.name);
};

ClassA.prototype.sayAge = function () {
    console.log(this.age);
};

ClassA构造函数内部定义了name和age两个属性，并且在其原型上定义了sayName和sayAage两个方法。

ClassB如下所示：

function ClassB(name, age, job) {
    ClassA.apply(this, [name, age]);
    this.job = job;
}

ClassB新增了job属性，我们在其构造函数中执行ClassA.apply(this, [name, age]);，相当于在Java类的构造函数中通过super()调用父类的构造函数以初始化相关属性。

此时我们可以通过var b = new ClassB("sunqun", 28, "developer");进行实例化，并可以访问b.name、b.age、b.job三个属性，但此时b还不能访问ClassA中定义的sayName和sayAage两个方法。

然后我们新增代码ClassB.prototype = ClassA.prototype;，此时ClassB的代码如下所示：

function ClassB(name, age, job) {
    ClassA.apply(this, [name, age]);
    this.job = job;
}
//新增
ClassB.prototype = ClassA.prototype;

当执行var b = new ClassB("sunqun", 28, "developer");时，b.__proto__指向的是ClassB.prototype，由于通过新增的代码已经将ClassB.prototype指向了ClassA.prototype，所以此时b.__proto__指向了ClassA.prototype。这样当执行b.sayName()时，会执行b.__proto__.sayName()，即最终执行了ClassA.prototype.sayName()，这样ClassB的实例就能调用ClassA中方法了。

此时我们想为ClassB新增加一个sayJob方法用于输出job属性的值，如下所示：

function ClassB(name, age, job) {
    ClassA.apply(this, [name, age]);
    this.job = job;
}
ClassB.prototype = ClassA.prototype;
//新增
ClassB.prototype.sayJob = function(){
    console.log(this.job);
};

此时问题出现了，我们为ClassB.prototype添加sayJob方法时，其实修改了ClassA.prototype，这样会导致ClassA所有的实例也都有了sayJob方法，这显然不是我们期望的。

为了解决这个问题，我们再次修改ClassB的代码，如下所示：

function ClassB(name, age, job) {
    ClassA.apply(this, [name, age]);
    this.job = job;
}
// ClassB.prototype = ClassA.prototype;
//修改
ClassB.prototype = new ClassA();
ClassB.prototype.constructor = ClassB;
ClassB.prototype.sayJob = function(){
    console.log(this.job);
};

我们通过执行ClassB.prototype = new ClassA();将ClassA实例化的对象作为ClassB的prototype，这样ClassB仍然能够使用ClassA中定义的方法，但是ClassB.prototype已经和ClassA.prototype完全隔离了。我们的目的达到了，我们可以随意向ClassB.prototype添加我们想要的方法了。有个细节需要注意，ClassB.prototype = new ClassA();会导致ClassB.prototype.constructor指向ClassA的实例化对象，为此我们通过ClassB.prototype.constructor = ClassB;解决这个问题。

一切貌似完美的解决了，但是这种实现还是存在隐患。我们在执行ClassB.prototype = new ClassA();的时候，给ClassA传递的是空参数，但是ClassA的构造函数默认参数是有值的，可能会在构造函数中对传入的参数进行各种处理，传递空参数很有可能导致报错（当然本示例中的ClassA不会）。于是我们再次修改ClassB的代码如下所示：

function ClassB(name, age, job) {
    ClassA.apply(this, [name, age]);
    this.job = job;
}
//修改
function ClassMiddle() {

}
ClassMiddle.prototype = ClassA.prototype;
ClassB.prototype = new ClassMiddle();
ClassB.prototype.constructor = ClassB;
ClassB.prototype.sayJob = function () {
    console.log(this.job);
};

这次我们引入了一个不需要形参的函数ClassMiddle作为ClassB和ClassA之间的中间桥梁。

  1. ClassMiddle.prototype = ClassA.prototype;： 将ClassMiddle.prototype指向ClassA.prototype，这样ClassMiddle可以访问ClassA中定义的方法。
  2. ClassB.prototype = new ClassMiddle();： 将ClassMiddle的实例化对象赋值给ClassB.prototype，这样就相当于执行了ClassB.prototype.__proto__ = ClassMiddle.prototype;，所以ClassB就能使用ClassMiddle中定义的方法，又因为ClassMiddle.prototype指向了ClassA.prototype，所以ClassB.prototype.__proto__也指向了ClassA.prototype，这样ClassB能使用ClassA中定义的方法。

以上思路的精妙之处在于ClassMiddle是无参的，它起到了ClassB和ClassA之间的中间桥梁的作用。

现在我们为ClassA添加一些静态属性和方法，ClassA新增如下代码：

...

//为ClassA添加静态属性
ClassA.staticValue = "static value";

//为ClassA添加静态方法
ClassA.getStaticValue = function() {
    return ClassA.staticValue;
};
ClassA.setStaticValue = function(value) {
    ClassA.staticValue = value;
};

静态属性和方法不属于某一个实例，而是属于类本身。ClassA.prototype上面定义的方法是实例方法，不是静态的。静态属性和方法是直接添加在ClassA上的。

为了使ClassB也能继承ClassA的静态属性和方法，我们需要为ClassB添加如下代码：

...

//ClassB继承ClassA的静态属性和方法
for (var p in ClassA) {
    if (ClassA.hasOwnProperty(p)) {
        ClassB[p] = ClassA[p];
    }
}

我们最终可以将上述继承代码的公共部分抽离成一个extendsClass方法，如下所示：

function extendsClass(Child, Father) {
    //继承父类prototype中定义的实例属性和方法
    function ClassMiddle() {

    }
    ClassMiddle.prototype = Father.prototype;
    Child.prototype = new ClassMiddle();
    Child.prototype.constructor = Child;

    //继承父类的静态属性和方法
    for (var p in Father) {
        if (Father.hasOwnProperty(p)) {
            Child[p] = Father[p];
        }
    }
}

我们只需要执行extendsClass(ClassB, ClassA);就可以完成大部分继承的逻辑。

最终ClassA的完整代码如下所示：

function ClassA(name, age) {
    this.name = name;
    this.age = age;
}

ClassA.prototype.sayName = function() {
    console.log(this.name);
};

ClassA.prototype.sayAge = function() {
    console.log(this.age);
};

ClassA.staticValue = "static value";

ClassA.getStaticValue = function() {
    return ClassA.staticValue;
};

ClassA.setStaticValue = function(value) {
    ClassA.staticValue = value;
};

ClassB的完整代码如下所示：

function ClassB(name, age, job) {
    ClassA.apply(this, [name, age]);
    this.job = job;
}

extendsClass(ClassB, ClassA);

ClassB.prototype.sayJob = function() {
    console.log(this.job);
};

我们可以在控制台中进行一下简单测试：

这里写图片描述

ES5实现继承

ES5.1规范中新增了Object.create()方法，该方法会传入一个对象，然后会返回一个对象，返回的对象的原型指向传入的对象，比如执行代码var output = Object.create(input)，相当于执行代码output.__proto__ = input;，output的原型是input。我们可以简化之前的代码，不再需要ClassMiddle，只需要执行ClassB.prototype = Object.create(ClassA.prototype);即可，相当于执行代码ClassB.prototype.__proto__ = ClassA.prototype;。

而且ES5.1中新增了Object.keys()方法用以获取对象自身的属性数组，我们可以用该方法简化继承父类静态属性和方法的过程。

根据以上两点，我们修改extendsClass方法如下所示：

function extendsClass(Child, Father) {
    //继承父类prototype中定义的实例属性和方法
    Child.prototype = Object.create(Father.prototype);
    Child.prototype.constructor = Child;

    //继承父类的静态属性和方法
    Object.keys(Father).forEach(function(key) {
        Child[key] = Father[key];
    });
}

ClassA和ClassB的代码无需变化。

ES6实现继承

我们之前提到，ES6规范定义了Object.prototype.__proto__属性，该属性既可读又可写，通过__proto__属性我们可以直接指定对象的原型。于是在ES6中我们将extendsClass修改为如下所示：

function extendsClass(Child, Father) {
    //继承父类prototype中定义的实例属性和方法
    Child.prototype.__proto__ = Father.prototype;//暴力直接，利用__proto__属性设置对象的原型

    //继承父类的静态属性和方法
    Child.__proto__ = Father;
}

直接修改对象的__proto__属性值不是最佳选择，ES6规范中还定义了Object.setPrototypeOf()方法，通过执行Object.setPrototypeOf(b, a)会将a对象作为b对象的原型，即相当于执行了b.__proto__ = a;。为此我们利用该方法再次精简我们的extendsClass方法，如下所示：

function extendsClass(Child, Father) {
    //继承父类prototype中定义的实例属性和方法
    Object.setPrototypeOf(Child.prototype, Father.prototype);

    //继承父类的静态属性和方法
    Object.setPrototypeOf(Child, Father);
}

  1. Object.setPrototypeOf(Child.prototype, Father.prototype);相当于执行代码Child.prototype.__proto__ = Father.prototype;，使得Child能够继承Father中的实例属性和方法。

  2. Object.setPrototypeOf(Child, Father);相当于执行代码Child.__proto__ = Father;，使得Child能够继承Father中的静态属性和方法。

ES6中引入了class关键字，可以用class直接定义类，通过extends关键字实现类的继承，还可以通过static关键字定义类的静态方法。

我们用class等关键字重新实现ClassA和ClassB的代码，如下所示：

class ClassA{
    constructor(name, age){
        this.name = name;
        this.age = age;
    }

    sayName(){
        console.log(this.name);
    }

    sayAge(){
        console.log(this.age);
    }

    static getStaticValue(){
        return ClassA.staticValue;
    }

    static setStaticValue(value){
        ClassA.staticValue = value;
    }
}

ClassA.staticValue = "static value";

class ClassB extends ClassA{
    constructor(name, age, job){
        super(name, age);
        this.job = job;
    }

    sayJob(){
        console.log(this.job);
    }
}

ES6中不能通过static定义类的静态属性，我们可以直接通过ClassA.staticValue = "static value";定义类的静态属性。

需要注意的是，class关键字只是原型的语法糖，JavaScript继承仍然是基于原型实现的。

并不是所有的浏览器都支持class关键字，在生产环境中，我们可以编写ES6的代码，然后用Babel或TypeScript将其编译为ES5等主流浏览器支持的语法格式。

总结

  1. 执行var x = new X();时，浏览器会执行x.__proto__ = X.prototype，会将实例化对象的原型设置为对应的类的prototype对象。

  2. 实现类继承的关键是Child.prototype.__proto__ = Father.prototype;，这样会将Father.prototype作为Child.prototype的原型。Object.prototype.__proto__属性是在ES6规范中所引入的，在ES3和ES5中为了实现继承需要通过各种方式间接实现对Object.prototype.__proto__进行赋值。

  3. 通过执行Child.__proto__ = Father;可以实现继承父类的静态属性和方法。

参考

[1] MDN, ES3 Object.prototype.isPrototypeOf()

[2] MDN, ES5.1 Object.create()

[3] MDN, ES5.1 Object.getPrototypeOf()

[4] MDN, ES6 Object.setPrototypeOf()

[5] MDN, ES6 Object.prototype__proto__

[6] MDN, ES6 Classes

孙群
关注
  • 3
    点赞
  • 踩
  • 14
    收藏
    觉得还不错? 一键收藏
  • 5
    评论
专栏目录
es6-computed-properties:ES6 计算属性编译为 ES5ES3
07-03
编译使用 ES6 计算属性编写的 JavaScript 以使用 ES5 或 ES3 兼容语法。 例如，这个： var propName = 'code' ; var params = { [ propName ] : true [ 'data' + propName . toUpperCase ( ) ] : true } ; ...
ES5如何实现继承
冰的博客
07-25 505
这是因为name是基本数据类型，如果属性是基本数据类型而不是引用类型，原型链继承就不存在共享属性问题，每个实例都会拥有独立的副本，也就是说m1.name = ‘m1’这句代码，会在当前m1的对象上新增一个name属性，然后赋值为’m1’,并不会影响到它原型上面的name属性，当打印m2.name的时候，因为m2本身没有name属性，那它就会去它的原型对象上去找这个属性，在这个例子中，也就是父类的name（‘kitty’）。原型链继承只能继承一个父类的属性和方法，无法同时继承多个父类，这限制了它的灵活性。
JavaScript上下文对象详细解析,ES3与ES6
sxcsdsg的博客
03-17 347
JavaScript执行环境详细解析,VO对象、scope、this
JavaScript es6 五种常见继承方式
m0_51622088的博客
10-09 2117
原型继承、构造函数继承、组合继承、寄生组合继承、class继承
ES6——class类实现继承
热门推荐
qq_49002903的博客
08-01 3万+
上面示例代码中子类中有两句重复的逻辑语句，在父类中我们已经声明过了，在子类中再写一次就冗余了，让我们接下来看看有没有什么好的解决办法。这就是上面的代码冗余的问题解决办法可以将name和age写到super参数中就可以直接继承父类的逻辑，减少冗余代码。注意在子类（派生类）的构造函数中使用this或者返回默认对象之前，必须先通过super调用父类的构造函数！子类继承父类之后，子类中也可以直接调用父类的方法（最上方示例代码中有涉及这里就不再做展示了）。中，以创建一个类，该类是另一个类的子类。...
JS：原型-原型链-ES5继承
老司机的后备箱
09-27 432
整理了一套《前端大厂面试宝典》，包含了HTML、CSS、JavaScript、HTTP、TCP协议、浏览器、VUE、React、数据结构和算法，一共201道面试题，并对每个问题作出了回答和解析。有需要的小伙伴，可以点击文末卡片领取这份文档，无偿分享部分文档展示：文章篇幅有限，后面的内容就不一一展示了有需要的小伙伴，可以点下方卡片免费领取。
future-js-fixing-the-annoying-parts:关于 ES6 的演示，展示了 ES3ES5 中让我们烦恼的 JavaScript 部分以及它们如何在新版本的语言中修复
07-02
未来 js 修复烦人的部分 关于 ES6 的演示文稿，向我们展示了在 ES3/ES5 中让我们烦恼的 JavaScript 部分，以及它们如何在该语言的较新版本中得到修复。 2014 年 12 月在伦敦举行
extendscriptr:NPM命令行工具，用于将现代javascript（es5和es6）编译为可执行扩展脚本（es3）
05-02
Extendscriptr是NPM CLI模块，允许您在es3扩展脚本环境中使用es5和es6的许多现代javascript功能。 为什么 如果您习惯使用适当JavaScript环境，那么Adobe产品（主要用于After Effects，InDesign，Photoshop或...
JavaScript ES6的新特性使用新方法定义Class
01-21
ES6中定义类的方式， 就是ES3和ES5中定义类的语法糖，虽然也有些区别，但是整体定义类的方式更加简洁，类的继承更加方便， 如果想对ES6中的继承更加熟悉， 最好了解ES5中原型继承的方式， 博客园中说JS继承的文章很...
Exploring ES6（中文版）
09-02
这本书比阮一峰老师那本《ES6入门》更深入，翻译质量也挺好的，值得一读。...Past versions: ES1, ES2, ES3, ES5, ES6 (also: ES2015), ES2016, ES2017 Current version: ES2018 Next version (in progress): ES2019
Javascript 执行上下文(ES3)
qq_47218954的博客
01-22 293
通俗易懂讲解Javascript执行上下文，附带作用域与闭包、this指向等多个知识点
ES5之继承的三种方法（原型、构造函数继承、组合继承）
weixin_42943920的博客
12-31 426
1、原型继承 原型继承的问题：会出现多个实例属性相同的情况 stu1的原型指向已经发生改变 <script> function Stu(sco){ this.sco = sco } function Person(name,sex){ this.name = name this.sex = sex } Person.prototype.sleep = function(){ console.log('今
JavaScript的ES3, ES5, ES6实现继承方式
翾的博客
05-09 911
前言 该篇博客涉及__proto__, prototype属性, 如果不是太了解, 参见下面这篇博客 https://blog.csdn.net/c_kite/article/details/78484191 ES3 继承 在JavaScript中，所谓的类就是函数，函数就是类。一般情况下，我们在函数的prototype上面定义方法，因为这样所有类的实例都可以公用这些方法；在函数内部...
Es5的几种继承方式
董小姐不懂你的博客
02-26 2935
1. 原型链继承 （子类的原型等于父类的实例） <!-- 父类 -- > function Super(name) { this.name = name } Super.prototype = { name: '我要走走看看', age: 18, hobby: { a:
es5类的继承
qq_42744920的博客
09-19 1158
es5类的继承
JS高级 之 ES6 实现继承
玄鱼殇
07-21 1458
JS高级 之 ES6 实现继承
ES5、ES6 继承
m0_57932116的博客
08-13 874
1）ES5的继承，实质是先创造子类的实例对象this，然后再将父类的方法添加到this上面（Parent.apply(this)）。ES6的继承机制完全不同，实质是先创造父类的实例对象this（所以必须先调用super方法），然后再用子类的构造函数修改this。这是因为子类没有自己的this对象，而是继承父类的this对象，然后对其进行加工。如果不调用super方法，子类就得不到this对象。2）class不存在变量提升，所以在实例化对象前必须先进行类的声明。...
闲谈一下，ES3、ES4、ES5、ES6 分别是什么
m0_37695902的博客
07-27 1788
闲谈一下，ES3、ES4、ES5、ES6 分别是什么 上图按照时间顺序说明了JavaScript、JScript和ECMAScript的发展。 显示在网景工作的Brendan Eich临危受命，用十天时间设计出LiveScript的第一个版本。临时发布前为了讨好Sun公司和Java程序员，LiveScript改名为JavaScript。 微软这边不甘示弱，你的浏览器有脚本功能，我的浏览器也要有啊。于是在IE3.0版本附带推出JScript。为什么叫JScript？因...
ES3,ES5,ES6的区别
qq_36457584的博客
07-09 5360
默认参数：{ es3.es5默认参数的写法： function f(x,y,z){ if（y===undefined）{ y = 7; } if(z === undefined){ z = 42; } return x + y +z } console..og(f(1,3)); } { es6默认参数： function f(x,y = 7 , z= ...
软件里程碑中的ES1/ES2/ES3/ES4/ES5/FC/CS分别是什么
最新发布
01-16
ES3：1999年发布的JavaScript的第三个版本。 ES4：ES4是计划中的JavaScript的第四个版本，但由于后向兼容性的分歧而失败，没有正式发布。 ES5：2009年发布的JavaScript的第五个版本，通过缩减取得了成功。 FC：FC...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 5
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值