类定义/调用
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)
网友评论