1.ES6-类-概述

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

2.知识点

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

3.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
__proto__: Object

4.ES6使用Class

class Shouji{
    //构造方法 名字constructor不能修改
    constructor(brand, price){
        this.brand = brand;
        this.price = price;
    }

    //方法必须使用该语法, 不能使用 ES5 的对象完整形式
    call(){
        console.log("我可以打电话!!");
    }
}

//实例化对象
let onePlus = new Shouji("一加手机", 1999);
console.log(onePlus);

打印结果：
Shouji
brand: "1+"
price: 1999
__proto__: Object

6.ES6静态成员

static的标准属性和方法属于类，而不属于实例对象。

class Phone{
    //静态属性
    static name = '手机';
    static change(){
        console.log("我可以改变世界");
    }
}
let nokia = new Phone();
console.log(nokia.name);// 实例对象nokia的name，undefined
console.log(Phone.name);// 类Phonr的name, 手机

7.ES6类的继承extends

class Phone{
    //父类的构造方法
    constructor(brand, price){
        this.brand = brand;
        this.price = price;
    }
    //父类的成员属性
    call(){
        console.log("我可以打电话!!");
    }
}
//子类SmartPhone继承父类Phone
class SmartPhone extends Phone {
    //构造方法
    constructor(brand, price, color, size){
        super(brand, price);// 子类调用父类构造方法进行初始化
        this.color = color; //初始化子类独有的属性
        this.size = size;
    }

    photo(){
        console.log("拍照");
    }

    playGame(){
        console.log("玩游戏");
    }

    //子类对父类call方法的重写（不重写也有父类的call）
    call(){
        console.log('我可以进行视频通话');
    }
}

const xiaomi = new SmartPhone('小米',799,'黑色','4.7inch');
// console.log(xiaomi);
xiaomi.call(); //此时调用的是子类的call方法,无法调用父类同名方法
xiaomi.photo();
xiaomi.playGame();

8.set和get

对对像的属性进行方法的绑定，当对某个属性进行获取时执行get函数，当对某个属性进行获取时执行set函数。
get:用于封装动态属性，比如总数
set:用于判断赋值是否合法...

class Phone{
    get price(){
        console.log("价格属性被读取了");
        return 'iloveyou';
    }
    //set必须要有参数
    set price(newVal){
        console.log('价格属性被修改了');
    }
}

//实例化对象s
let s = new Phone();
console.log(s.price);//价格属性被读取了 iloveyou
s.price = 'free';//价格属性被修改了
赏