Javascript 如何观察JS变量中的值变化

我想知道是否有人能帮我做一些我认为很简单的事情：

本质上，我想扩展所有数据类型（包括内在类型）的原型，以允许某种自定义函数，请考虑：

var x = "some string";
var y = 101;

x = "some other value";
y++;

x.onChange();
y.onChange();

这是我追求的基本想法，但我真正想要的是实际的onChange（在本例中）不同，因此实际变量的新函数（而不是标准原型扩展），即：

这似乎不起作用，但我肯定错过了一些非常简单的东西不？我的意思是，我当然可以扩展所有对象和类型，并添加新函数。。。没有

---

任何帮助都将不胜感激

扩展对象原型：

Object.prototype.foo = function() { alert('hello world'); };
var a = 1;
a.foo();

---

我可能不想通过尝试向现有类型添加方法来实现这一点，而是想创建一个可以包装primative类型的对象。我将其称为“观察”值，并可能实现如下内容：

function observable(v){
    this.value = v;

    this.valueChangedCallback = null;

    this.setValue = function(v){
        if(this.value != v){
            this.value = v;
            this.raiseChangedEvent(v);
        }
    };

    this.getValue = function(){
        return this.value;
    };

    this.onChange = function(callback){
        this.valueChangedCallback = callback;
    };

    this.raiseChangedEvent = function(v){
        if(this.valueChangedCallback){
             this.valueChangedCallback(v);
        }   
    };
}

然后，可以使用它来观察任何值的变化（只要该值随后仅通过可观察类上的方法进行更改——这是一个很小的减损）

类似这样的代码可以用于上述代码：

var obs = new observable(123);
obs.onChange(function(v){
         alert("value changed to: " + v);
     });

// the onChange callback would be called after something like obs.setValue(456);

这里的实例-->

标准的弃用方式：Object.observe（） Object.observe（）方法用于异步观察 对对象的更改。它提供了顺序中的一系列更改 它们发生了。但是，此API已被弃用并删除 来自浏览器

但是代理到达标准（ES6）对象。Observe变得不受欢迎，并且浏览器也不支持它

代理是观察…的新方式。。。但是，与Object.observe提供给我们的方式相比，实现通用观察者需要更复杂的实现

---

使用第三方库观察值的变化 您可以找到许多基于代理的实现。 其中一些实现了Observer模式，强制您使用特定方法设置或获取值：

观察：

---

相反，其他库允许您以更自然的方式与变量交互：

WatchJS：

---

我自己的看法：深刻的观察者 所有的实现都有自己的注意事项，没有一个是为我的目的而工作的，所以我必须实现自己的方法

---

结果是一个高度可定制的观察者方法，占用的空间非常小（@insin:FWIW，ECMA-262第五版的

defineProperty（）

可以通过定义不可枚举的属性来解决这个问题。

Object.prototype.hasOwnProperty（）的使用也可以

。此外，这样做的问题是您只有一个函数，而不是一个处理程序，即：“var a=1；var b=2；a.foo（）；b.foo（）；”，在该示例中是“a.foo（）；”和“b.foo（）做同样的事情tat正是我想要的，当我向

对象原型添加一个函数时

…我正在使用

angular

，当我想在单个函数中显示每个注入的名称，但每个对象都有其他命名属性时…我可以向原型添加一个名为_name的函数，并将哪个属性切换到r在视图中，我所要做的就是

{{item.{name}}

非常感谢Jamie…这是我试图解决的问题的一个非常优雅的解决方案…再次感谢！

var obs = new observable(123);
obs.onChange(function(v){
         alert("value changed to: " + v);
     });

// the onChange callback would be called after something like obs.setValue(456);

let myObservdObject = Object.observe( { a : 'foo' }, e=>console.log('change!', e) );
myObservdObject.a = 'bee';
// callback gets executed
// and prints 'changed! in console, with the change event data

// define your object
var object = {a:'bee'};
// generate an observer
var observer = observe(object);
// declare the onchange event handler
observer.on( 'change', change=> console.log(change) );
// ready!
// set the value of 'a' and see how the callback is executed...
observer.set('a', 'foo')   
// get the new value
observer.get('a')   // returns 'foo'

// define your object
var object = {a:'bee'};
// generate an observer and declare de hadler
watch(object , "a" , e=>console.log(e) );
// ready!
// set the value of 'a' and see how the callback is executed...
object.a = 'foo';   
// get the new value
object.a  // returns 'foo'

// create an observable object
const myObserved = new Observer( { a : 'bee' } , e=>console.log(e) ),
// perform a modification
myObserved.a = 'foo'; 
// console  : { action:'update', oldValue:'bee', object:{a:'foo'}, name:'a' }
myObserved.a;  // returns 'foo'