Object.defineProperty方法(详解)

Object.defineProperty方法(详解)OK,这一篇主要想说一下Object.defineProperty这个方法。这个方法也是Vue数据双向绑定原理的常见面试题所以也是有必要好好掌握的哦首先我们知道JS中是支持面向对象编程的,也是有着对象和类这样的概念。我们常见创建对象的方法应该是这样:varp1={name:”lisi”,}那我们Object.defineProperty这个方法有什么用呢?这个方法接收三个参数:1.属性所在的对象2.属性的名字3.一个描述符对象这个描述符对象是个什么东西呢?他可以

OK,这一篇主要想说一下Object.defineProperty这个方法。

这个方法也是Vue数据双向绑定原理的常见面试题
所以也是有必要好好掌握的哦
在这里插入图片描述
首先我们知道JS中是支持面向对象编程的,也是有着对象和类这样的概念。
我们常见创建对象的方法应该是这样:

var p1 ={ 
   
    name:"lisi",
}

那我们Object.defineProperty这个方法有什么用呢?

这个方法接收三个参数:

1.属性所在的对象
2.属性的名字
3.一个描述符对象

这个描述符对象是个什么东西呢?
他可以是 数据属性:

1.configurable:表示能否通过delete删除属性从而重新定义属性,能否修改属性的特性,或者能否把属性修改为访问器属性,默认值为false。

2.enumerable:表示能否通过for in循环访问属性,默认值为false

3.writable:表示能否修改属性的值。默认值为false。

4.value:包含这个属性的数据值。默认值为undefined。

现在我们就对p1这个对象,用这个方法来玩一下
在这里插入图片描述

Object.defineProperty(p1,"name",{ 
   
    configurable : false,
})
console.log(p1); //{ name: 'lisi' }
delete p1.name;
console.log(p1); //{ name: 'lisi' }

通过这个方法设置好configurable 这个属性,delete就不能把name属性给删除掉了。

Object.defineProperty(p1,"age",{ 
   
    writable :false,
    value : 15,
})
console.log(p1.age); //15
p1.age = 20;
console.log(p1.age); //15

然后我们给p1这个对象新加了一个age属性,并且设置成只读的。
这样我们就无法修改这个age属性了。

Object.defineProperty(p1,"age",{ 
   
    enumerable:false
})
for(var i in p1){ 
   
    console.log(p1[i]);
} // lisi

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

通过这几个例子,我们基本那就了解Object.defineProperty这个方法的使用以及数据属性是做什么的了。
那该方法的第三个参数除了可以是数据属性,也可以是访问器属性。

1.get:在读取属性时调用的函数,默认值是undefined
2..set:在写入属性的时候调用的函数,默认值是undefined

现在我们来用这两个方法来实践一下:

var book = { 
   
    _year : 2004,
    edition : 1
}

Object.defineProperty(book,"year",{ 
   
    get: function(){ 
   
        return this._year
    },
    set: function(newYear){ 
   
        if(newYear > 2004){ 
   
            this._year = newYear;
            this.edition += newYear - 2004
        }
    }
})

book.year = 2005;
console.log(book.edition); // 2
console.log(book._year); //2005

由于get方法返回_year的值,set方法通过计算来确定正确的版本。
因此把year的值设置为2005会导致edition的值变为2.

OK,关于Object.defineProperty方法的第三个参数的两种属性也就说完了。
在这里插入图片描述

最后我们再说一下如何进行定义多个属性

var student = { 
   };
Object.defineProperties(student,{ 
   
    name:{ 
   
        writable:false,
        value:"lisi"
    },
    age : { 
   
        writable:true,
        value : 16,
    },
    sex:{ 
   
        get(){ 
   
            return '男';
        },
        set(v){ 
   
            p1.sex = v
        }
    }
})

p1.sex = "男";
console.log(student.name + ":" + student.age);
console.log(p1.sex); // 男
student.sex = "女";
console.log(student.sex); //男
console.log(p1.sex); // 女

OK,关于写法应该也没有什么难点。

最后我在附上一个模拟Vue中v-module数据双向绑定原理的代码:

<!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>

效果图是这样的:
在这里插入图片描述

那关于这一部分的知识也就整理完啦!

今天的文章Object.defineProperty方法(详解)分享到此就结束了,感谢您的阅读,如果确实帮到您,您可以动动手指转发给其他人。

版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 举报,一经查实,本站将立刻删除。
如需转载请保留出处:https://bianchenghao.cn/29462.html

(0)
编程小号编程小号

相关推荐

发表回复

您的电子邮箱地址不会被公开。 必填项已用*标注