欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  IT编程

ES6 class(基本语法+方法)

程序员文章站 2022-03-25 18:05:45
静态属性与静态方法 1. 不会被类实例所拥有的属性与方法 只是类自身拥有2. 只能通过类调用 静态方法与普通方法重名,不会冲突static 关键字(静态方法) 静态属性类名.属性名 = 属性值; 静态属性应用举例: //职业类 class Profession{ } class Character ......

静态属性与静态方法

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

静态方法与普通方法重名,不会冲突
static 关键字(静态方法)

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


 

静态属性应用举例:

    //职业类
    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 = true;
        }
    }
    // 程序员类
    class programmer {
        constructor() {
            this.havegirlfriend = false;
            this.hair = false;
        }
    }
    // 将程序员类的实例转为了普通类
    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('我是鸽手!!咕咕咕!!');
        }
    }

    new person();

    // 自动执行
    const person1 = new class p {
        constructor() {
            p.a = 1;
            console.log('我是鸽手!!咕咕咕!!');
        }
    }();

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


 

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 类名

    class humen {

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

    const humen = class p{

    }
    console.log(humen.name);//p

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

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

语法糖

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

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

    function person(name, age) {
        this.name = name;
        this.age = age;
    }
    console.log(new person('张三', 11));
    function constructor(fn, args) {
        // 创建的对象以fn作为原型
        var _this = object.create(fn.prototype);
        // 执行函数并传递参数
        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);