JavaScript：初识setter与getter

对象文字语法
getter是一个隐藏函数，会在获取属性值时调用。

let obj = {
    get a(){
        console.log('当a被get时执行')
        return 2;		
    },
}
console.log(obj.a)  //当a被get时执行   2

setter也是一个隐藏函数，会在设置属性值时调用。

let obj = {
    set a(val){  //传参
        console.log('当a被set时执行');
		this.c = val;
    }
}
obj.a = 2;  //当a被set时执行
console.log(obj.c)  //2

 

definePropertype显式定义

let obj = {}
Object.defineProperty(obj,'b',{
    get: function(){
        return 7
    },
    enumerable: true  //可枚举
})
console.log(obj.b) //7

let obj = {} 
Object.defineProperty(obj,'b',{
    set: function(val){
        return this.c = val*val
    },
})
obj.b = 4;
console.log(obj.c) //16

结合使用

let obj = {
    get a(){
        return 2;  
    },
    set a(val){
        this.b = 9
    }
}
Object.defineProperty(obj,'c',{
    get: function(){
        return 7
    },
    set: function(val){
		this.d = val*val*val;
	}
})
console.log(obj.a); //2
obj.a = 1;
console.log(obj.b); //9
console.log(obj.a); //2
console.log(obj.c); //7
obj.c = 3;
console.log(obj.d); //27
console.log(obj.c); //7

Vue非常巧妙的运用了Object.defineProperty这个方法。其中，数据劫持是通过Object.defineProperty()中的get和set方法实现的。