关于js的Object.defineProperty方法的使用

最新推荐文章于 2024-08-02 17:37:45 发布

qq_975443629

最新推荐文章于 2024-08-02 17:37:45 发布

阅读量439

点赞数

分类专栏： vue js 文章标签： Object.defineProperty mvvm

本文链接：https://blog.csdn.net/qq_42039970/article/details/88651364

版权

js 同时被 2 个专栏收录

19 篇文章 0 订阅

订阅专栏

vue

9 篇文章 0 订阅

订阅专栏

一、关于Object.defineProperty

Object.defineProperty()是直接在一个对象上定义一个新属性，或者修改一个对象的现有属性，并返回这个对象，一共有三个参数。

Object.defineProperty(object, propertyname, descriptor);

object：必须，要在其上添加或修改属性的对象。
propertyname：必需。一个包含属性名称的字符串。
descriptor：属性描述符。它可以针对数据属性或访问器属性。

descriptor：有以下参数值

value: 属性的值，默认为 undefined。 writable: 该属性是否可写，如果设置成
false，则任何对该属性改写的操作都无效（但不会报错,但是在严格模式下会报错。），对于像前面例子中直接在对象上定义的属性，这个属性该特性默认值为为
true。
configurable:总开关，一旦为false，就不能再设置他的（value，writable，configurable）
enumerable:定义了对象的属性是否可以在 for…in 循环和 Object.keys() 中被枚举。
get: 对定义的属性取值的时候会触发get 对应的函数,并且返回结果，默认返回undefined。
set: 对定义的属性赋值的时候会触发set 对应的函数

二、使用Object.defineProperty实现简单的双向数据绑定mvvm

双向数据绑定的原理是：
mvvm 分为model(模型) view(视图) viewModel(视图模型)

model 用来存储数据
view 用来展示数据
ViewModel 关联数据,和model实现双向绑定。

将对象的属性绑定到view，具体的说，我们有一个对象，该对象有一个name属性，当我们给这个对象name属性赋新值的时候，新值在view上也会得到更新。同样的道理，当我们有一个输入框或者textarea的时候，我们输入一个新值的时候，也会在该对象的name属性得到更新。

下面是一个通过 Object.defineProperty 来实现一个简单的数据双向绑定。通过该方法来监听属性的变化。
实现的简单效果如下：
页面上有一个input输入框和h5显示框，在input输入框输入值，按下enter键时，h5也会显示对应的值，可以简单的理解为模型-> 视图的改变，以及视图 -> 模型的改变。如下代码：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
</head>
<body>
  <div id="app">
    <h5 id="txtShow"></h5>
    <input type="text" id="txt">
  </div>
  <script>
    var model = {}
    var v = ''
    Object.defineProperty(model, 'txt', {
      // 设置属性值
      set: function(val) {
        v = val
        txtShow.innerHTML = this.txt;
      },
      // 获取属性值
      get: function () {
        return v
      }
    })
    var txtShow = document.getElementById('txtShow'),
      txt = document.getElementById('txt');
    txt.onkeyup = function() {
      if (event.keyCode == 13) {
        model.txt = txt.value;
      }
    }
  </script>
</body>
</html>

在这里插入图片描述