美文网首页
【JS ES6】Class

【JS ES6】Class

作者: 大Q本Q | 来源:发表于2019-06-25 11:53 被阅读0次

类定义/调用

class PERSON {
    // 等同于写在contructor中的this.sex=''
    sex

    // 构造函数
    constructor(name,age,sex){
        this.name = name;
        this._age = age
        this.sex=sex
    }
    
    // 拦截器:读写属性
    get age(){ return this._age }
    set age(n){ this._age = n }
    
    // 类方法
    getName(){return `My name is ${this.name}`}

    // 静态方法
    static getAge(){ return this.age}
}

let man = new PERSON('完金',18,'male')
// 调用静态方法
PERSON.getAge();

私有属性 ES6暂未提供私有属性,默认使用#开头表示私有属性

`私有属性`
class PERSON{
    #count;
}

私有方法ES6暂未提供,默认使用_下划线开头表示私有方法

// 写法一: 用方法名区分,私有方法下划线开头
class PERSON{
    _resetName(){}  // 私有方法
}

// 写法二:私有方法名用Symbol
const _resetName = Symbol('_resetName')
class PERSON{
    [_resetName](){}
}

// 写法三:私有方法移除class
function _resetName(){}
class PERSON{
    _resetName(){
        _resetName.call(this)
    }
}

继承 extends

class PERSON{
    constructor(name){
        this.name = name;
    }
}
class MALE extends PERSON{
    constructor(name,sex){
        super(name);    // 调用父类constructor,必须调用
        this.sex = sex;
    }
}
`Object.getPrototypeOf()`
// 从子类获取父类;判断一个类是否继承自另一个类

类内部获取自身new.target

`new.target`
// 返回类本身,若存在子类时,则返回子类
// 利用这个特点,可以写出不能独立使用、必须继承后才能使用的类。
class PERSON {
    constructor(){
        // new.target===PERSON
        if(new.target === PERSON){ 
            throw new Error('本类不能实例化')
        }
    }
}
class MALE extends PERSON {
    constructor(){
        super();
    }
}

实战中使用私有属性与私有方法

// 以下是user.js文件的内容
// 私有属性
let state = {
    sex:1
}
// 私有属性
const SEX = [
    {code:0, label:'male'},
    {code:1, label:'female'},
]

// 私有方法
let setSex = sex => ({...state, sex})
let getSex = ()=>{
    let sex = SEX.filter(item=>item.code===state.sex)[0]
    return sex ? sex.label : ''
}

// USER类定义
class USER {
    // 成员属性
    full_name
    sex
    constructor(name){
        this.full_name = name
    }

    setSex(sex){
        setSex(sex)
        this.sex = getSex()
    }
}

// 实例user
let user = new USER('WJ')
// 设置sex
user.setSex(1)

console.log(user) // 输出:USER {full_name: "WJ", sex: "female"}

双向绑定

// 私有属性
let state = {}
let events = {}

class USER {
    constructor(name) {
        this.set('name', name)
    }

    get(key) {
        return state[this] && state[this][key]
    }

    set = (key, value, notify=true) => {
        // 创建当前实例的数据空间
        if (!state[this])
            state[this] = {}

        state[this][key] = value;

        if(notify)
            this.trigger('change:'+key,value)
    }

    on(event, callback){
        if(!events[event])
            events[event] = []

        events[event].push(callback)
    }

    trigger(event, params=[]){
        let evts = events[event]

        if(Array.isArray(evts))
            evts.forEach(callback=>{
                if(typeof callback === 'function'){

                    if(Array.isArray(params))
                        callback.apply(this, params)
                    else
                        callback.call(this,params)
                }
            })

    }



}



let user = new USER('WJ')
user.on('change:name',value=>{
    console.log('aa',value)
})

setTimeout(()=>{
    user.set('name', '1s after')
},1000)


setTimeout(()=>{
    user.set('name', '3s after')
},3000)




相关文章

网友评论

      本文标题:【JS ES6】Class

      本文链接:https://www.haomeiwen.com/subject/jyrtcctx.html