JavaScript 实现最简双向绑定的代码示例

作者：青柠

时间：2026-10-22

本文介绍如何使用 Object.defineProperty 实现 JavaScript 中最简单的双向绑定。通过定义 getter 和 setter，监听对象属性变化并更新视图，同时监听视图输入以同步对象数据，从而达成数据与界面的双向同步。

文章目录

JavaScript 实现最简双向绑定的代码示例

将代码复制并放入页面中运行，即可查看效果。


<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
</head>
<body>
<input type="text" id="myinput" >
<script>
  function watch(obj,key,callback) {
    var old = obj[key];
    Object.defineProperty(obj,key,{
      set:function(val){
        var oldVal = old;
        old = val;
        callback(val,oldVal,this);
      },
      get:function(){
        return old;
      }
    });
  }
  var input = document.getElementById("myinput");
  var obj = {};
  watch(obj, "input",function (val) {
    input.value = val;
    console.log("这里是不管view层，还是module层修改后的回调，最后设置的值是"+val);
  });
  input.onkeyup = function () {
    obj.input = input.value;
  };
</script>
</body>
</html>

代码测试

修改 input 输入框内的值后，控制台会打印出更新后的新值。

在控制台修改 obj.input 的值时，input 输入框内的值也会随之改变，同时触发事件以获取新值。

以上关于 JavaScript 最简单双向绑定的实例讲解内容，希望能为大家提供参考。