Static properties and static methods

1. The properties and methods that are not owned by the class instance are owned by the class itself
2. Can only be called by class

Static method has the same name as normal method, no conflict
Static keyword (static method)

Static attribute
Class name. Attribute name = attribute value;

Static attribute application example:

    //Occupational category
    class Profession{

    }

    class Character {
        constructor(pfs) {
            this.pfs = pfs;
        }
    }
    // Configure static properties
    Character.config = {
        profession: {
            'medicine man': 1,
            'Archer': 2
        }
    }
    // Create an instance of a class
    new Character(Character.config.profession['medicine man']);

Application example of static method

    class Person {
        // Static method
        static format(programmer) {
            programmer.haveGirlFriend = true;
            programmer.hair = true;
        }
    }
    // Programmer class
    class Programmer {
        constructor() {
            this.haveGirlFriend = false;
            this.hair = false;
        }
    }
    // Convert an instance of a programmer class to a normal class
    const programmer = new Programmer();
    Person.format(programmer);
    console.log(programmer);

Class expression
P can only be accessed inside a class
Is the class itself

    const Person = class P {
        constructor() {
            P.a = 1;
            console.log(P===Person);
            console.log('I am a pigeon hand.!!Cuckoo!!');
        }
    }

    new Person();

    // Automatic execution
    const Person1 = new class P {
        constructor() {
            P.a = 1;
            console.log('I am a pigeon hand.!!Cuckoo!!');
        }
    }();

getter setter
Similar to providing hooks for attributes
Do some extra things when getting and setting property values

ES5 getter/setter
1. Write get/set method in object literal

    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('Visiting name');
            return this._name;
        },
        set: function(val) {
            console.log('Under revision name');
            this._name = val;
        }
    });
    obj.name = 10;
    console.log(obj.name);

ES6 writing:

    class Person {
        constructor() {
            this._name = '';
        }
        get name() {
            console.log('Visiting name');

            return `My name is ${ this._name }`;
        }
        set name(val) {
            console.log('Under revision name');

            this._name = val;
        }
    }
    const person = new Person();
    person.name = 'Pigeon King';
    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: 'suspend',
                1: 'play',
                2: 'Loading'
            };
            //Change copy in button
            document.querySelector('#app .play-btn').innerText = STATUS_MAP[val];
            this._status = val;
        }
    }
    const audio = new AudioPlayer();

Name class name

    class Humen {

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

    const Humen = class P{

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

new.target points to the class after the new keyword

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

Grammatical sugar

    function Car() {
        if (!(this instanceof Car)) {
            throw Error('Must use new Keyword call Car');
        }
    }
    new Car();

Simulate the class in es5:
Constructor
1. Create an empty object
2. Take the prototype property of the constructor as the prototype of the empty object
3. this is assigned to this empty object
4. Execute function
5. If the function does not return a value, this [returns the previous empty object]

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

    function Constructor(fn, args) {
        // Objects created to fn As archetype
        var _this = Object.create(fn.prototype);
        // Execute function and pass parameters
        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('My name is' + this.name);
    }
    var person = Constructor(Person, ['Zhang San', 12]);
    console.log(person);