ES6快速入门 - 对象代理

这里写图片描述
1.es3数据保护

    // ES3,ES5  数据保护
    var Person = function(){
        var data = {                                //  局部作用域,保护数据
            name : 'es3',
            sex : 'male',
            age : 15
        }
        // 暴露给外部
        this.get = function(key){
            return data[key];
        }
        this.set = function(key,value){
            if(key != 'sex'){
                data[key]= value;
            }
        }
    }

    // 声明一个实例
    var person = new Person();
    // 读取
    console.log(`name = ${person.get('name')}`);
    console.log(`sex = ${person.get('sex')}`);
    console.log(`age = ${person.get('age')}`);
    // 修改
    person.set('name','es3-cname');
    console.log(`name = ${person.get('name')}`);
    console.log(`sex = ${person.get('sex')}`);
    console.log(`age = ${person.get('age')}`);

    person.set('sex','female');
    console.log(`name = ${person.get('name')}`);
    console.log(`sex = ${person.get('sex')}`);
    console.log(`age = ${person.get('age')}`);

这里写图片描述

2.es5数据保护

// ES5
var Person = {
    name : 'es5',
    age :15
};

Object.defineProperty(Person,'sex',{
    writable:false,                 //  只读
    value:'male'
});
console.log(`name:${Person.name}`);
console.log(`age:${Person.age}`);
console.log(`sex:${Person.sex}`);
Person.name = 'es5-cname';
console.log(`name:${Person.name}`);
console.log(`age:${Person.age}`);
console.log(`sex:${Person.sex}`);
try{
    Person.sex = 'female';
    console.log(`name:${Person.name}`);
    console.log(`age:${Person.age}`);
    console.log(`sex:${Person.sex}`);
}catch(e){
    console.log(e);
}

这里写图片描述

3.ES6数据保护

// ES6数据保护 - 对象代理
let Person = {
    name : 'es6',
    sex : 'male',
    age : 15
};

// 代理Person
// person是暴露给用户操作的对象,Person是原始数据对象
let person = new Proxy(Person,{
    get(target,key){                    //  读操作,target指代理的数据,这里指Person.key为对象属性
        console.log('target= ',target);
        console.log(`key = ${key}`);
        return target[key];             //  返回数据    
    },
    set(target,key,value){
        if(key != 'sex'){
            target[key] = value;
        }
    }
});

console.log(`name:${person.name}`);
console.log(`sex:${person.sex}`);
console.log(`age:${person.age}`);

// 修改
try{
    person.sex = 'female';
    console.log(`sex:${person.sex}`);
}catch(e){
    console.log(e);
}

这里写图片描述

猜你喜欢

转载自blog.csdn.net/zjsfdx/article/details/80043862
今日推荐