听取JavaScript中的变量更改

Question

是否有可能在JS中有一个事件,当某个变量的值发生变化时会触发该事件？JQuery被接受了.

Answer 1

是的,现在完全有可能!

我知道这是一个旧线程,但现在使用访问器(getter和setter)可以实现这种效果:https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Working_with_Objects#Defining_getters_and_setters

您可以定义这样的对象,其中aInternal表示字段a:

x = {
  aInternal: 10,
  aListener: function(val) {},
  set a(val) {
    this.aInternal = val;
    this.aListener(val);
  },
  get a() {
    return this.aInternal;
  },
  registerListener: function(listener) {
    this.aListener = listener;
  }
}

然后,您可以使用以下命令注册侦听器:

x.registerListener(function(val) {
  alert("Someone changed the value of x.a to " + val);
});

因此,每当有任何更改值时x.a,将触发侦听器函数.运行以下行将弹出警报:

x.a = 42;

在这里查看示例:https://jsfiddle.net/5o1wf1bn/1/

您也可以使用一组侦听器而不是一个侦听器插槽,但我想给您一个最简单的示例.

Answer 2

这个问题的大部分答案要么过时,要么无效,要么包含大量膨胀的库:

• Object.watch和Object.observe都已弃用,不应使用.
• onPropertyChange是一个DOM元素事件处理程序,仅适用于某些版本的IE.
• Object.defineProperty允许您使对象属性不可变,这将允许您检测尝试的更改,但它也会阻止任何更改.
• 定义setter和getter是有效的,但它需要大量的设置代码,当你需要删除或创建新属性时它不能很好地工作.

今天,您现在可以使用Proxy对象来监视(和拦截)对对象所做的更改.它的目的是为了实现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'

该Proxy对象的唯一缺点是:

1. 该Proxy对象在旧版浏览器(例如IE11)中不可用,并且polyfill无法完全复制Proxy功能.
2. 代理对象并不总是与特殊对象一样(例如,Date) - Proxy对象最好与普通对象或数组配对.

如果您需要观察对嵌套对象所做的更改,那么您需要使用一个专门的库,例如Observable Slim (我已发布),它的工作原理如下:

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 3

没有.

但是,如果它真的那么重要,你有两个选择(第一个是测试,第二个不是):

首先,使用setter和getter,如下所示:

var myobj = {a : 1};

function create_gets_sets(obj) { // make this a framework/global function
    var proxy = {}
    for ( var i in obj ) {
        if (obj.hasOwnProperty(i)) {
            var k = i;
            proxy["set_"+i] = function (val) { this[k] = val; };
            proxy["get_"+i] = function ()    { return this[k]; };
        }
    }
    for (var i in proxy) {
        if (proxy.hasOwnProperty(i)) {
            obj[i] = proxy[i];
        }
    }
}

create_gets_sets(myobj);

然后你可以这样做:

function listen_to(obj, prop, handler) {
    var current_setter = obj["set_" + prop];
    var old_val = obj["get_" + prop]();
    obj["set_" + prop] = function(val) { current_setter.apply(obj, [old_val, val]); handler(val));
}

然后将监听器设置为:

listen_to(myobj, "a", function(oldval, newval) {
    alert("old : " + oldval + " new : " + newval);
}

其次,我实际上忘记了,我会在考虑的时候提交:)

编辑:哦,我记得:)你可以看一下值:

鉴于myobj,上面有'a':

function watch(obj, prop, handler) { // make this a framework/global function
    var currval = obj[prop];
    function callback() {
        if (obj[prop] != currval) {
            var temp = currval;
            currval = obj[prop];
            handler(temp, currval);
        }
    }
    return callback;
}

var myhandler = function (oldval, newval) {
    //do something
};

var intervalH = setInterval(watch(myobj, "a", myhandler), 100);

myobj.set_a(2);

Answer 4

使用Prototype:https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object/defineProperty

// Console
function print(t) {
  var c = document.getElementById('console');
  c.innerHTML = c.innerHTML + '<br />' + t;
}

// Demo
var myVar = 123;

Object.defineProperty(this, 'varWatch', {
  get: function () { return myVar; },
  set: function (v) {
    myVar = v;
    print('Value changed! New value: ' + v);
  }
});

print(varWatch);
varWatch = 456;
print(varWatch);

<pre id="console">
</pre>

其他例子

// Console
function print(t) {
  var c = document.getElementById('console');
  c.innerHTML = c.innerHTML + '<br />' + t;
}

// Demo
var varw = (function (context) {
  return function (varName, varValue) {
    var value = varValue;
  
    Object.defineProperty(context, varName, {
      get: function () { return value; },
      set: function (v) {
        value = v;
        print('Value changed! New value: ' + value);
      }
    });
  };
})(window);

