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
})

 

来源：https://www.cnblogs.com/xue-shuai/p/11539674.html