JS-对象访问器（getter/setter）

为了更细粒度的控制对象的属性，可为对象属性配置getter和setter，已达到对属性合法性的进一步检测

//内部构造函数创建对象
const date=new Date() //最常用的
console.log(date.valueOf())  //时间戳 用来刷新
console.log(Date.now())

const num=Number(1)
console.log(num.valueOf())

const reg=new RegExp(/\d+/)
console.log(reg.test('11'))

const fun=new Function('name','age',`
    this.name=name
    this.age=age
    this.show=function(){
        console.log(this.name +'=='+this.age)
    }
`)
const func=new fun('xiaomu',28)
console.log(func.valueOf())
func.show()

使用访问器为对象扩展新的属性，以满足业务需求，可以封装复杂的业务逻辑，提供统一简洁的接口

`use strict`
const blogs = {
    list: [
        { title: 'vue', count: 200 },
        { title: 'react', count: 100 },
        { title: 'js', count: 11 }
    ],
    get total() { //通过get关键字扩展新属性 属性名为total
        return this.list.reduce((res, item) => res + item.count, 0)
    }
}
console.log(blogs.total)

使用访问器可以批量为属性赋值，可同时处理多个属性，提供更快捷的属性读写方式

`use strict`
//批量为属性赋值，提供更快捷的方式
const user={
    fistName:'xiaomu',
    lastname:'guizhi',
    get name(){
        return `${this.fistName} ${this.lastname}`
    },
    set name(val){
      [this.fistName,this.lastname]=val.split(' ')
    }
}
console.log(user.name)

user.name='xxxxxxx YYYY'
console.log(user.fistName)
console.log(user.lastname)

使用访问器可配置上下文请求的token值，以更优雅的方式实现token的存储

//Token处理
const request = {
    get token() {
        const token = localStorage.getItem('TOKEN')
        if (!token) {
            alert('请登录')
        }
        return token
    },
    set token(val) {
        localStorage.setItem('TOKEN', val)
    },
}

request.token = '1110110'

console.log(request.token)

当对象中同时存在和访问器同名属性是，访问器的优先级高于同名属性（严格模式下不能定义同名属性），建议将同名属性移到Symbol标记属性中

`use strict`
//访问器优先级
const DATA=Symbol('data')
const user={
    [DATA]:{name:'xiamu'},
    get name(){
        return  this[DATA].name
    },
    set name(val){
        this[DATA].name=val
    }
}
console.log(user.name)

user.name='xiamu guizhi'
console.log(user.name)
console.log(user[Symbol('data')])

使用Object.definePropertyies()在构造函数中使用访问器

`use strict`
//Object.definePropertyies()在一个对象上定义新的属性，并返回对象
function User(name, age) {
    const item = { name, age }
    Object.defineProperties(this,
        {
            name: {
                get() {
                    console.log('get')
                    return item.name
                },
                set(val) {
                    console.log('set')
                    if (!val) {
                        throw new Error('用户名不能为空')
                    }

                }
            },
            age: {
                get() {
                    return item.age
                },
                set(val) {
                    if (typeof val !== 'number') {
                        throw new Error('年龄必须为数字！')
                    }
                    item.val = val
                }
            }

        }
    )
}
const user1=new User('xx',12)
console.log(user1.name)

delete user1.age

console.log(user1.age)

ES6中的类（class）其实只是一堆访问器的语法糖而已

`use strict`
class User {
    constructor(name, age) {
        this.data = { name, age }
    }
    set name(val) {
        if (!val) {
            throw new Error('用户名不能为空！')
        }
        this.data.name = val
    }
    get name() {
        return this.data.name
    }
    set age(val) {
        if (!val) {
            throw new Error('age不能为空！')
        }
        this.data.age = val
    }
    get age() {
        return this.data.age
    }
}
const user1 = new User('xx')
console.log(user1.name, user1.age)

数据监听的实现

/遍历对象 通过definePropertype重新走get set 方法，进而可以达到 在设置变量 获取变量的时候起到监听作用

const person = {
    name: 'xx',
    age: 11,
    address: '熊本'
}

//响应式
function defineReactive(obj, key, val) {
    Object.defineProperty(obj, key, {
        get() {
             
            return val
        },
        set:function(newVal) {
            console.log('在操作我哦')
            val = newVal
        }
    })
}
Object.keys(person).forEach(item=>{
    defineReactive(person,item,person[item])
})
console.log("person color:" + person.name);

最后编辑于：2020.06.21 07:52:31