浅谈JavaScript对象添加getter与setter的5种方法

时间  2019-11-09
标签 浅谈 javascript 对象 添加 getter setter 方法 栏目 JavaScript 繁體版
原文   原文链接

定义 getter 与 setter前端

1.经过对象初始化器在建立对象的时候指明（也能够称为经过字面值建立对象时声明）chrome

(function () {
  var o = {
    a : 7,
    get b(){return this.a +1;},//经过 get,set的 b,c方法间接性修改 a 属性
    set c(x){this.a = x/2}
  };
  console.log(o.a);
  console.log(o.b);
  o.c = 50;
  console.log(o.a);
})();

在 chrome 中调试视图以下： 能够看到对象下多了 get 属性以及 set 属性 输出结果以下： 固然 get 语句与set语句能够声明屡次用来对应多个 getter 和 setter 使用这种方法的好处是能够在声明属性的时候同时声明对应的 getter 和 setter 这里就有人问了，能不能将o 对象的 get 及 set 方法的方法名都改为 “a”,这样就能够直接经过“.”来访问方法直接操做浏览器

(function () {
  var o = {
    a : 7,
    get a(){return this.a +1;},//死循环
    set a(x){this.a = x/2}
  };
  console.log(o.a);
  console.log(o.b);
  o.c = 50;
  console.log(o.a);
})();

打开 chrome 查看建立后的视图以下： 函数

前端全栈学习交流圈：866109386,面向1-3经验年前端开发人员,帮助突破技术瓶颈，提高思惟能力 群内有大量PDF可供自取，更有干货实战项目视频进群免费领取。学习

能够看到这个时候的 get 与 set 方法已经和上面不一样，可是是否真的能起做用呢，答案是否认的，当咱们经过 o.a 调用的是 get语句 声明的 a方法，进入到该方法后遇到 this.a 方法继续调用该方法造成死循环最终致使死循环报内存溢出错误。优化

新语法(ES6)：暂时只有 firefox 支持，其余浏览器会报错this

(function () {
  var b = "bb";
  var c = "cc";
  var o = {
    a : 7,
    get [b](){return this.a +1;},
    set [c](x){this.a = x/2},
  };
  console.log(o.a);
  console.log(o[b]);
  o["cc"] = 50;
  console.log(o.a);
})();

打开 firefox 查看调试： firefox

前端全栈学习交流圈：866109386,面向1-3经验年前端开发人员,帮助突破技术瓶颈，提高思惟能力 群内有大量PDF可供自取，更有干货实战项目视频进群免费领取。prototype

输出结果以下： 3d

2.使用 Object.create 方法

引用 MDN：

概述 Object.create() 方法建立一个拥有指定原型和若干个指定属性的对象。 语法 Object.create(proto, [ propertiesObject ])

咱们都知道使用 Object.create 方法传递一个参数的时候能够建立一个以该参数为原型的对象 浅谈 JS 建立对象的 8 种模式 第二个参数是可选项，是一个匿名的参数对象，该参数对象是一组属性与值，该对象的属性名称将是新建立的对象的属性名称，值是属性描述符（包扩数据描述符或存取描述符，具体解释看后面的内容 什么是属性描述符）。 经过属性描述符咱们能够实现为新建立的对象添加 get 方法以及 set 方法

(function () {
  var o = null;
  o = Object.create(Object.prototype,//指定原型为 Object.prototype
      {
        bar:{
          get :function(){
            return 10;
          },
          set : function (val) {
            console.log("Setting `o.bar` to ",val);
          }
        }
      }//第二个参数
    );
  console.log(o.bar);
  o.bar = 12;
})();

在 chrome 中调试试图以下：

能够看到新建立对象通用多了 get 以及 set 属性 输出结果以下： 上面这个例子并无用来针对的 get 方法以及 set 方法使用的属性

(function () {
  var o = null;
  o = Object.create(Object.prototype,//指定原型为 Object.prototype
      {
        bar:{
          get :function(){
            return this.a;
          },
          set : function (val) {
            console.log("Setting `o.bar` to ",val);
            this.a = val;
          },
          configurable :true
        }
      }//第二个参数
    );
  o.a = 10;
  console.log(o.bar);
  o.bar = 12;
  console.log(o.bar);
})();

亦或：

(function () {
  var o = {a:10};
  o = Object.create(o,//指定原型为 o 这里实际能够理解为继承
      {
        bar:{
          get :function(){
            return this.a;
          },
          set : function (val) {
            console.log("Setting `o.bar` to ",val);
            this.a = val;
          },
          configurable :true
        }
      }//第二个参数
    );
  console.log(o.bar);
  o.bar = 12;
  console.log(o.bar);
})();

输出结果以下： 使用这种方式的好处是可配置性高，但初学者容易迷糊。

3.使用 Object.defineProperty 方法

引用 MDN：

概要 Object.defineProperty() 方法直接在一个对象上定义一个新属性，或者修改一个已经存在的属性， 并返回这个对象。 语法 Object.defineProperty(obj, prop, descriptor) 参数 obj 须要定义属性的对象。 prop 需被定义或修改的属性名。 descriptor 需被定义或修改的属性的描述符。

