16.class

class类

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

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

//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);//'我可以打电话' Phone{brand:'华为',price:5999}


//ES6
//class
class Shouji{
    constructor(brand,price){
        this.brand = brand;
        this.price = price;
    }
    
    //方法必须使用该语法，不能使用ES5的对象完整形式
    call(){
        console.log("我可以打电话");
    }
}

let onePlus = new Shouji('1+',1999);

console.log(onPlus);//'我可以打电话' Phone{brand:'1+',price:1999}

class静态成员

function Phone(){
    
}

Phone.name = '手机';
Phine.change = function(){
    console.log("我可以打电话");
}
Phone.prototype.size = '5.5inch'; 
let nokia = new Phone();

console.log(nokia.name);//undefined
nokia.change();//报错
console.log(nokia.size);//'5.5inch'

class Phone{
    //静态属性
    static name = '手机';
	static change(){
       console.log("我可以打电话");
    }
}

let nokia = new Phone();
console.log(nokia.name);//undefined
console.log(Phone.name);//手机

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(shuizi);//SmartPhone{brand:'锤子',price:2499,color:'黑色',size:'5.5inch'} _proto_:{photo:f(),playGame:f(),......}

class的类继承

//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("我可以玩游戏");
    }
}

const xiaomi = new SmartPhone('小米',799,'黑色','4.7inch');
console.log(xiaomi);//SmartPhone{brand:'小米',price:799,color:'黑色',size:'4.7inch'} _proto_:{photo:f(),playGame:f(),......}
xiaomi.call();//"我可以打电话"
xiaomi.photo();//"我可以拍照"
xiaomi.playGame();//"我可以玩游戏"

子类对父类方法重写

//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
    call(){
        console.log("我可以进行视频通话");
    }
}

const xiaomi = new SmartPhone('小米',799,'黑色','4.7inch');

xiaomi.call();//"我可以进行视频通话"

class中的getter和setter设置

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

console.log(s.price);//价格属性被读取了   aaa
s.price = 'free';//价格属性被修改了