类（‌class）‌

作用

• ES6提供了更接近传统语言的写法，引入了Class（类）这个概念，作为对象的模板。通过class关键字，可以定义类。基本上，ES6的class可以看作只是一个语法糖，

• 它的绝大部分功能，ES5都可以做到，新的class写法只是让对象原型的写法更加清晰、更像面向对象编程的语法而已。

特点

知识点

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

ES6和ES6对比

// ES5
function Car(brand, price) {
    this.brand = brand;
    this.price = price;
}
Car.prototype.change = function () { 
    console.log('我可以拉人');
};

let HUAWEI = new Car('HUAWEI', '420000');

HUAWEI.change(); //我可以拉人
console.log(HUAWEI); // Car {brand: 'HUAWEI', price: '420000'}

// ES6
class Car2 {
    constructor(brand, price) {
        this.brand = brand;
        this.price = price;
    }
    change() {
        console.log('我可以拉人2');
    }
}

let XIAOMI = new Car2('XIAOMI', '290000');

XIAOMI.change(); //我可以拉人2
console.log(XIAOMI); // Car2 {brand: 'XIAOMI', price: '290000'}

class静态成员

// ES5
function Car() {}
Car.name = '小汽车';
Car.prototype.change = function () {
    console.log('我可以拉人');
};
Car.prototype.size = '2吨';

let HUAWEI = new Car();

HUAWEI.change(); //我可以拉人
console.log(HUAWEI.name); // undefined
console.log(HUAWEI.size); // 2吨

// ES6
class Car2 {
    //静态属性
    static name = '小汽车';
    static change() {
        console.log('我可以拉人2');
    }
}

let XIAOMI = new Car2();

XIAOMI.change(); // XIAOMI.change is not a function
console.log(XIAOMI.name); // undefined

继承

// ES5

// 声明一个手机构造函数
function Phone(brand, price) {
    this.brand = brand;
    this.price = price;
}
Phone.prototype.change = function () {
    console.log('我可以打电话');
};

// 继承父类
function SmartPhone(brand, price, color) {
    Phone.call(this, brand, price);
    this.color = color;
}

// 设置子级构造函数的原型
SmartPhone.prototype = new Phone();

// 声明子级构造函数方法

SmartPhone.prototype.photo = function () {
    console.log('我可以拍照');
};

const xaiomi = new SmartPhone('小米', '1999', '白色');

console.log(xaiomi); // SmartPhone {brand: '小米', price: '1999', color: '白色'}
xaiomi.change(); //我可以打电话
xaiomi.photo(); //我可以拍照
// ES6

class Phone2 {
    // 构造方法
    constructor(brand, price) {
        this.brand = brand;
        this.price = price;
    }
    // 父类的成员属性
    change() {
        console.log('我可以打电话2');
    }
}

class SmartPhone2 extends Phone2 {
    // 构造方法
    constructor(brand, price, color) {
        super(brand, price);
        this.color = color;
    }

    photo() {
        console.log('拍照2');
    }
}

const xaiomi2 = new SmartPhone2('小米', 999, '黑色');
console.log(xaiomi2); // SmartPhone2 {brand: '小米', price: 999, color: '黑色'}
xaiomi2.change(); //我可以打电话2
xaiomi2.photo(); //拍照2

子类对父类方法的重写

// ES6
class Phone2 {
    // 构造方法
    constructor(brand, price) {
        this.brand = brand;
        this.price = price;
    }
    // 父类的成员属性
    change() {
        console.log('我可以打电话2');
    }
}

class SmartPhone2 extends Phone2 {
    // 构造方法
    constructor(brand, price, color) {
        super(brand, price);
        this.color = color;
    }

    photo() {
        console.log('拍照2');
    }

    change() {
        console.log('我可以视频通话');
    }
}

const xaiomi2 = new SmartPhone2('小米', 999, '黑色');
console.log(xaiomi2); // SmartPhone2 {brand: '小米', price: 999, color: '黑色'}
xaiomi2.change(); //我可以视频通话
xaiomi2.photo(); //拍照2

get 和 set 的设置

// ES6
class Phone {
    get price() {
        console.log('价格属性被读取了');
    }
    set price(newVal) {
        console.log('价格属性被设置了');
    }
}

let s = new Phone();

s.price; //价格属性被读取了
s.price = '1999'; // 价格属性被设置了