Object.defineProperty

这个方法是es5中新增的方法,之前没了解过,粗略的看了一下也没发现什么特别的用处。然后今天仔细的研究了一下,发现这个方法简直是自己造轮子的必要的方法。

先放最简单的代码示例:

var John = {};
Object.defineProperty(John,"age",{
  value: 23
})
console.log(John.age);  //23

我刚开始看到这种例子的时候。。我的内心也是绝望的,这es5新出的都是什么,这干嘛不直接John.age = 23不就完事了么。然后我就把页面关掉了。。(不要怪我没耐心,我当时确实没上什么心。。)

好了,开始正式介绍这个方法。

defineProperty方法总共需要传入三个参数。第一个目标对象,第二个属性名称,第三个是特性descriptor。

第一第二个不用说,第三个中间又分如下几个值:

value:           属性对应的值

writable:       如果为false,属性的值不可变

configurable  如果为false,该对象的所有desriptor均不可变(包括赋值)

enumerable   是否能在for..in..循环中被遍历出来(感觉像是是否public的感觉)

get/set         这两个是重点,也就是我对这个方法推崇,以及认为必须要学习记住的原因。


下面详细阐述get、set方法:

在descriptor中不能同时设置访问器(get和set)和wriable或value,否则会错,就是说想用get和set,就不能用writable或value中的任何一个。

var John = {}
Object.defineProperty(John,"nickName",{
  set:function(newValue){
    console.log("我新的昵称是"+newValue);
  },
  get:function(){
    console.log("有人问了/看了我的昵称");
    return "二狗子";            // 这里我随意返回了一个字符串
   }
})
John.nickName = "哈哈";         // 我新的昵称是哈哈
console.log(John.nickName);     // 有人问了/看了我的昵称
                                // 二狗子

好吧其实东西不多,但是这个方法就是各种框架中的observe的底层实现。即使平时自己使用也很方便。

原文地址:https://www.cnblogs.com/neuscx/p/6306616.html