(function () {
  var o = { a : 1}//声明一个对象,包含一个 a 属性,值为1
  Object.defineProperty(o,"b",{
    get: function () {
      return this.a;
    },
    set : function (val) {
      this.a = val;
    },
    configurable : true
  });
 
  console.log(o.b);
  o.b = 2;
  console.log(o.b);
})();

这个方法与前面两种的区别是：使用前面两种只能在声明定义的时候指定 getter 与 setter，使用该方法能够随时的添加或修改。

若是说须要一次性批量添加 getter 与 setter 也是没问题的，使用以下方法：

4.使用 Object.defineProperties方法

MDN：

概述 Object.defineProperties() 方法在一个对象上添加或修改一个或者多个自有属性，并返回该对象。 语法 Object.defineProperties(obj, props) 参数 obj 将要被添加属性或修改属性的对象 props 该对象的一个或多个键值对定义了将要为对象添加或修改的属性的具体配置

不难看出用法与 Object.defineProperty 方法相似

(function () {
  var obj = {a:1,b:"string"};
  Object.defineProperties(obj,{
    "A":{
      get:function(){return this.a+1;},
      set:function(val){this.a = val;}
    },
    "B":{
      get:function(){return this.b+2;},
      set:function(val){this.b = val}
    }
  });
 
  console.log(obj.A);
  console.log(obj.B);
  obj.A = 3;
  obj.B = "hello";
  console.log(obj.A);
  console.log(obj.B);
})();

输出结果以下：

5.使用 Object.prototype.defineGetter 以及 Object.prototype.defineSetter 方法

(function () {
  var o = {a:1};
  o.__defineGetter__("giveMeA", function () {
    return this.a;
  });
  o.__defineSetter__("setMeNew", function (val) {
    this.a = val;
  })
  console.log(o.giveMeA);
  o.setMeNew = 2;
  console.log(o.giveMeA);
})();

输出结果为1和2 查看 MDN 有以下说明：

什么是属性描述符

MDN：

对象里目前存在的属性描述符有两种主要形式：数据描述符和存取描述符。

  • 数据描述符是一个拥有可写或不可写值的属性。

  • 存取描述符是由一对 getter-setter 函数功能来描述的属性。

  • 描述符必须是两种形式之一；不能同时是二者。

数据描述符和存取描述符均具备如下可选键值：

configurable 当且仅当这个属性描述符值为 true 时，该属性可能会改变，也可能会被从相应的对象删除。默认为 false。 enumerable true 当且仅当该属性出如今相应的对象枚举属性中。默认为 false。

数据描述符同时具备如下可选键值：

value 与属性相关的值。能够是任何有效的 JavaScript 值（数值，对象，函数等）。默认为 undefined。 writable true 当且仅当可能用 赋值运算符 改变与属性相关的值。默认为 false。

存取描述符同时具备如下可选键值：

get

一个给属性提供 getter 的方法，若是没有 getter 则为 undefined。方法将返回用做属性的值。默认为 undefined。 set 一个给属性提供 setter 的方法，若是没有 setter 则为 undefined。该方法将收到做为惟一参数的新值分配给属性。默认为 undefined。

以上是摘自MDN的解释，看起来是很晦涩的，具体什么意思呢： 首先咱们从以上解释知道该匿名参数对象有个很好听的名字叫属性描述符，属性描述符又分红两大块：数据描述符以及存取描述符（其实只是一个外号，给指定的属性集合起个外号）。

数据描述符包括两个属性 : value 属性以及 writable 属性，第一个属性用来声明当前欲修饰的属性的值，第二个属性用来声明当前对象是否可写便是否能够修改

存取描述符就包括 get 与 set 属性用来声明欲修饰的象属性的 getter 及 setter

属性描述符内部，数据描述符与存取描述符只能存在其中之一，可是不论使用哪一个描述符均可以同时设置 configurable 属性以及enumerable 属性。 configurable属性用来声明欲修饰的属性是否可以配置，仅有当其值为 true 时，被修饰的属性才有可能可以被删除，或者从新配置。 enumerable 属性用来声明欲修饰属性是否能够被枚举。

知道了什么是属性描述符，咱们就能够开始着手建立一些对象并开始配置其属性

建立属性不可配置不可枚举的对象

//使用默认值配置
(function () {
  var obj = {};//声明一个空对象
  Object.defineProperty(obj,"key",{
    value:"static"
            //没有设置 enumerable 使用默认值 false
            //没有 configurable 使用默认值 false
            //没有 writable 使用默认值 false
  });
 
  console.log(obj.key);      //输出 “static”
  obj.key = "new"         //尝试修改其值,修改将失败,由于 writable 为 false
  console.log(obj.key);      //输出 “static”
  obj.a = 1;//动态添加一个属性
  for(var item in obj){ //遍历全部 obj 的可枚举属性
     console.log(item);
  }//只输出一个 “a” 由于 “key”的 enumerable为 false
})();

