ES6-类和类的继承

1.类-助力js更好的面对对象

// ES5构造对象的函数
const Person = function(name,age) {
    this.name = name;
    this.age = age;
    this.getName = function() {
        console.log(`My Name is ${this.name}`);
    }
}
const person = new Person('xiaoming','18');
person.getName();


// ES6
class Animal {
    constructor(name,type,age){
        this.name = name;
        this.type = type;
        this.age = age;
    }
    getType() {
        console.log(`type of ${this.name} is ${this.type}`);   
    }
}
const animal = new Animal('xiaobai','rabbit','1');
animal.getType();

面试

• class的类型是？ 答： function typeof Animal // function
• class的prototype? 答：和构造函数的原型对象本质相同，constructor的类型有区分 console.log(Animal.prototype)
• class & 函数对象 属性 答： 都可以通过hasOwnProperty判断属性 console.log(person.hasOwnProperty('name')); // true console.log(animal.hasOwnProperty('name')); // true

2.属性定义的两种方式

通过在constructor中定义属性

通过get/set定义属性

class Animal {
    constructor(name,type,age){
        this.type = type;
        this.age = age;
        this._name = name;
    }
    getType() {
        console.log(`type of ${this.name} is ${this.type}`);   
    }

    get name() {
        
        return this._name;
    }

    set name(val) {
        if(val) {
            this.name = val
        }
    }

}
const animal = new Animal('xiaobai','rabbit','1');

面试

• js如何建立只读变量？

class Animal {
    constructor(name,type,age){
        this.type = type;
        this.age = age;
        this._name = name;
    }
    get name() {
        
        return this._name;
    }

}
const animal = new Animal('xiaobai','rabbit','1');

• 修改只读变量，会报错么 答： 无法改变但是不会报错
• js如何建立一个私有属性？

// 第一种

class Animal {
    constructor(name,type,age){
        this.type = type;
        this.age = age;
        this._name = name;
    }
    let _foodType = "meat";
    getFoodType () {
        return _foodType
    }

}

// 第二种


class Animal {
    #foodType = "meat";
    constructor(name,type,age){
        this.type = type;
        this.age = age;
        this._name = name;
    }
    get foodType() {
        return this.#foodType;
    }
    set fiidType(val) {
        if(val) {
            this.#foodType = val;
        }
    }

}

• 封装核心 - 适配器模式 底层封装中台业务core

class Util{
    constructor(core) {
        this._main = core;
        this._name = "xiaoming";
        this._age = "18";
    }
    // fullName: {firstName: '', lastName: '', name: ''}
    get name() {
        return {
            ..._main.fullName,
            name: _name,
        }
    }
}

3.静态属性、静态方法

// ES5
function Animal (){
    
}
Animal.name = "xiaoming";
Animal.getType = function () {
     return this.name;   // xiaoming
}


// ES6
class Animal {
    constructor () {
        this.name = "123";
    }
    static name = "324435"
    static getName () {
        return this.name;    // "324435"
    }
}

4.类的继承

// ES5
// 对象冒充 + 原型链继承
function Father (name,age) {
    this.name = name;
    this.age = age;
    this.send = function() {
        console.log(123)
    } // 实例方法
}
Father.prototype.run = function() {
    console.log('prototype')    // 原型对象上的方法
}

function Child() {
    Father.call(this,'xiaoming','12');   // 对象冒充（不能继承原型对象）
}
// Child,prototype = new Father();   // 原型链方式1
Child.prototype = Father.prototype;   // 原型链方式2

const child = new Child();

child.name    // xiaoming
child.send();   // 123
child.run();   // prototype

// ES6
class Father{
    constructor (name,age) {
        this.name = name;
        this.age = age;
        this.send = function() {
            console.log(123)
        } // 实例方法
    }
    run() {
        console.log('prototype')    // 原型对象上的方法
    }
}


class Child extends Father {
    constructor() {
        super('xiaoming','14')
    }
}
const child = new Child();
child.name    // xiaoming
child.send();   // 123
child.run();   // prototype