ES三、ES五、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
})