2

我想知道是否有人可以帮助我做一些我认为相当直接的事情：

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

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

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

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

这是我之后的基本想法，但我真正想要的是实际上让 onChange （在这个例子中）有所不同，以便为实际变量（而不是标准原型扩展）提供一个新函数，即：

x.onChange = function() {
    alert("x.onChange");
}

y.onChange = function() {
    alert("y.onChange");
}

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

任何帮助将不胜感激！

4

3 回答 3

6

我可能不想通过尝试向现有类型添加方法来解决这个问题，而是创建一个可以包装原始类型的对象。我将其称为“观察”一个值，并且可能会像这样实现它：

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);
        }   
    };
}

然后可以使用它来观察任何值的变化（只要该值仅由可观察类上的方法更改 - 一个小的减损IMO）。

像这样的东西适用于上面的代码：

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);

现场示例 --> http://jsfiddle.net/MeAhz/

于 2011-02-10T12:33:14.660 回答
0

扩展对象原型：

Object.prototype.foo = function() { alert('hello world'); };
var a = 1;
a.foo();
于 2011-02-10T12:18:03.207 回答
0

标准的弃用方式：Object.observe()

Object.observe() 方法用于异步观察对象的变化。它按发生的顺序提供了一系列变化。但是，此 API 已被弃用并从浏览器中删除。

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

但是代理到达标准（ES6）时，Object.Observe 已被弃用，并且浏览器也不支持。

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

观察第三方库的价值变化

您可以找到许多基于代理的实现。其中一些实现了观察者模式，这迫使您使用特定方法设置或获取值：

观察： https ://www.npmjs.com/package/observe

// 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'

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

WatchJS： https ://github.com/melanke/Watch.JS/

// 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'

我自己的方法：深度观察者

所有的实施都有自己的警告，没有一个适合我的目的，所以我必须实施我自己的方法。

结果是一个高度可定制的 Observer 方法，占用空间非常小（压缩后 <100 字节）

深度观察者：https ://www.npmjs.com/package/deep-observer

// 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'
于 2018-07-18T05:36:49.217 回答