javaScript中的set和get访问器属性

关于set和get

   在对象中通常有属性和方法,属性通过等于号来赋值,存储数据,并且可以直接获取数据，属性不能连缀，只能存储值，不能再存储时调用其他方法。
方法必须使用括号执行，可以传入参数，也可以返回结果（也可以不返回结果)，但是不能存储数据，方法可以连缀，方法中执行多个语句调用其他内容。

Getters和Setters使你可以快速获取或设置一个对象的数据。

• get/set访问器不是对象的属性，而是属性的特性。大家一定要分清楚。特性只有内部才用，因此在javaScript中不能直接访问他 们。
• setter和getter IE8以上支持
• 在创建对象时写入set和get的方法
• 删除getter或setter的唯一方法：delete object[name]
• set和get是介于属性和方法之间的特性
• 属性的特性 属性通过等号赋值，存储数据，并且可以直接获取数据,属性不能连缀
• 属性只能存储值，不能再存储时调用其他方法或者执行其他的语句

通过案例来理解set和get

• 例如：当我们想输入的obj.a<10时，打印aaa，如果输入20，打印bbb，赋值的同时并且判断条件,同时输出内容，这时候我们不论是使用对象的方法还是属性都无法做到，这时候我们就可以通过set和get来实现我们的需求。

var obj={
	_step:1,
	set step(value){
		if(value<10){
			console.log("aaaa");
		}else{
			console.log("bbb");
		}	
		this._step=value;
	},
	get step(){
		return this._step;
	}
}	

obj.step=10;  

• 在我们赋值的时候,obj会自动调用set方法,并且使用 = 赋值只能赋值一个,因此set step()的形参必须要有,且仅能有一个。这个value就是接收我们赋值的结果。
• get 会在我们调用获取时才会触发。也就是说如果只有get方法，没有set方法，那么这个属性是只读属性不能修改。如果只有set没有get 方法，那么就不能获取只能设置。
• ES6中无法写静态常量，我们可以通过单独使用get方法那么这个属性只可读不能修改的特性，返回一个常量来使用。

  class Box{
            constructor(){

            }
            static get NUM(){
                return 10;
            }
            play(){
                // Box.NUM=100;   这里不能修改
                console.log(Box.NUM);
            }
        }

        var b=new Box();
        b.play();

set和get的写法

• 这是在创建对象时写入set和get

var obj={
     _num:1,
     set num(value){
       this._num=value;
     },
     get num(){
       return this._num;
     }
}     

//第二种写法

• 在已有的对象中添加set和get 的方法

//ES5中
var o1={_step:1};
Object.defineProperty(o1,"setp",{
	enumerable:true,
    configurable:true,
    set:function(value){    //ES6中可以直接写成set(value){}  get(){}的形式
       this._step=value;
    },
    get:function(){
       return this._step;
    }
})     

• 在ES6的类中的set和get

class Box{
	_step=1;
	constructor(){
		
	}
	set step(value){
		this._step=value;
	}
	get step(){
		return	this._step;
	}
}

总 结

 在vue的双向绑定中就是使用set和get加上发布订阅模式来写的。

• 如果你不够理解，请思考下面代码：

	if(a===1&&a===2&&a===3) console.log("ok");   //如何使控制台打印ok呢