ES6 class（基本语法+方法）

发布时间：2020-12-16 04:21:53 所属栏目：百科来源：网络整理

导读：静态属性与静态方法 1. 不会被类实例所拥有的属性与方法只是类自身拥有 2. 只能通过类调用静态方法与普通方法重名，不会冲突 static 关键字（静态方法）静态属性类名.属性名 = 属性值; ? 1、静态属性的声明，应该在类外部，使用“类名.属性名”的方式声

静态属性与静态方法

1. 不会被类实例所拥有的属性与方法只是类自身拥有
2. 只能通过类调用

静态方法与普通方法重名，不会冲突
static 关键字（静态方法）

静态属性
类名.属性名 = 属性值;

1、静态属性的声明，应该在类外部，使用“类名.属性名”的方式声明。

2、静态方法的调用，应该直接在类上调用，而不是在类的实例上调用。

静态属性应用举例：

    //职业类
    class Profession{

    }

    class Character {
        constructor(pfs) {
            this.pfs = pfs;
        }
    }
     静态属性做配置
    Character.config = {
        profession: {
            '咒术师': 1,'弓箭手': 2
        }
    }
     创建类的实例
    new Character(Character.config.profession['咒术师']);

静态方法应用举例

    class Person {
         静态方法
        static format(programmer) {
            programmer.haveGirlFriend = true;
            programmer.hair = ;
        }
    }
     程序员类
    class Programmer {
        constructor() {
            this.haveGirlFriend = false;
            this.hair =  将程序员类的实例转为了普通类
    const programmer = new Programmer();
    Person.format(programmer);
    console.log(programmer);

类的表达式
P只能在类的内部被访问到
就是类的自身

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

     Person();

     自动执行
    const Person1 = ;
            console.log('我是鸽手!!咕咕咕!!');
        }
    }();

getter setter
类似于给属性提供钩子
在获取属性值和设置属性值的时候做一些额外的事情

ES5 getter/setter
1. 在对象字面量中书写get/set方法

    const obj = {
        _name: '');
            return this._name;
        },set name(val) {
            this._name = val;
        }
    }
    obj.name = 222;
    console.log(obj);

2. Object.defineProperty

    var obj =
    };
    Object.defineProperty(obj,'name'function() {
            console.log('正在访问name'(val) {
            console.log('正在修改name' val;
        }
    });
    obj.name = 10;
    console.log(obj.name);

ES6写法：

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

            return `我的名字是${ ._name }`;
        }
        set name(val) {
            console.log('正在修改name' val;
        }
    }
    const person =  Person();
    person.name = '鸽王';
    console.log(person.name);

    class AudioPlayer {
        constructor() {
            this._status = 0this.status = 0.init();
        }
        init() {
            const audio =  Audio();
            audio.src = '....';
            audio.oncanplay = () => {
                audio.play();
                this.status = 1;
            }
        }
        get status() {
            ._status;
        }
        set status(val) {
            const STATUS_MAP = {
                0: '暂停'2: '加载中'
            };
            改变按钮中的文案
            document.querySelector('#app .play-btn').innerText = STATUS_MAP[val];
            this._status = val;
        }
    }
    const audio = new AudioPlayer();

name 类名

如果类表达式中，类是有名字的，name是类的名字；类没有名字的话，会是表达式中变量或者常量的名称

    class Humen {

    }
    console.log(Humen.name);Humen

    const Humen = class P{

    }
    console.log(Humen.name);P

new.target 指向new关键字后面的类

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

语法糖

     Car() {
        if (!(this instanceof Car)) {
            throw Error('必须使用new关键字调用Car');
        }
    }
    new Car();

在es5中模拟类：
构造函数
1. 创建一个空的对象
2. 把构造函数的prototype属性作为空对象的原型
3. this赋值为这个空对象
4. 执行函数
5. 如果函数没有返回值则返回this[返回之前那个空对象]

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

     Constructor(fn,args) {
         创建的对象以fn作为原型
        var _this = Object.create(fn.prototype);
         执行函数并传递参数
        var res = fn.apply(_this,args);
        return res ? res : _this;
    }
     age;
    }
    Person.prototype.say = () {
        console.log('我叫' + .name);
    }
    var person = Constructor(Person,['张三',12]);
    console.log(person);

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!