ES5、ES6 中继承的几种写法

关注

发布于: 2020 年 07 月 08 日

ES6中的class继承class是一种语法糖，内部还是基于原型继承的方法。使用class代码易读
﻿
class Person{
  constructor(name) {
    this.name = name
    this.privateFunc = function() {console.log(this.name)} // 私有方法
  }
  
  hello() {
    console.log(this.name)
  }
}
class Student extends Person {
  constructor(name, grade) {
    super(name) // 继承父类的属性及方法
    this.grade = grade
  }
}
﻿
ES6中的原型继承﻿
function Person(name) {
  this.name = name
  this.privateFunc = function() {console.log(this.name)} // 私有方法
}
// 原型方法
Person.prototype.hello = function() {console.log(this.name)}
function Student(name, grade) {
  Person.call(this, name) // 继承父类的属性/方法 => name属性及privateFunc方法
  this.grade = grade
}
// 继承父类的原型
Student.prototype = Object.create(Person.prototype)
Student.prototype.constructor = Student // 绑定正确的构造函数，防止被父类构造器覆盖
﻿
ES5中的原型继承Object.create是ES6中的语法，只需要将上面的写法修改一下即可。需要借助中间对象来实现prototype的继承关系。
﻿
// 继承父类的原型
- Student.prototype = Object.create(Person.prototype)
+ function DummyPerson {}
+ DummyPerson.prototype = Person.prototype
+ Student.prototype = new DummyPerson
﻿

发布于: 2020 年 07 月 08 日阅读数: 53

原文链接:【http://xie.infoq.cn/article/b28e991c5f8e3aa04d0a78670】。未经作者许可，禁止转载。

Manito

关注

还未添加个人签名 2019.10.08 加入

还未添加个人简介

发布

暂无评论

创作场景

ES5、ES6 中继承的几种写法

ES6中的class继承

ES6中的原型继承

ES5中的原型继承

Manito

评论