js中的get和set

get和set方法

let user{
    name:'jay',
    age:22,
    _age:22,
get age(){
   console.log('年龄被读取了');
   return this._age;
},
set age(value){
    this._age=value;
    console.log(this._age);
},
}
console.log(user.age);
 user.age = 24

ps: this.属性名 必须改名 如果set和get方法属性名与 this.属性名相同 会出现递归

2.es6语法:

    class Num{
        constructor(){
            let num=9;
            this._num=num;
    }
        get num(){
            return this._num;
    }
        set num(value){
            this._num=value;
    }
    }
    let s=new Num();
    console.log(s.num);      //9
    s.num=99;
    console.log(s.sum);     //99

3. vue中的get和set:

    let{
        name:'jay',
        age:40,
    }
    function Observer(obj){
        const key=Object.keys(obj);    //提取对象中所有属性作为数组
        key.forEach((k)=>{
        Object.defineProperty(this,k,{ //this指向Observer 并非data
            get(){
                console.log('数据被读取了');
                return obj[k];
        },
            set(val){
                console.log('数据被修改了');
                obj[k]=val;
                console.log(obj[k]);
        }
        })
     })
    }
      //创建一个监视实例对象
    const obs=Observer(data);
    obs.name='j';
    obs.age=20;