ES3、ES5、ES6对象代理的写法差异

ES3的写法:

console.log('定义私有变量ES3写法:')
// ES3
var Person = function (){
    var data = {
        name:'ES3',
        age:14,
        sex:'nv'
    }
    // 读API
    this.get = function(key){
        return data[key]
    }
    // 写API
    this.set = function(key,value){
        if(key !== 'sex'){
            data[key] = value
        }
    }
}
// 声明一个实例
var person = new Person();
// 读取 console.table({name:person.get('name'),age:person.get('age'),sex:person.get('sex')});
// 修改
person.set('name','c-ES3')      // 修改name为c-ES3
console.table({name:person.get('name'),age:person.get('age'),sex:person.get('sex')});
person.set('sex','nan')         // 修改sex为nan         修改失败,因为被设置了保护
console.table({name:person.get('name'),age:person.get('age'),sex:person.get('sex')});

ES5的写法:

console.log('定义私有变量ES5写法:')
// ES5
var Person = {
   name:'ES5',
   age:14
}
// 设置保护,不可被写
Object.defineProperty(Person,'sex',{
   writable:false,
   value:'nv'
})
// 读取
console.table({
   name:Person.name,
   age:Person.age,
   sex:Person.sex
})
// 修改
Person.name = 'c-ES5'       // 修改name为c-ES5
   console.table({
   name:Person.name,
   age:Person.age,
   sex:Person.sex
})
Person.sex = 'nan'          // 修改sex为nan         修改失败,因为被设置了保护
console.table({
    name:Person.name,
    age:Person.age,
    sex:Person.sex
})

ES6的写法:

console.log('定义私有变量ES6写法:')
let Person1 = {
    name:'ES6',
    age:14,
    sex:'nv'
}
// 设置对象代理
let person1 = new Proxy(Person1,{
    // 读
    get(target,key){
        return target[key]
    },
    // 写
    set(target,key,value){
        if(key !== 'sex'){
           target[key] = value
        }
    }
});
// 读取
console.table({
    name:person1.name,
    age:person1.age,
    sex:person1.sex
})
// 修改name为c-ES6
person1.name = 'c-ES6'
console.table({
    name:person1.name,
    age:person1.age,
    sex:person1.sex
})
// 修改sex为nan         修改失败,因为被设置了保护
person1.sex = 'nan'
console.table({
    name:person1.name,
    age:person1.age,
    sex:person1.sex
})

 

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

前端薛小帅

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值