随笔- 60 文章- 0 评论- 15 阅读- 14万

Object.defineProperty方法（详解）

一、Object.defineProperty()的作用就是直接在一个对象上定义一个新属性，或者修改一个已经存在的属性,并返回此对象。

二、Object.defineproperty()方法需要传递3个参数

　　 Object.defineproperty（obj, prop, desc ）

　　　参数1：obj 属性所在的对象

　　　参数2：prop 属性名

　　　参数3：desc 全称descriptor，描述符一般是一个对象

　　一般通过为对象的属性赋值的情况下，对象的属性可以修改也可以删除，但是通过Object.defineProperty()定义属性，通过描述符的设置可以进行更精准的控制对象属性

value:"苏有朋", // 包含这个属性的数据值。默认值为undefined
enumerable:true, //控制属性是否可以枚举，能否通过(for ...in, Object.keys方法)循环访问属性，默认值为false
writable:true, //控制属性是否可以被修改，默认值是false
configurable:true //控制能否通过delete删除属性从而重新定义属性，能否修改属性的特性，或者能否把属性修改为访问器属性，默认值为false。

Object.prototype
Object.create(null)
__proto__
null

// 使用 __proto__
var obj = {};
var descriptor = Object.create(null); // 没有继承的属性
// 默认没有 enumerable，没有 configurable，没有 writableObject.defineProperty(person,'name',{
　　value:"苏有朋", // 包含这个属性的数据值。默认值为undefined
　　enumerable:true, //控制属性是否可以枚举，能否通过for in循环访问属性，默认值为false
　　writable:true, //控制属性是否可以被修改，默认值是false
　　configurable:true //控制能否通过delete删除属性从而重新定义属性，能否修改属性的特性，或者能否把属性修改为访问器属性，默认值为false。
})

三、设置好configurable 这个属性，delete就不能把name属性给删除掉了。例：

let name = "苏有朋"
let person = {
  age:20,
  sex:'男',
}
 
Object.defineProperty(person,'age',{
  configurable:false //控制属性是否可以被删除，默认值是false
})

四、通过给enumerable设置为false，这样对象就不能通过迭代器遍历出age这个属性的值了。

Object.defineProperty(person,'age',{
  enumerable:false
})
 
for(var i in person){
    console.log(person[i]);
}

五、最重要的两个属性 set和get（即存取器描述：定义属性如何被存取），这两个属性是做什么用的呢？

　　注意：当使用了getter或setter方法，不允许使用writable和value这两个属性(如果使用，会直接报错滴)

　　get 是获取值的时候的方法，类型为 function ，获取值的时候会被调用，不设置时为 undefined

　　set 是设置值的时候的方法，类型为 function ，设置值的时候会被调用，undefined

　　get或set不是必须成对出现，任写其一就可以。案例如下：

let name = "苏有朋"
 
  let person = {
  　　age:20,
  　　sex:'男',
  }
 
  Object.defineProperty(person,'name',{
//value:"苏有朋", // 包含这个属性的数据值。默认值为undefined
//enumerable:true, //控制属性是否可以枚举，能否通过for in循环访问属性，默认值为false
//writable:true, //控制属性是否可以被修改，默认值是false
//configurable:true //控制能否通过delete删除属性从而重新定义属性，能否修改属性的特性，或者能否把属性修改为访问器属性，默认值为false。
 
  　　//当有人读取person的age属性时，get函数(getter)就会被调用，且返回值就是age的值
  　　get(){
  　　　　console.log('有人读取age属性了')
  　　　　return name
  　　},
 
  　　//当有人修改person的age属性时，set函数(setter)就会被调用，且会收到修改的具体值
  　　set(value){
  　　　　console.log('有人修改了age属性，且值是',value)
  　　　　name = value
  　　}
 
  　　console.log(person)
  }

六、如何自定义多个属性？

let person = {
    name:"苏有朋"
}
let person2 = {};
Object.defineProperties(person2,{
    name:{
        writable:false,
        value:"王心凌"
    },
    age : {
        writable:true,
        value : 16,
    },
    sex:{
        get(){
            return '女';
        },
        set(value){
            person.sex = value
        }
    }
})

七、模拟Vue中v-module数据双向绑定的原理：（下面案例为了方便，摘取他人代码片段）

　　对象属性访问器属性中的 getter 函数和 setter 函数实现的数据劫持，但只对数据进行了检测，具体还要结合发布-订阅模式

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta
      name="viewport"
      content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0"
    />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <title>Document</title>
 
    <style>
      #myInput {
        width: 400px;
        height: 50px;
        font-size: 40px;
        color: red;
      }
      #contain {
        margin-top: 20px;
        width: 400px;
        height: 200px;
        border: 1px solid salmon;
      }
    </style>
  </head>
  <body>
    <input id="myInput" type="text" />
    <div id="contain"></div>
 
    <script>
      var text;
      window.data = {};
      var oIn = document.getElementById("myInput");
      var oDiv = document.getElementById("contain");
 
      oIn.addEventListener("input", function (e) {
        text = e.target.value;
        console.log(text);
        window.data.value = text;
      });
      Object.defineProperty(window.data, "value", {
        get() {
          return "";
        },
        set(v) {
          oDiv.innerHTML = v;
        },
      });
    </script>
  </body>
</html>