ES6新特性——class类

Class 类

　　ES6 提供了更接近传统语言得写法，引入了 Class 类 这个概念，作为对象得模板。通过 Class 关键字，可以定义类。基本上，ES6 的 Class 可以看作只是一个语法糖。他的绝大部分功能，ES5 都可以做到，新的 Class 写法只是让对象原型的写法更加清晰、更像面向对象编程的语法而已。

　　知识点：

　　1）class 声明类

　　2）constructor 定义构造函数初始化

　　3）extends 继承父类

　　4）super 调用父级构造方法

　　5）static 定义静态方法和属性

　　6）父类方法可以重写

1.声明类

<script>
    // ES5 通过构造函数实现类
    
    // 手机
    function Phone(brand, price){
        this.brand = brand;
        this.price = price;
    }
    // 添加方法
    Phone.prototype.call = function(){
        console.log("我可以打电话！！");
    }
    // 实例化对象
    let Huawei = new Phone('华为',5999);
    Huawei.call();
    console.log(Huawei);
    
    // ES6 class 语法实现
    class Shouji{
        // 构造方法 名字不能修改 实例化自动执行
        constructor(brand,price) {
            this.brand = brand;
            this.price = price;
        }
        
        // 方法必须使用该语法，不能使用 ES5 的对象完整形势
        // call:function(){} 这个不支持；必须使用 call(){}
        call(){
            console.log("我可以打电话！！");
        }
    }
    let onePlus = new Shouji('1+',1999);
    console.log(onePlus);
</script>

2.静态成员

<script>
    // ES5 静态成员
    
    // 手机
    function Phone(){
        
    }
    Phone.name = "手机";
    Phone.change = function(){
        console.log("我可以改变世界")
    }
    Phone.prototype.size = '5.5inch';
    
    let nokia = new Phone();
    
    console.log(nokia.size);        // 输出 5.5inch 
    console.log(nokia.name);        // 输出 undefined
    nokia.change();                    // 输出 报错

    // 总结：实例对象只能继承构造函数原型里的属性和方法， Phone 的 name 、change 属性是对象的属性 是静态成员，size 属性是 实例化对象通过原型链 找到的。
    
    // ES6 class 语法实现
    class Shouji{
        // 静态属性
        static name = '手机';
        static change(){
            console.log("我可以改变世界");
        }
    }
    
    let xiaomi = new Shouji();
    
    console.log(xiaomi.name);        // 输出 undefined
    console.log(Shouji.name);        // 输出 手机
    
    // 总结：static 标注的属性和方法 他属于类 而不属于 实例化对象
</script>

 3.构造函数继承

<script>
    // ES5 
    
    // 手机 (父类)
    function Phone(brand, price){
        this.brand = brand;
        this.price = price;
    }
    
    Phone.prototype.call = function(){
        console.log("我可以打电话");
    }
    
    //智能手机 （子类）
    function SmartPhone(brand, price, color, size){
        Phone.call(this, brand, price);                    // 继承父类中的属性 改变this的指向
        this.color = color;
        this.size = size;
    }
    
    //设置子级构造函数的原型
    SmartPhone.prototype = new Phone;
    SmartPhone.prototype.constructor = SmartPhone;
    
    //声明子类的方法
    SmartPhone.prototype.photo = function(){
        console.log("我可以拍照");
    }
    
    SmartPhone.prototype.playGame = function(){
        console.log("我可以玩游戏");
    }
    
    const chuizi = new SmartPhone('锤子',2499,'黑色','5.5inch');
    console.log(chuizi);
    
    //ES6 继承类
    class Shouji{
        //构造方法
        constructor(brand, price){
            this.brand = brand;
            this.price = price;
        }
        
        //父类的成员属性
        call(){
            console.log("我可以打电话！！");
        }
    }
    
    class SmartPhone extends Shouji{
        //构造方法
        constructor(brand, price, color, size){
            super(brand, price);    // Phone.call(this, brand, price)　调用父类构造方法
            this.color = color;
            this.size = size;
        }
        
        photo(){
            console.log("拍照");
        }
        
        playGame(){
            console.log("玩游戏");
        }
        
        call(){
            console.log("我可以进行视频通话");
        }
    }
    
    const xiaomi = new SmartPhone('小米',799,'黑色','4.7inch');
    // console.log(xiaomi);
    xiaomi.call();
    xiaomi.photot();
    xiaomi.playGame();
</script>

 4.getter 和 setter

<script>
    // get 和 set
    class Phone{
        get price(){
            console.log("价格属性被录取了");
            return 'qwer';
        }
    }
    
    //实例化对象
    let s = new Phone();
    console.log(s.price);            // 输出 价格属性被读取了 qwer
    
    class Phone1{
        set price(newVal){            // setter 必须要有一个参数  方法内可以根据参数做逻辑
            console.log("价格属性被修改了");
        }
    }
    let s1 = new Phone1();
    s1.price = 'free';
</script>