前端全栈学习交流圈：866109386,面向1-3经验年前端开发人员,帮助突破技术瓶颈，提高思惟能力 群内有大量PDF可供自取，更有干货实战项目视频进群免费领取。

//显示配置 等价于上面
(function () {
  var obj = {};
  Object.defineProperty(obj,"key",{
    enumerable : false,
    configurable : false,
    writable : false,
    value : "static"
  })
})();
//等价配置
(function () {
  var o = {};
  o.a = 1;
  //等价于
  Object.defineProperty(o,"a",{value : 1,
                writable : true,
                configurable : true,
                enumerable : true});
   
  Object.defineProperty(o,"a",{value :1});
  //等价于
  Object.defineProperty(o,"a",{value : 1,
                writable : false,
                configurable : false,
                enumerable : false});
})();

Enumerable 特性

属性特性 enumerable 决定属性是否能被 for...in 循环或 Object.keys 方法遍历获得

(function () {
  var o = {};
  Object.defineProperty(o,"a",{value :1,enumerable :true});
  Object.defineProperty(o,"b",{value :2,enumerable :false});
  Object.defineProperty(o,"c",{value :2});//enumerable default to false
  o.d = 4;//若是直接赋值的方式建立对象的属性,则这个属性的 enumerable 为 true
 
  for(var item in o){ //遍历全部可枚举属性包括继承的属性
    console.log(item);
  }
 
  console.log(Object.keys(o));//获取 o 对象的全部可遍历属性不包括继承的属性
 
  console.log(o.propertyIsEnumerable('a'));//true
  console.log(o.propertyIsEnumerable('b'));//false
  console.log(o.propertyIsEnumerable('c'));//false
})();

输出结果以下： Configurable 特性

(function () {
  var o = {};
  Object.defineProperty(o,"a",{get: function () {return 1;},
                configurable : false} );
                //enumerable 默认为 false,
                //value 默认为 undefined,
                //writable 默认为 false,
                //set 默认为 undefined
                  
  //抛出异常,由于最开始定义了 configurable 为 false,故后期没法对其进行再配置
  Object.defineProperty(o,"a",{configurable : true} );
  //抛出异常,由于最开始定义了 configurable 为 false,故后期没法对其进行再配置,enumerable 的原值为 false
  Object.defineProperty(o,"a",{enumerable : true} );
  //抛出异常,由于最开始定义了 configurable 为 false,set的原值为 undefined
  Object.defineProperty(o,"a",{set : function(val){}} );
  //抛出异常,由于最开始定义了 configurable 为 false,故没法进行覆盖,尽管想用同样的来覆盖
  Object.defineProperty(o,"a",{get : function(){return 1}});
  //抛出异常，由于最开始定义了 configurable 为 false,故没法将其进行从新配置把属性描述符从存取描述符改成数据描述符
  Object.defineProperty(o,"a",{value : 12});
 
  console.log(o.a);//输出1
  delete o.a;   //想要删除属性,将失败
  console.log(o.a);//输出1
   
})();

提升及扩展

1.属性描述符中容易被误导的地方之 writable 与 configurable

(function () {
  var o = {};
  Object.defineProperties(o,{
    "a": {
      value:1,
      writable:true,//可写
      configurable:false//不可配置
      //enumerable 默认为 false 不可枚举
    },
    "b":{
      get :function(){
        return this.a;
      },
      configurable:false
    }
  });
  console.log(o.a);  //1
  o.a = 2;      //修改值成功,writable 为 true
  console.log(o.a);  //2
  Object.defineProperty(o,"a",{value:3});//一样为修改值成功
  console.log(o.a);  //3
 
  //将其属性 b 的属性描述符从存取描述符从新配置为数据描述符
  Object.defineProperty(o,"b",{value:3});//抛出异常,由于 configurable 为 false
})();

前端全栈学习交流圈：866109386,面向1-3经验年前端开发人员,帮助突破技术瓶颈，提高思惟能力 群内有大量PDF可供自取，更有干货实战项目视频进群免费领取。

2.经过上面的学习，咱们都知道传递属性描述符参数时，是定义一个匿名的对象，里面包含属性描述符内容，若每定义一次便要建立一个匿名对象传入，将会形成内存浪费。故优化以下：

(function () {
  var obj = {};
 
  //回收同一对象,即减小内存浪费
  function withValue(value){
    var d = withValue.d ||(
      withValue.d = {
        enumerable : false,
        configurable : false,
        writable : false,
        value :null
      }
      );
    d.value = value;
    return d;
  }
  Object.defineProperty(obj,"key",withValue("static"))
})();
相关文章
相关标签/搜索
每日一句
    每一个你不满意的现在，都有一个你没有努力的曾经。
本站公众号
   欢迎关注本站公众号,获取更多信息
联系我们 最近搜索 最新文章 沪ICP备13005482号-10 MyBatis教程 SQL 教程 MySQL教程 Java 教程 Thymeleaf 教程 Hibernate教程 Spring教程 Redis教程