varw('varWatch'); // Declare
print(varWatch);
varWatch = 456;
print(varWatch);

print('---');

varw('otherVarWatch', 123); // Declare with initial value
print(otherVarWatch);
otherVarWatch = 789;
print(otherVarWatch);

<pre id="console">
</pre>

Answer 5

很抱歉打开一个旧线程,但这里有一个小手册,对于那些(像我一样!)看不到Eli Gray的例子是如何工作的:

var test = new Object();
test.watch("elem", function(prop,oldval,newval){
    //Your code
    return newval;
});

希望这可以帮助别人

Answer 6

最近发现自己也遇到了同样的问题。想要监听变量的变化并在变量变化时做一些事情。

有人提出了一个使用 setter 设置值的简单解决方案。

声明一个简单的对象，在此处保留变量的值：

var variableObject = {
    value: false,
    set: function (value) {
        this.value = value;
        this.getOnChange();
    }
}

该对象包含一个 set 方法，我可以通过该方法更改值。但它也调用了getOnChange()其中的一个方法。现在将定义它。

variableObject.getOnChange = function() {
    if(this.value) {
        // do some stuff
    }
}

现在，每当我这样做时variableObject.set(true)，该getOnChange方法都会触发，并且如果根据需要设置了值（在我的例子中：）true，则 if 块也会执行。

这是我发现做这件事的最简单的方法。

Answer 7

正如Luke Schafer的回答(注意:这指的是他原来的帖子;但是这一点在编辑后仍然有效),我还建议使用一对Get/Set方法来访问你的价值.

但是我会建议一些修改(这就是我发布的原因......).

该代码的一个问题是a对象的字段myobj是可以直接访问的,因此可以访问它/更改其值而不触发侦听器:

var myobj = { a : 5, get_a : function() { return this.a;}, set_a : function(val) { this.a = val; }}
/* add listeners ... */
myobj.a = 10; // no listeners called!

封装

因此,为了保证实际调用侦听器,我们必须禁止直接访问该字段a.怎么办？使用封口!

var myobj = (function() { // Anonymous function to create scope.

    var a = 5;            // 'a' is local to this function
                          // and cannot be directly accessed from outside
                          // this anonymous function's scope

    return {
        get_a : function() { return a; },   // These functions are closures:
        set_a : function(val) { a = val; }  // they keep reference to
                                            // something ('a') that was on scope
                                            // where they were defined
    };
})();

现在你可以使用相同的方法来创建和添加听众,就像Luke建议的那样,但你可以放心,没有可能的方法来读取或写入a被忽视!

以编程方式添加封装字段

在Luke的轨道上,我现在提出了一种通过简单的函数调用将封装字段和相应的getter/setter添加到对象的简单方法.

请注意,这只适用于值类型.为了使用引用类型,必须实现某种深层复制(例如,参见本文).

function addProperty(obj, name, initial) {
    var field = initial;
    obj["get_" + name] = function() { return field; }
    obj["set_" + name] = function(val) { field = val; }
}

这和以前一样:我们在函数上创建局部变量,然后创建一个闭包.

如何使用它？简单:

var myobj = {};
addProperty(myobj, "total", 0);
window.alert(myobj.get_total() == 0);
myobj.set_total(10);
window.alert(myobj.get_total() == 10);

Answer 8

如果您正在使用jQuery {UI}(每个人都应该使用:-)),您可以将.change()与隐藏的<input />元素一起使用.

Answer 9

AngularJS(我知道这不是JQuery,但这可能有所帮助.[纯JS在理论上只是好的]):

$scope.$watch('data', function(newValue) { ..

其中"data"是范围中变量的名称.

有一个指向doc的链接.

Answer 10

对于那些在几年后调整的人:

大多数浏览器(和IE6 +)的解决方案都可用,它使用onpropertychange事件和较新的规范defineProperty.轻微的问题是你需要使你的变量成为一个dom对象.

详细信息:

http://johndyer.name/native-browser-get-set-properties-in-javascript/

Answer 11

我找到的最简单的方法，从这个答案开始：

// variable holding your data
const state = {
  count: null,
  update() {
    console.log(`this gets called and your value is ${this.pageNumber}`);
  },
  get pageNumber() {
    return this.count;
  },
  set pageNumber(pageNumber) {
    this.count = pageNumber;
    // here you call the code you need
    this.update(this.count);
  }
};

进而：

state.pageNumber = 0;
// watch the console

state.pageNumber = 15;
// watch the console

Answer 12

不是直接的：你需要一对 getter/setter 和某种“addListener/removeListener”接口......或者一个 NPAPI 插件（但这完全是另一个故事）。