Javascript 变量属性更改时引发事件

我正在创建一个包含多个属性的可重用对象。我想在对象中触发一个事件，当通过赋值更改特定属性时，该事件将更新其自身的一些属性。我读过类似的东西，但他们用的是一个物体。我怎样才能做到这一点

如果这是一些基本的东西，我很抱歉，但我没有接受过JavaScript的正式培训，也没有掌握JavaScript的工作原理

我还想补充一点，这应该在IE11及更高版本中起作用

我已经测试了这个方法，但不幸的是，我真的不明白如何在我的案例中实现它

---

您可以将数据源的值存储在本地存储中，然后比较并检查它是否已更改

var test;
function myObject()
{
  this.dataSource = null; 
  this.changeEvent = function(val)
  {
    console.log("Value has been changed.");
  }
}
test = new myObject();
test.dataSource = 'dataSource';
console.log("Before change" + test.dataSource);
localStorage.setItem("dataSource", test.dataSource);
var newVal = "dtSrc";
test.dataSource = newVal;
var originalVal = localStorage.getItem("dataSource");
console.log("After change" + test.dataSource);
if(newVal == originalVal)
    console.log("Value has not changed.");
else
    test.changeEvent();

---

让我知道它是否适合你。如果没有，请告诉我预期的输出。

好的，我将从您建议的方法开始，您似乎喜欢这种方法

抱歉，如果这看起来很明显，但最好解释一下

基本上，

watch

监视对象（比如数据源）中的属性，当分配新值时，启动

回调

函数。因此，watch需要两个参数-监视什么和执行什么（当您正在监视的属性发生变化时）

这种方法的警告是，它是非标准的，没有被其他浏览器实现。尽管如此，我们可以得到一个polyfill（如果它不存在则声明它）

Mozilla自己的文档中的警告：

弃用警告：不要使用watch（）和unwatch（）！这两个 方法只在58版之前的Firefox中实现，它们是 Firefox 58+中已弃用并删除。此外，使用监视点 对绩效有严重的负面影响，尤其如此 在全局对象（如窗口）上使用时。你通常可以使用 而不是setter和getter或代理

因此，要实现使用polyfil手表（感谢Eli Grey的Polyfill）

首先，注册polyfill（将其放在JS中运行之前的某个位置，或者将其放在polyfill.JS文件中，然后首先将其导入HTML页面！）

然后，使用（使用您的示例）

然而，我会研究事件监听器，并在对象发生变化时触发事件——但这种解决方案应该适合您，尤其是使用

watch

---

您可以使用like:

var myObject = {
    _dataSource: null,
    changeEvent : function(val){
        //do something inside
        alert(val);
    }
};
Object.defineProperty(myObject, "dataSource", {
    get: function(){
        return this._dataSource;
    }, 
    set: function(newValue){
        this._dataSource=newValue;
        this.changeEvent(this.dataSource);
    }
});

myObject.dataSource= "dataSource";

---

创建对象时，请将其包裹在一个文件夹中

代理对象用于定义基本操作的自定义行为（例如属性查找、赋值、枚举、函数调用等）

---

实施一个陷阱，执行所需的内部更改。

您能提供更多信息吗？上面提供的js代码应该可以工作

//在内部执行操作

您应该在此处添加需要更改的属性。需要更改的对象是什么？@A.JAlhorr让我们说，当通过分配更改数据源时，我想做一个控制台日志这肯定会起作用，但正如我所说的，我想在“数据源”更改时触发事件，对不起，我误解了。我正在更新我的答案。太棒了！这是一件好事，我们的框架有polyfill，这肯定解决了我的问题！谢谢你给我一个清晰简洁的解释@jamescastillo-没问题！缺点是，它不能重复使用。

/*
 * object.watch polyfill
 *
 * 2012-04-03
 *
 * By Eli Grey, http://eligrey.com
 * Public Domain.
 * NO WARRANTY EXPRESSED OR IMPLIED. USE AT YOUR OWN RISK.
 */

// object.watch
if (!Object.prototype.watch) {
    Object.defineProperty(Object.prototype, "watch", {
          enumerable: false
        , configurable: true
        , writable: false
        , value: function (prop, handler) {
            var
              oldval = this[prop]
            , newval = oldval
            , getter = function () {
                return newval;
            }
            , setter = function (val) {
                oldval = newval;
                return newval = handler.call(this, prop, oldval, val);
            }
            ;

            if (delete this[prop]) { // can't watch constants
                Object.defineProperty(this, prop, {
                      get: getter
                    , set: setter
                    , enumerable: true
                    , configurable: true
                });
            }
        }
    });
}

// object.unwatch
if (!Object.prototype.unwatch) {
    Object.defineProperty(Object.prototype, "unwatch", {
          enumerable: false
        , configurable: true
        , writable: false
        , value: function (prop) {
            var val = this[prop];
            delete this[prop]; // remove accessors
            this[prop] = val;
        }
    });
}

var test;

**function myObject(){
  this.dataSource = null; 
  this.changeEvent = function (id, oldval, newval) {
    console.log(id + ' changed from ' + oldval + ' to ' + newval);
    return newval;
 }
  this.watch('datasource', this.changeEvent);
}**

test = new myObject();
test.dataSource = 'dataSource'; //trigger changeEvent() inside myObject

var myObject = {
    _dataSource: null,
    changeEvent : function(val){
        //do something inside
        alert(val);
    }
};
Object.defineProperty(myObject, "dataSource", {
    get: function(){
        return this._dataSource;
    }, 
    set: function(newValue){
        this._dataSource=newValue;
        this.changeEvent(this.dataSource);
    }
});

myObject.dataSource= "dataSource";