ES6新特性_class类声明继承constructor,super,static,set,get详细介绍

知识点:

1. class 声明类;
2. constructor 定义构造函数初始化;
3. extends 继承父类;
4. super 调用父级构造方法;
5. static 定义静态方法和属性;
6. 父类方法可以重写;

什么是语法糖？

语法糖(syntactic sugar)是指编程语言中可以更容易的表达一个操作的语法，它可以使程序员更加容易去使用这门语言，操作可以变得更加清晰、方便，或者更加符合程序员的编程习惯。用比较通俗易懂的方式去理解就是，在之前的某个语法的基础上改变了一种写法，实现的功能相同，但是写法不同了，主要是为了让开发人员在使用过程中更方便易懂。

es6中的语法糖有哪些？

这个话题其实很大，es6中的语法糖太多了，例如常用的箭头函数，解构赋值等都是语法糖，具体的可以看看本站其它ES6相关文章，讲得很仔细，给博主点个赞吧。

ES5和ES6构造实例的区别

• ES5中类的写法

// 创建一个Phone类
function Phone(brand, price){
    this.brand = brand;
    this.price = price;
}
// 添加一个call方法
Phone.prototype.call = function(){
    console.log('我可以打电话！');
}
// 实例化
let iphone = new Phone('苹果',6999);
iphone.call();
console.log(iphone); // 我可以打电话！

• ES6中的类写法

// 创建类和方法
class Phone2 {
    // 构造函数，名称固定 constructor
    constructor(brand, price){
        this.brand = brand;
        this.price = price;
    }

    // 方法: 方法名+小括号，语法固定。
    call(){
        console.log('我可以打电话！');
    }
}
// 实例化
let iphone13 = new Phone2('苹果13','8999');
iphone13.call(); // 我可以打电话！

ES6中类的静态属性 static

class Phone3 {
    // 静态属性
    static name = "手机"
    static change() {
        console.log('代码改变世界！');
    }
}
// 实例化
let huawei = new Phone3();
// 打印: undefined，static声明的属性属于类，而不属于实例对象
console.log(huawei.name); 
// 打印: 手机, 调用类的属性
console.log(Phone3.name);

ES6中的类继承,重写

// 创建一个类
class Phone4 {
    // 父类构造方法
    constructor(brand, price){
        this.brand = brand;
        this.price = price;
    }
    // 父类的方法
    call(){
        console.log('我可以打电话！');
    }
}
// 继承 Phone4 类 extends
class SmartPhone extends Phone4 {
    // 子类构造方法
    constructor(brand, price,color,size){
        // 子类调用父类的构造方法，做初始化
        super(brand, price);
        // 添加自己的属性做初始化
        this.color = color;
        this.size = size;
    }
    // 子类自己的方法，拍照
    photo(){
        console.log('我可以拍照！');
    }
    // 子类自己的方法，游戏
    game(){
        console.log('我可以玩游戏！');
    }

    // 重写父类里的方法
    call(){
        console.log('我可以视频通话！');
    }
}
// 实例化子类
const xiaomi = new SmartPhone('小米','799','白色','4.7inch');

// 继承了父类里的品牌和价格
console.log(xiaomi);
//打印：SmartPhone {brand: '小米', price: '799', color: '白色', size: '4.7inch'}

// 调用call方法, 未重写
xiaomi.call(); // 打印：我可以打电话！

// 子类重写了call方法
xiaomi.call(); // 打印：我可以视频通话！

// 调用photo方法
xiaomi.photo(); // 打印：我可以拍照！

// 调用game方法
xiaomi.game(); // 打印：我可以玩游戏！

ES6中类的 get 和 set

与 ES5 一样， 在 Class 内部可以使用get和set关键字， 对某个属性设置:存值函数和取值函数， 拦截该属性的存取行为。有时我们不想被实例化后某个属性被随意修改和读取，可以设置这个属性的get和set方法来控制这个属性的读取。

// 假如这个_name属性是一个私有属性
let    _name = '手机';

class Phone5 {

    // 实例化后，在获取name值时，会触发这个get关键字声明的name函数,
    // 如果不想被获取就要在这里进行拦截处理
    get name() {
        console.log('_name属性被读取了...');
        return _name;
    }

    // 实例化后，在给name赋新值时，会触发set关键字声明的name函数，
    // 在设置值时，设置的值是否符合我们的要求，就可以这里进行拦截处理
    set name(newValue){
        console.log('_name属性被修改了...');
        // 在这里可以做一些检测
        // ...
        // 如果符合我们的要求，就可以在这里赋上新值
        _name = newValue;
    }
}
// 实例化
let s = new Phone5();
// 获取name就会触发类里get关键字声明的name函数
console.log(s.name); // 手机
// 赋值时就会触发类里set关键字声明的name函数
s.name = '智能手机';
console.log(s.name); // 智能手机