深入浅出ES6教程『类和继承』

作者: 苏日俪格 | 来源:发表于2018-06-07 10:55 被阅读9次

深入浅出ES6教程『类和继承』
继承
JS中类的继承封装和多态
react组件
(七)class
javascript之模拟类继承
JS -- 继承、性能优化、其他
es5 es6静态方法、类、单例模式
你不知道的ES5和ES6继承
ES6类和继承

大家好，本人名叫苏日俪格，大家叫我 （格格） 就好，在上一章节中我们学到了模块化的用法，下面我们一起来继续学习类和继承：

关于类的概念我想大家都很熟悉了，在面向对象编程的时候需要用到类，那么ES5以及之前的写法来模拟类，这种做法很粗糙，毕竟是从Java语言中引过来的：

function Person(name){
    this.name = name;
}
Person.prototype.showName = function(){
    return this.name;
};
var p1 = new Person('苏日俪格');
console.log(p1.showName());  // 苏日俪格

那么在我们ES6中，就不会这么粗糙了：

class Person{  // Person类  它也是一个函数
    constructor(name){  // 构造函数
        this.name = name;
    }
    showName(){
        return this.name;
    }
}
var p1 = new Person('苏日俪格');
console.log(p1.showName());  // 苏日俪格

constructor的中文意思就是构造，他在这里代表的就是构造函数，那么class是一个类也是一个函数，只不过ES6标准是把这个函数包装成了一个class的写法而已，在new一个实例的时候，构造函数自动执行。

在写类的过程中，有一点需要注意：class没有预解析，实例化一定要放在下面；在ES5里面用函数来模拟类就可以，因为函数是有提升的功能的

关于ES6中类的新玩法我们已经掌握，那么类的继承的玩法是不是也变了呢？
让我们对比一下，先来看看以前的写法：

function Person(name){  // 父类
    this.name = name;
}
Person.prototype.showName = function(){
    return this.name;
};
function SubPerson(name,job){  // 子类
    Person.call(this,name);  // 子类继承父类的属性 需要将this指向父类中的name
    this.job = job;  // job是子类自己的属性
}
SubPerson.prototype = new Person();  // 子类继承父类的方法
var p1 = new SubPerson('苏日俪格');
console.log(p1.name);  // 苏日俪格
// console.log(p1.showName());  // 苏日俪格

再来看看现在的写法：

class Person{
    constructor(name){
        this.name = name;
    }
    showName(){
        return this.name;
    }
}
class SubPerson extends Person{
    constructor(name,job){
        super(name);    // 指向父类的构造函数
        this.job = job;
    }
    showJob(){
        return this.job;
    }
}
var p1 = new SubPerson('苏日俪格','前端开发');
console.log(p1.name);  // 苏日俪格
// console.log(p1.showName());  // 苏日俪格
// console.log(p1.job); // 前端开发

玩过java的都应该知道，extends就代表这继承的意思，super就是指向父类的构造函数，指代了整个prototype对象或者_proto_指针指向的对象，在ES6里面呢也是相同的意思，可以省去不少代码和原型链的过程

如果在子类中也写入showName方法，和父类中的方法重名，这样就会覆盖父类的，倘若不想覆盖而是想引用父类的showName方法，那么就在子类的showName方法中通过super来调用父类的showName：super.showName

关于类和继承我们都已经了然于心，预知Symbol & generator如何，请听下回分解（＾∀＾）/~~~

本文的所有内容均是一字一句敲上去的，希望大家阅读完本文可以有所收获，因为能力有限，掌握的知识也是不够全面，欢迎大家提出来一起分享！谢谢O(∩_∩)O~