ES6 class（基本語法+方法）

頭號碼甲 2020-08-15

展開全文

靜態(tài)屬性與靜態(tài)方法

1. 不會被類實例所擁有的屬性與方法只是類自身擁有
2. 只能通過類調(diào)用

靜態(tài)方法與普通方法重名，不會沖突
static 關(guān)鍵字（靜態(tài)方法）

靜態(tài)屬性
類名.屬性名 = 屬性值;

1、靜態(tài)屬性的聲明，應(yīng)該在類外部，使用“類名.屬性名”的方式聲明。

2、靜態(tài)方法的調(diào)用，應(yīng)該直接在類上調(diào)用，而不是在類的實例上調(diào)用。

靜態(tài)屬性應(yīng)用舉例：

    //職業(yè)類
    class Profession{

    }

    class Character {
        constructor(pfs) {
            this.pfs = pfs;
        }
    }
    // 靜態(tài)屬性做配置
    Character.config = {
        profession: {
            '咒術(shù)師': 1,
            '弓箭手': 2
        }
    }
    // 創(chuàng)建類的實例
    new Character(Character.config.profession['咒術(shù)師']);

靜態(tài)方法應(yīng)用舉例

    class Person {
        // 靜態(tài)方法
        static format(programmer) {
            programmer.haveGirlFriend = true;
            programmer.hair = true;
        }
    }
    // 程序員類
    class Programmer {
        constructor() {
            this.haveGirlFriend = false;
            this.hair = false;
        }
    }
    // 將程序員類的實例轉(zhuǎn)為了普通類
    const programmer = new Programmer();
    Person.format(programmer);
    console.log(programmer);

類的表達(dá)式
P只能在類的內(nèi)部被訪問到
就是類的自身

    const Person = class P {
        constructor() {
            P.a = 1;
            console.log(P===Person);
            console.log('我是鴿手!!咕咕咕!!');
        }
    }

    new Person();

    // 自動執(zhí)行
    const Person1 = new class P {
        constructor() {
            P.a = 1;
            console.log('我是鴿手!!咕咕咕!!');
        }
    }();

getter setter
類似于給屬性提供鉤子
在獲取屬性值和設(shè)置屬性值的時候做一些額外的事情

ES5 getter/setter
1. 在對象字面量中書寫get/set方法

    const obj = {
        _name: '',

        get name() {
            console.log('123');
            return this._name;
        },

        set name(val) {
            this._name = val;
        }
    }
    obj.name = 222;
    console.log(obj);

2. Object.defineProperty

    var obj = {
        _name: ''
    };
    Object.defineProperty(obj, 'name', {
        get: function() {
            console.log('正在訪問name');
            return this._name;
        },
        set: function(val) {
            console.log('正在修改name');
            this._name = val;
        }
    });
    obj.name = 10;
    console.log(obj.name);

ES6寫法：

    class Person {
        constructor() {
            this._name = '';
        }
        get name() {
            console.log('正在訪問name');

            return `我的名字是${ this._name }`;
        }
        set name(val) {
            console.log('正在修改name');

            this._name = val;
        }
    }
    const person = new Person();
    person.name = '鴿王';
    console.log(person.name);

    class AudioPlayer {
        constructor() {
            this._status = 0;
            this.status = 0;
            this.init();
        }
        init() {
            const audio = new Audio();
            audio.src = '....';
            audio.oncanplay = () => {
                audio.play();
                this.status = 1;
            }
        }
        get status() {
            return this._status;
        }
        set status(val) {
            const STATUS_MAP = {
                0: '暫停',
                1: '播放',
                2: '加載中'
            };
            //改變按鈕中的文案
            document.querySelector('#app .play-btn').innerText = STATUS_MAP[val];
            this._status = val;
        }
    }
    const audio = new AudioPlayer();

name 類名

如果類表達(dá)式中，類是有名字的，name是類的名字；類沒有名字的話，會是表達(dá)式中變量或者常量的名稱

    class Humen {

    }
    console.log(Humen.name);//Humen

    const Humen = class P{

    }
    console.log(Humen.name);//P

new.target 指向new關(guān)鍵字后面的類

    class Car {
        constructor() {
            console.log(new.target);
        }
    }
    new Car();

語法糖

    function Car() {
        if (!(this instanceof Car)) {
            throw Error('必須使用new關(guān)鍵字調(diào)用Car');
        }
    }
    new Car();

在es5中模擬類：
構(gòu)造函數(shù)
1. 創(chuàng)建一個空的對象
2. 把構(gòu)造函數(shù)的prototype屬性作為空對象的原型
3. this賦值為這個空對象
4. 執(zhí)行函數(shù)
5. 如果函數(shù)沒有返回值則返回this[返回之前那個空對象]

    function Person(name, age) {
        this.name = name;
        this.age = age;
    }
    console.log(new Person('張三', 11));

    function Constructor(fn, args) {
        // 創(chuàng)建的對象以fn作為原型
        var _this = Object.create(fn.prototype);
        // 執(zhí)行函數(shù)并傳遞參數(shù)
        var res = fn.apply(_this, args);
        return res ? res : _this;
    }
    function Person(name, age) {
        this.name = name;
        this.age = age;
    }
    Person.prototype.say = function() {
        console.log('我叫' + this.name);
    }
    var person = Constructor(Person, ['張三', 12]);
    console.log(person);