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 ...
随机推荐
- Windows11 常用软件/环境安装记录
Windows 编程 - The Tools I use 软件安装和管理 将软件装到统一一个地方,路径简短,不含空格和中文. WinGet 官方 Windows 软件包管理器 WinGet 在安装命令 ...
- 缓存之ehcache 之使用
1. EHCache 的特点,是一个纯Java ,过程中(也可以理解成插入式)缓存实现,单独安装Ehcache ,需把ehcache-X.X.jar 和相关类库方到classpath中.如项目已安装了 ...
- btrace一些你不知道的事(源码入手)
背景 周五下班回家,在公司班车上觉得无聊,看了下btrace的源码(自己反编译). 一些关于btrace的基本内容,可以看下我早起的一篇记录:btrace记忆 上一篇主要介绍的是btrace的一些基本 ...
- docker之网络与数据管理
docker默认使用bridge(单主机互联)和overlay(可跨主机互联)两种网络驱动来进行容器的网络管理.如需要,还可以自定义网络驱动插件进行docker容器的网络管理. 1.docker默认网 ...
- windows电脑在线生成ios p12证书工具和生成教程
使用hbuilderx开发ios APP的时候,打包APP提示需要IOS的打包证书 而hbuilderx本身是不能生成证书的,因为生成证书需要在苹果开发者中心生成.而在苹果开发者中心生成证书的时候,提 ...
- Python 学习记录(3)
数据 主要是对Pandas相关的数据帧等做处理和一定的可视化 Pandas对数据帧各列的运算 import seaborn as sns import pandas as pd #从Seaborn 当 ...
- vue-elementui 因滚动条引发的table错位问题
修复后效果 在网上看到的方法都是设置样式属性,试过之后也不生效,也不知道原因 所以就自己用原生js解决了,代码如下 //修错位 x(){ var u = document.getElementsByC ...
- jedis使用及注意事项
参考: https://stackoverflow.com/questions/73242557/jedispool-vs-jedispooled https://redis.io/docs/late ...
- 【二分+前缀和+后缀和】codeforces 2026 D. Sums of Segments
题目 https://codeforces.com/problemset/problem/2026/D 题意 第一行输入一个正整数 \(n(1 \leq n \leq 3e5)\),第二行输入 \(n ...
- 如何判断平台是x86还是arm
case $(uname -m) in x86_64) echo x86;; aarch64) echo arm;; esac ref 上面的代码片改自这里 https://stackoverflow ...