在JavaScript对象中，属性值更改的侦听器

Question

通过JavaScript文档，我在JavaScript对象上发现以下两个函数看起来很有趣：

.watch - 手表要分配一个值并在发生时运行一个函数。
.unwatch - 使用手表方法删除设置的观察点。

---

更新：折旧警告
请勿使用 Watch（）和 untatch（）！这两个 方法仅在版本 58 之前在 firefox 中实现，它们是 在 firefox 58+

中删除并删除

---

用法

o = { p: 1 };
o.watch("p", function (id,oldval,newval) {
    console.log("o." + id + " changed from " + oldval + " to " + newval)
    return newval;
});

在 firefox

o.p = 2;   //logs: "o.p changed from 1 to 2"

58+示例 过去几年，从未使用过这些功能。
有人可以扔一些好的用例，这些功能会派上用场吗？

Answer 1

现在是2018年，这个问题的答案有点过时：

• object.watch and 均已弃用，不应使用。
• onpropertychange 是只有工作的dom元素事件处理程序在某些版本的IE中。

今天，您现在可以使用对象要监视对象进行的更改。它是为OP试图做的目的而建立的。这是一个基本示例：

var targetObj = {};
var targetProxy = new Proxy(targetObj, {
  set: function (target, key, value) {
      console.log(`${key} set to ${value}`);
      target[key] = value;
      return true;
  }
});

targetProxy.hello_world = "test"; // console: 'hello_world set to test'

代理对象的唯一缺点是：

1. 代理对象在较旧的浏览器（例如IE11）和 polyfill 无法完全复制代理函数。
2. 代理对象并不总是与特殊对象（例如， date ）的预期行为 - 代理对象最好与普通对象或数组配对。

如果您需要观察对嵌套对象进行的更改，则需要使用 可观察的纤细 （我撰写了）。它是这样的工作：

var test = {testing:{}};
var p = ObservableSlim.create(test, true, function(changes) {
    console.log(JSON.stringify(changes));
});

p.testing.blah = 42; // console:  [{"type":"add","target":{"blah":42},"property":"blah","newValue":42,"currentPath":"testing.blah",jsonPointer:"/testing/blah","proxy":{"blah":42}}]

Answer 2

手表的真正设计是验证属性值。例如，您可以验证某物是一个整数：

obj.watch('count', function(id, oldval, newval) {
    var val = parseInt(newval, 10);
    if(isNaN(val)) return oldval;
    return val;
});

您可以使用它来验证字符串长度：

obj.watch('name', function(id, oldval, newval) {
    return newval.substr(0, 20);
});

但是，这些仅在Spidermonkey JavaScript引擎的最新版本中可用。如果您使用Jaxer或Jaxer或嵌入SpidermonKey引擎，但浏览器中尚未真正可用（除非您使用的是FF3）。

Answer 3

