聊一聊ES6中的类的声明（class）和继承（extends，super）以及只读（get）和可写（set）

白嫖一时爽，一直白嫖一直爽，如果各位看官大老爷觉得我写的内容对你有所帮助，希望可以给个赞鼓励一下，谢谢啦！！

简介

在编程的过程中，我们主要运用的有函数编程和面向对象编程，而在一些大型的项目中，大部分使用的都是面向对象编程，而这里也就有了类的继承和声明这些个问题出现。

类的声明

ES5中类的声明

在ES5中类的声明主要是通过构造函数来实现的，在声明过程中，主要是通过使用 this，将

let family = function(name){
	this.name = name;
	this.parent = function(){
        console.log('my parent');
    }
}
let son = new family('son')
let mother = new family('mother')

console.log(son); //family{name:"son",parent:f}
console.log(mother); //family{name:"mother",parent:f}

当然在在这个类里，也不是所有的属性跟方法都是挂载在实例化对象里面的，还有一些对于实例对象来说公有的方法或者属性，它是挂载在原型对象上的。

let family = function(name){
    this.name = name;
    this.parent = function(){
        console.log('my parent');
    }
}
// 实例对象通过原型链拿到 work 这个方法
family.prototype.work = function(){
    console.log('my work');
}

这里可以看出ES5里面想要声明一个类是比较麻烦的，那么在ES6里面，又是怎么做声明的呢

ES6中类的声明

在ES6里面，新增了一个叫做 class 的类的声明的语法糖，它的使用方法是这样的。

class family{
	constructor(name){
		this.name = name
	}
    work(){
        console.log('my work')   
    }
    
let son = new family('son')
console.log(son)

这里，重点说明一个点就是，在使用 class 之后，对于想要将方法挂载在原型对象上的时候，已经不需要跟ES5一样那么麻烦了，只需要将方法直接写在constructor的外面就可以了。

说完了ES6中类的声明，我们再来聊聊ES6中新增的另一个东西，它可以让类的属性变为只可以读取。

ES6中的get和set

当你在声明一个类的时候，有些属性，是不希望别人可以随意的对它进行更改的，也就是把它定义为 私有属性，在ES5的时候基本不可能做到，但是在ES6的时候是可以办到的，而这个就是通过 get 来实现。

let _age = 18
class family {
    constructor(name){
        this.name = name
    }
    work(){
        console.log('my work')   
    }
    get age() {
    	return _age
    }
}

let son = new family('son')
console.log(son.age); //18

在这里定义一个私有属性的时候，用户访问这个属性的入口，跟这个属性的值存储的位置，是不一样的。

而且这时候的age是不会被修改的，例如

son.age = 20
console.log(son.age); //18

但是，这里的age是不是完全没办法改变呢，其实也不是，如果想要改变它的值，就可以通过ES6中的另一个新东西—— set

它的使用方法跟 get 差不多。

let _age = 18
class family {
    constructor(name){
        this.name = name
    }
    work(){
        console.log('my work')   
    }
    get age() {
        return _age
    }
    set age(value){
        _age = value
    }
}
let son = new family('son')
son.age = 20
console.log(son.age); //20

其实本质上来说，它并不是直接改变age的值，而是通过改变_age的值，而间接的改变原age的值，有了这个方法之后，就可以有了新的玩法了，例如

    set age(value){
        if(value>18 && value<26){
            _age = value
        }
    }

类的静态方法的挂载

一般来说，在构造函数里面的方法，是用来操作实例对象的属性的，或者说它与实例对象的属性有关系，如果在类中一个方法跟实例对象的属性完全无关的时候，就可以将它变为静态方法。

这里有一个需要注意的地方：在实例对象上，是没办法找到类的静态方法的

ES5挂载静态方法

ES5中声明和使用类的静态方法是这样的

let family = function(name){
    this.name = name;
    this.parent = function(){
        console.log('my parent');
        family.love()
    }
}
family.love = function(){
    console.log('I love you ');
}
let son = new family('son')
son.parent();
//my parent I love you

ES6挂载静态方法（static）

在ES6中引入了一个新的东西，就是 static ，它就是用来在ES6中给类挂载静态方法的。

class family {
    constructor(name){
        this.name = name
    }
    parent(){
        console.log('my parent')
        family.love()   
    }
    static love(){
        console.log('I love you');
    }
}
let son = new family('son')
son.parent(); 
//my parent I love you

使用static的时候，同样的只需要把方法写在class里面，然后在方法的前面加一个 static 就可以了，在代码的阅读性上有了很大的提高。

类的继承

在面向对象编程的过程中，最强大一个东西，就是类的继承，但是它又不太好理解，因为这里涉及到了原型链的问题，但是在ES6里，类的继承，同样也变的不再复杂。

ES5中类的继承

ES5中类的继承，方法有特别多，为了实现完整的继承，本质上就是使用原型链和构造函数结合起来的方式来继承。

let father = function(value){
    this.name = value;
    this.parent = function(){
        console.log('my parent');
    }
}

let children = function(value){
    father.call(this,value) //构造函数继承
}
children.prototype = father.prototype //原型链继承

let son = new children('son')
console.log(son); //children {name:"son",parent:f}

这里可以看出来ES5的继承是比较复杂的，需要涉及的面比较多，而且这种继承也不是最完美的写法。

ES6中类的继承

在ES6中，有引入了两个新的东西，用来完善类的继承这个事情，它们就是 extends 和 super。

class father{
    constructor(value){
        this.name = value
    }
    parent(){
        console.log('my parent');
    }
}

class children extends father{
    constructor(value){
        super(value) //构造函数继承
        this.age = 18 
    }
}

这里也有一个需要注意的地方，就是super()必须写constructor里面的最上面，这里涉及到的一个问题是隐式原型和显式原型的问题，在这篇博文就不做过多的解释了。

最后

博主不是科班出身，刚学前端没多长时间如果有哪里写错的，欢迎评论区里面指正，如果觉得这篇文章对你有所帮助，点个赞吧o(╥﹏╥)o