JavaScript 的继承写法较多,在此并不一一讨论,仅对最常用的组合式继承做一个说明:

组合式继承主要利用了原型链继承和构造函数继承。

一、ES5 中的写法

    function Person(name, age){
this.name = name
this.age =age
}
Person.prototype.selfIntroduction = function(){
console.log(this.name, this.age)
} function Student(name, age, grade){
Person.call(this,name,age) //重点
this.grade = grade
}
//Note1: 该处写法较多,个人喜欢用这种,用了ES6之后就不香了
Student.prototype.__proto__ = Person.prototype var p1 = new Person('jerry',13)
p1.selfIntroduction()
var s1 = new Student('tom',12, 7)
s1.selfIntroduction()

执行结果:

二、ES6中的写法

    class Person{
constructor(name,age) {
this.name = name
this.age = age
}
selfIntroduction(){
console.log(this.name, this.age)
}
}
class Student extends Person{
constructor(name, age, grade){
super(name,age)//相当于 Person.call(this,name,age)
this.grade = grade
}
}
var p1 = new Person('jerry',13)
p1.selfIntroduction()
var s1 = new Student('tom',12, 7)
s1.selfIntroduction()

执行结果:

三、比较

个人认为上述ES5中的写法是最接近ES6的,也最符合原型链的本意。

即:

p1.__proto__ == s1.__proto__.__proto__; // 结果: true

JavaScript 中的组合继承 :ES5 与 ES6 中最近似的写法的更多相关文章

  1. ES5和ES6中的继承

    看到一篇写的非常好的关于js继承的文章,其中对构造函数.原型.实例之间的关系的描述十分透彻,故转载作者文章以随时学习,并供大家共同进步! ES5 ES5中的继承,看图: function Super( ...

  2. ES5和ES6中对于继承的实现方法

    在ES5继承的实现非常有趣的,由于没有传统面向对象类的概念,Javascript利用原型链的特性来实现继承,这其中有很多的属性指向和需要注意的地方. 原型链的特点和实现已经在之前的一篇整理说过了,就是 ...

  3. ES5和ES6中的继承 图解

    Javascript中的继承一直是个比较麻烦的问题,prototype.constructor.__proto__在构造函数,实例和原型之间有的 复杂的关系,不仔细捋下很难记得牢固.ES6中又新增了c ...

  4. ES5与ES6中的继承

    ES5继承在ES5中没有类的概念,所以一般都是基于原型链继承,具体的继承方法有以下几种: 父类: function Father (name) { this.name = name || 'sam' ...

  5. 前端知识体系:JavaScript基础-原型和原型链-理解 es6 中class构造以及继承的底层实现原理

    理解 es6 中class构造以及继承的底层实现原理 原文链接:https://blog.csdn.net/qq_34149805/article/details/86105123 1.ES6 cla ...

  6. 浅谈es5和es6中的继承

    首先给大家介绍下在es5中构造函数的继承 function A(){ 2 //构造函数A 3 this.name="我是A函数"; 4 } 5 6 A.prototype={ 7 ...

  7. JS创建对象、继承原型、ES6中class继承

    面向对象编程:java中对象的两个基本概念:1.类:类是对象的模板,比如说Leader 这个是泛称领导,并不特指谁.2:实例:实例是根据类创建的对象,根据类Leader可以创建出很多实例:liyi,y ...

  8. 在ES5实现ES6中的Object.is方法

    ES6中对象的扩展里面添加了一个Object.is方法,用于比较两个值是否严格相等.内部计算与 === 行为基本一致.那么我们怎么在不支持这个方法的ES5中实现呢? 首先我们需要搞清楚两点,1:Obj ...

  9. ES5和ES6中关于import & export的书写方式的区别

    ES6中输出变量的写法 情景1:单个变量 输出 export const less = 'less' 引用 import {less} from '../index.js' 情景2:多个变量 输出: ...

  10. ES3、ES5、ES6对象代理的写法差异

    ES3的对象代理写法: console.log('定义私有变量ES3写法:') // ES3 var Person = function (){ var data = { name:'ES3', ag ...

随机推荐

  1. IPC-6012F-CN-中文版\英文版,2024 刚性印制板的鉴定及性能规范

    IPC-6012F-CN-中文版,2024 刚性印制板的鉴定及性能规范 链接:https://pan.baidu.com/s/1z1x5JPmcRHzeIQgMsMQRxg提取码:1234 https ...

  2. VTable-Gantt:功能强大、性能优异的开源甘特图组件

    甘特图的基本概念 在项目管理中,甘特图是一种常用的工具,用于展示项目任务的时间安排和进度. 我们将甘特图拆分成以下几个部分: 左侧任务列表:显示项目的任务列表,通常在图的左侧. 顶部时间轴:显示项目的 ...

  3. spring 跟 诠释及区别

    <context:annotation-config> 和 <context:component-scan>的区别 Difference between <context ...

  4. 使用JConsole监控进程、线程、内存、cpu、类情况

    Jconsole简介: Jconsole是一个JMX兼容的监视工具.它使用Java虚拟机的JMX机制来提供运行在Java平台的应用程序的性能与资源耗费信息. 监控进程使用方法如下:由于JConsole ...

  5. python命令行工具之Click

    Click 是一个简洁好用的Python模块,它能用尽量少的代码实现漂亮的命令行界面.它不仅开箱即用.还能支持高度自定义的配置. 示例: import click @click.command() @ ...

  6. 使用 BenchmarkDotNet 对 .NET 代码进行性能基准测试

    前言 在软件开发领域,性能基准测试是确保软件系统高效.稳定运行的重要环节.它可以帮助你评估应用程序的性能,了解其在不同条件下的响应时间.吞吐量.资源利用率等.通过基准测试,你可以确定系统在处理特定工作 ...

  7. ThreeJs-04详解材质与纹理

    一.matcap材质 这个材质不会受到光照影响,但是如果图片本身有光就可以一直渲染这个图片本来的样子,用来将一个图片纹理渲染到物体上的材质 代码实现 加载模型后,开启纹理渲染,并把它的材质变为这个材质 ...

  8. vue3版本下element-plus和antd-vue选哪个更好一些?

    Vue 3 发布后,各家第三方库开始陆续重构并支持 Vue 3 ,国内两大知名框架 Element Plus 和 Ant Design Vue 也相续发布新版支持 Vue 3.到底应该怎么选择呢? E ...

  9. 记一次单元测试问题com.sun.crypto.provider.HmacSHA1 cannot be cast to javax.crypto.MacSpi

    在用单元测试Junit测试部门的SDK时,有个md5鉴权步骤,出现了java.lang.ClassCastException: com.sun.crypto.provider.HmacSHA1 can ...

  10. Windows交叉编译MNN-3.0.0安卓版本库

    一.写在前面 以下的步骤.流程都是基于MNN的文档,再结合自己的实践得出的,仅作为参考. 博主的环境是windows10专业版 MNN文档 MNN的Github仓库地址 二.下载MNN-3.0.0主库 ...