JavaScript 中的组合继承 :ES5 与 ES6 中最近似的写法
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 中最近似的写法的更多相关文章
- ES5和ES6中的继承
看到一篇写的非常好的关于js继承的文章,其中对构造函数.原型.实例之间的关系的描述十分透彻,故转载作者文章以随时学习,并供大家共同进步! ES5 ES5中的继承,看图: function Super( ...
- ES5和ES6中对于继承的实现方法
在ES5继承的实现非常有趣的,由于没有传统面向对象类的概念,Javascript利用原型链的特性来实现继承,这其中有很多的属性指向和需要注意的地方. 原型链的特点和实现已经在之前的一篇整理说过了,就是 ...
- ES5和ES6中的继承 图解
Javascript中的继承一直是个比较麻烦的问题,prototype.constructor.__proto__在构造函数,实例和原型之间有的 复杂的关系,不仔细捋下很难记得牢固.ES6中又新增了c ...
- ES5与ES6中的继承
ES5继承在ES5中没有类的概念,所以一般都是基于原型链继承,具体的继承方法有以下几种: 父类: function Father (name) { this.name = name || 'sam' ...
- 前端知识体系:JavaScript基础-原型和原型链-理解 es6 中class构造以及继承的底层实现原理
理解 es6 中class构造以及继承的底层实现原理 原文链接:https://blog.csdn.net/qq_34149805/article/details/86105123 1.ES6 cla ...
- 浅谈es5和es6中的继承
首先给大家介绍下在es5中构造函数的继承 function A(){ 2 //构造函数A 3 this.name="我是A函数"; 4 } 5 6 A.prototype={ 7 ...
- JS创建对象、继承原型、ES6中class继承
面向对象编程:java中对象的两个基本概念:1.类:类是对象的模板,比如说Leader 这个是泛称领导,并不特指谁.2:实例:实例是根据类创建的对象,根据类Leader可以创建出很多实例:liyi,y ...
- 在ES5实现ES6中的Object.is方法
ES6中对象的扩展里面添加了一个Object.is方法,用于比较两个值是否严格相等.内部计算与 === 行为基本一致.那么我们怎么在不支持这个方法的ES5中实现呢? 首先我们需要搞清楚两点,1:Obj ...
- ES5和ES6中关于import & export的书写方式的区别
ES6中输出变量的写法 情景1:单个变量 输出 export const less = 'less' 引用 import {less} from '../index.js' 情景2:多个变量 输出: ...
- ES3、ES5、ES6对象代理的写法差异
ES3的对象代理写法: console.log('定义私有变量ES3写法:') // ES3 var Person = function (){ var data = { name:'ES3', ag ...
随机推荐
- 使用Ollama和Open WebUI管理本地开源大模型
Open WebUI和Ollama介绍 Open WebUI 是一个功能丰富且用户友好的自托管 Web 用户界面(WebUI),它被设计用于与大型语言模型(LLMs)进行交互,特别是那些由 Ollam ...
- MySQL-8.3.0 innovation 创新版本YUM安装配置
MySQL-8.3.0 innovation版本已发布了,想抢先体验一下最新的功能,可以用以下的方式快速在虚拟机上安装一下哈 服务器环境:[root@node213 ~]# cat /etc/redh ...
- memcached 和 Grails,第 1 部分:安装和使用 memcached
学习 memcached 命令并评估缓存性能 本文是系列文章的第 1 部分,主要介绍 memcached 和 Grails.作者 James Goodwill 将向您介绍开源解决方案 memcache ...
- SQL Server数据表模糊查询(like用法)详解
在SQL Server Management Studio (SSMS) 中,进行模糊查询主要是通过使用like操作符来实现的.like操作符用于在where语句中搜索列中具有指定模式的数据.我们在简 ...
- C语言离散化
C语言离散化 最近看到STL就不想用, 于是写个C语言离散化, 居然能过主席树板子, 就写个博客介绍一下. qsort和bsearch都在<stdlib.h>或<cstdlib> ...
- 盘点一下在swagger中一些有用且经常忽略的属性
震惊!,这些Swagger的属性你都了解吗? 盘点一下在swagger中一些有用且经常忽略的属性 启用永久授权EnablePersistAuthorization app.UseSwaggerUI(c ...
- VB 的一些歧义(不断更新)
foo . bar 它可能是 foo.bar() 也可能是 foo(withObj.bar). f (a) , b 它可能是 call f(a)._DEFAULT(a)(Missing, b) 也可能 ...
- MySQL 优化利器 SHOW PROFILE 的实现原理
背景 最近碰到一个 case,通过可传输表空间的方式导入一个 4GB 大小的表,耗时 13 分钟. 通过PROFILE定位,发现大部分耗时竟然是在System lock阶段. mysql> se ...
- MybatisPlusException: can not find lambda cache for this entity[]异常解决
文章目录 场景说明 解决方案 场景说明 简单来说,我们系统中许多数据都是树状结构的,所以我定义了一个实体类父类BaseTreePO,并且想封装一个通用的树状对象的Service类,部分代码如下: ...
- Qt编写安防视频监控系统50-地图配置
一.前言 视频监控系统中集成了百度地图模块,支持在线和离线,离线的需要先把离线的瓦片地图下载到本地放到对应文件夹才可以正常使用,瓦片地图其实就是一张张图片,按照约定的规则,经纬度值+缩放比例进行排列, ...