查看Object.prototype.\__defineGetter__ (or \ __定义__ ）查看此功能在哪里。

Object.defineProperty 现在应在所有当代浏览器中可用。

Answer 4

这是一种简单的替代方法，可以使用Getter/setter观看/UNDATCH字面的对象。每当更改 p 属性时，都可以调用任何函数。

var o = {
 _p: 0,
  get p() {
    return this._p;
  },
  set p(p){    
    console.log(`Changing p from ${this._p} to ${p}`);
    this._p = p;    
    return this._p;
  }
}

o.p = 4;
o.p = 5;

Answer 5

您可以看一下 javascript Prepery Events 库。这是我最近制作的一些事件呼叫者的小型库。它在[event] 属性上添加了一些，这些属性可以像[event] html-objects上的上的一样。它还具有简单的类型检查，如果失败，该检查将调用 onerror 事件。

采用您的代码会导致这样的事情：

var o = {}
Object.defineProperty(o, "p", {
    value:1,
    writable:true,
    onchange:function(e){
        console.log("o." + e.target + " changed from " + e.previousValue + " to " + e.returnValue);
    }
})

Answer 6

​=“ https://developer.mozilla.org/en-us/docs/web/javascript/Reference/global_objects/promise/promise” rel =“ nofollow noreferrer”> Promise> Promise>

Promise>在目标浏览器中支持的

很重要：

1）注意使用Promise时的异步行为。

2）object.defineProperty不会触发回调，只有分配操作员'='dim

Object.onPropertySet = function onPropertySet(obj, prop, ...callback_or_once){
    let callback, once;
    for(let arg of callback_or_once){
        switch(typeof arg){
        case "function": callback = arg; break;
        case "boolean": once = arg; break;
        }
    }


    let inner_value = obj[prop];
    let p = new Promise(resolve => Object.defineProperty(obj, prop, {
        configurable: true,
        // enumerable: true,
        get(){ return inner_value; },
        set(v){
            inner_value = v;
            if(once){
                Object.defineProperty(obj, prop, {
                    configurable: true,
                    // enumerable: true,
                    value: v,
                    writable: true,
                });
            }
            (callback || resolve)(v);
        }
    }));
    if(!callback) return p;
};

// usage
let a = {};
function sayHiValue(v){ console.log(`Hi "${v}"`); return v; }

// do
Object.onPropertySet(a, "b", sayHiValue);
a.b = 2; // Hi "2"
a.b = 5; // Hi "5"

// or
Object.onPropertySet(a, "c", true).then(sayHiValue).then(v => {
    console.log(a.c); // 4 // because a.c is set immediatly after a.c = 3
    console.log(v); // 3 // very important: v != a.c if a.c is reassigned immediatly
    a.c = 2; // property "c" of object "a" is re-assignable by '=' operator
    console.log(a.c === 2); // true
});
a.c = 3; // Hi "3"
a.c = 4; // (Nothing)

Answer 7

而不是使用代理，因此不是直接在原始对象上“聆听”，而是可以使用这样的东西：

const obj = {};

obj.state = {
  isLoaded: false,
  isOpen: false,
};

obj.setState = (newState) => {
  // Before using obj.setState => result Object { isLoaded: false, isOpen: false }
  console.log(obj.state); 
  obj.state = { ...obj.state, ...newState };
  // After using obj.setState ex. obj.setState({new:''}) => result Object { isLoaded: false, isOpen: false, new: "" }
  console.log(obj.state); 
};

该方法或多或少是在ReactJ中工作的方式，而是在此示例中具有源对象< strong> obj.state 和setter obj.setstate

您不必像我一样将两个都放在一个对象中，但似乎是组织事物的好方法

Answer 8

据我所知，没有答案与OP的问题有关：

有人可以扔一些好的用例，这些功能会派上用场吗？

我的用例：想象一下现有库中的一个对象，该对象在实例化中接收 options -Object，在创建后也可以使用。这些配置值中的某些可以在该对象的生命周期内更改，并且下次调用特定方法时，这些值将使用这些新的配置值。

但是，现在我找到了只有在实例化期间提供的效果的选项，即b/c会注册某些事件听众 - 更改后更新值，但不会改变行为。但是我确实需要在运行时打开或关闭此行为。为了参数，让我们调用该选项 dosomethingonkeydown 。

如何向不会改变API的该库中添加拉动请求？

我构建

  // … we're somewhere in the constructor
  this.options = new Proxy(this.options, {
    set: function (target, key, value) {
      if (key == 'doSomethingOnKeyDown' && value !== target[key]) {
        value === true 
          ? window.addEventListener('keydown', keydownHandler) 
          : window.removeEventListener('keydown', keydownHandler) 
      }
      
      target[key] = value // default behavior: store the value
      
      return true // Indicate success
    }
  })

”现在，任何人都可以在运行时更改对象上的此选项，即 myinstance.options.options.dosomethingonkeydown = false ，它将相应地更新其行为 - 并且对象的API保持不变。

Answer 9

您可以使用setInterval

Object.prototype.startWatch = function (onWatch) {

    var self = this;

    if (!self.watchTask) {
        self.oldValues = [];

        for (var propName in self) {
            self.oldValues[propName] = self[propName];
        }


        self.watchTask = setInterval(function () {
            for (var propName in self) {
                var propValue = self[propName];
                if (typeof (propValue) != 'function') {


                    var oldValue = self.oldValues[propName];

                    if (propValue != oldValue) {
                        self.oldValues[propName] = propValue;

                        onWatch({ obj: self, propName: propName, oldValue: oldValue, newValue: propValue });

                    }

                }
            }
        }, 1);
    }



}

var o = { a: 1, b: 2 };

o.startWatch(function (e) {
    console.log("property changed: " + e.propName);
    console.log("old value: " + e.oldValue);
    console.log("new value: " + e.newValue);
});