ES6（7）：class类

分手后的思念是犯贱 2022-12-26 08:17 166阅读 0赞

## 1. class介绍 ##

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

## 2. 类声明 ##

用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);

用class实现：

class Shouji{ 
        //构造方法 名字不能修改
        constructor(brand, price){ 
            this.brand = brand;
            this.price = price;
        }
    
        //方法必须使用该语法, 不能使用 ES5 的对象完整形式
        call(){ 
            console.log("我可以打电话!!");
        }
    }
    
    let onePlus = new Shouji("1+", 1999);
    
    console.log(onePlus);

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQzNjUyNDky_size_16_color_FFFFFF_t_70]  
可以看出，俩是一样的。

## 3.静态成员 ##

class Phone{ 
        //静态属性
        static name = '手机';
        static change(){ 
            console.log("我可以改变世界");
        }
    }
    
    let nokia = new Phone();
    console.log(nokia.name);
    console.log(Phone.name);

![在这里插入图片描述][20201203201506718.png]  
也就是说，对于 static 标注的属性和方法，它属于类而不属于实例对象。

## 4. 对象继承 ##

用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.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);

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQzNjUyNDky_size_16_color_FFFFFF_t_70 1]

用class实现：

class Phone{ 
        //构造方法
        constructor(brand, price){ 
            this.brand = brand;
            this.price = price;
        }
        //父类的成员属性
        call(){ 
            console.log("我可以打电话!!");
        }
    }
    
    class SmartPhone extends Phone { 
        //构造方法
        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.photo();
    xiaomi.playGame();

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQzNjUyNDky_size_16_color_FFFFFF_t_70 2]

## 5.子类对父类方法的重写 ##

上述示例中：  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQzNjUyNDky_size_16_color_FFFFFF_t_70 3]

## 6. get 和 set ##

class Phone{ 
        get price(){ 
            console.log("价格属性被读取了");
            return '读取';
        }
    
        set price(newVal){ 
            console.log('价格属性被修改了');
        }
    }
    
    //实例化对象
    let s = new Phone();
    
    console.log(s.price);
    s.price = 'free';

![在这里插入图片描述][20201203210236971.png]

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQzNjUyNDky_size_16_color_FFFFFF_t_70]: /images/20221120/f3508c05155d4be9ab4cc069d3c10d0a.png
[20201203201506718.png]: https://img-blog.csdnimg.cn/20201203201506718.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQzNjUyNDky_size_16_color_FFFFFF_t_70 1]: https://img-blog.csdnimg.cn/20201203202131646.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQzNjUyNDky,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQzNjUyNDky_size_16_color_FFFFFF_t_70 2]: https://img-blog.csdnimg.cn/20201203202535830.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQzNjUyNDky,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQzNjUyNDky_size_16_color_FFFFFF_t_70 3]: https://img-blog.csdnimg.cn/20201203202802944.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQzNjUyNDky,size_16,color_FFFFFF,t_70
[20201203210236971.png]: https://img-blog.csdnimg.cn/20201203210236971.png