JavaScript之EcmaScript5中geter和setter_ecma get关键字-优快云博客

我在搞懂JavaScript的getter和setter之前，通过百度搜索在网上看了很多别人写的文章，个人的内心是表示很气愤的，因为大家都是一知半解，很多博主都并没有真正的理解这个语法的用处。虽然getter和setter的意思是这样，但是它的意义并不是局限于此。

先说下网上大部分人的理解：

   function  Person(){
      var  _personName="anonymous";

      //传统意义的getter
      this.getName=function(){
        return _personName;
      }

      //传统意义的setter 
      this.setName=function(name){
          _personName=name;
        
      }
   }


  var  person=new Person();

  person.getName();

  person.setName();

根据闭包的特性，外部是无法访问到_personName的。我们要进行_personName的相应操作，只能通过getName和setName进行，由于我们可以在setName中定义拦截器，假如传入的数据不满足要求，我们可以不需要改变_personName的值。

这个getter和setter的用法必须通过函数的形式调用，而我们是没法直接person.setName='张三李四王麻子';这样的操作的。一定程度上使用时比较麻烦的，而且使用具有一定的局限性。

ECMAScript5中引入了get和set关键字。可以算得上是传统意义的gettersetter的语法糖，这样我们给函数赋值或者使用函数取值的时候就像使用属性一样，提高了便利性。

其有两种使用方法。

方法1：

var obj={
      _val:false
    };

    Object.defineProperty(obj,"val",{
      get:function(){
        return this._val;
      },set:function(val){

      if (typeof val!=="number") {
        return;
      }

      this._val=val;
    }});

其中Object.defineProperty的用法请大家自行百度，它具有很多语法特性，对于编写健壮的JavaScript程序有一定的意义。

其中，需要注意的是，get函数返回的是_val而不是val，set函数修改的是_val而不是val。如果熟悉C#语法的朋友一定就恍然大悟了，这就是C#里面类的字段嘛，我个人是这样认为的。

有了get和set关键字，我们可以直接进行这样的操作obj.val='Hello world'; console.log(obj.val);这样的好处是可以不用通过函数调用的形式使用，具有很强的灵活性。

于是当我们为obj.val赋值以后，我们可以在里面定义某些观察器，然后通知代码做事情，这就是大名鼎鼎的Vuejs内部实现双向数据绑定的原理，而相比Angularjs1.x的脏值检测，大大的提高了效率（尤其是对于树形结构的对象，Angularjs检测起来相当的消耗资源）。

还有一种写法：

  var objTest={
      name:"yanxgu",
      get Name(){
        return this.name;
      },
      set Name(name){
        this.name=name;
      }
    }

在搞懂了getter和setter之后，我们便可以定义自己的数据观察器对象了。

写到这儿还没有完，另一个问题引发了我的思考，因为大家可以看出_val是定义在obj上的，也就是说它是直接对外暴露的，外界可以不用通过取值器和赋值器直接拿到这个值这样显然不好，可是解决方案由于鄙人水平有限，尚待研究，各位大大不喜勿喷，谢谢。

JavaScript之EcmaScript5中geter和setter

相关推荐