Object.defineProperty 简单实现数据双向绑定

发表于 | 更新于 | 分类于 | 阅读次数：
本文字数： 760 | 阅读时长 ≈ 1 分钟

Object.defineProperty() 方法会直接在一个对象上定义一个新属性，或者修改一个对象的现有属性， 并返回这个对象。

描述

该方法允许精确添加或修改对象的属性。通过赋值操作添加的普通属性是可枚举的，能够在属性枚举期间呈现出来（for…in 或 Object.keys 方法）， 这些属性的值可以被改变，也可以被删除。这个方法允许修改默认的额外选项（或配置）。默认情况下，使用 Object.defineProperty() 添加的属性值是不可修改的。

html

1
2
<input id='input'>
<p id='text'></p>

JS

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
var data = {text:''}
var input = document.querySelector("#input");
var text = document.querySelector("#text");

Object.defineProperty(data, "text", {
  get: function(){
    return input.value;
  },
  set: function(value){
    input.value = value;
    text.innerText = value;
  }
});

input.onkeyup = function (e) {
    data.text = e.target.value
}

效果如下图.

img

参考文章

Object.defineProperty() - JavaScript | MDN