Object.defineProperty 数据绑定范围

Question

我一直在玩 javascript Object.defineProperty 来创建数据绑定。我确实让它工作了。我的问题与其他事情有关。

我有一个 for html 查询来查找具有属性 'data-bind' 的元素并在 for 循环中循环遍历它们。从 for-loop 我调用一个函数来通过 setter 属性:

绑定它们

var cbinder = function(obj, elem, prop) {
      Object.defineProperty(obj, prop, {
        set: function(val) {
          elem.innerHTML = val;
        }
      });
    };

// 从

调用

 var elem = document.querySelectorAll("[data-bind]"); 
 for (var i = 0; i < elem.length; i++) {
            var prop = elem[i].getAttribute("data-bind");
            cbinder(obj, elem[i], prop);
        }

 var obj = {};
 var cbinder = function(obj, elem, prop) {

   Object.defineProperty(obj, prop, {
     set: function(val) {
       elem.innerHTML = val;
     }
   });
 };

 window.onload = function() {
   var elem = document.querySelectorAll("[data-bind]");

   for (var i = 0; i < elem.length; i++) {
     var prop = elem[i].getAttribute("data-bind");
     cbinder(obj, elem[i], prop);
   }


   var btn = document.querySelector("#chnbtn");
   btn.addEventListener("click", function(event) {
     obj.fname = "John";
     obj.lname = "Doe";

   }, false);


 };

<p>
  <span data-bind="fname">my name</span>  <span data-bind="lname">my name</span>
</p>
<p>
  <button id="chnbtn">Change Values</button>
</p>

因为我在 for 循环中调用了这个函数，所以我想我也可以将它集成到那里，但这就是我的问题所在。它不能正常工作，只在设置对象时分配最后一个值。 为什么第一个示例工作正常而第二个失败，而我认为它们是类似的调用。有人能满足我的好奇心吗？

   var elem = document.querySelectorAll("[data-bind]");
   for (var i = 0; i < elem.length; i++) {
        var prop = elem[i].getAttribute("data-bind");
        var el = elem[i]
        Object.defineProperty(obj, prop, {
            set: function (val) {
                el.innerHTML = val;
            }
        });
    }

    var obj = {};
    window.onload = function() {
      var elem = document.querySelectorAll("[data-bind]");

      for (var i = 0; i < elem.length; i++) {
        var prop = elem[i].getAttribute("data-bind");
        var el = elem[i]
        Object.defineProperty(obj, prop, {
          set: function(val) {
            el.innerHTML = val;
          }
        });
      }


      var btn = document.querySelector("#chnbtn");
      btn.addEventListener("click", function(event) {
        obj.fname = "John";
        obj.lname = "Doe";

      }, false);


    };

<p>
  <span data-bind="fname">my name</span>  <span data-bind="lname">my name</span>

</p>
<p>
  <button id="chnbtn">Change Values</button>
</p>

Answer 1

您分配给属性的 setter 函数具有对 el 变量的 持久引用，而不是 copy 函数创建时的它。因此，当调用该函数时，它会尝试使用循环中的最后一个值 el。

你的原始代码，把它放在一个函数中，是要走的路。

Object.defineProperty 数据绑定范围

Object.defineProperty data binding scope

javascript

html

data-binding

defineproperty