Tại sao Object.observe() không được chấp nhận

Question

Có cách tiếp cận khác không?

Có cách nào khác để thực hiện phát hiện thay đổi trong đối tượng không?

Có phương pháp Proxy, nhưng bất cứ ai có thể cho tôi biết làm thế nào tôi có thể đạt được điều này sử dụng Proxy:

var obj = { 
    foo: 0, 
    bar: 1 
}; 

Object.observe(obj, function(changes) { 
    console.log(changes); 
}); 

obj.baz = 2; 
// [{name: 'baz', object: <obj>, type: 'add'}] 

obj.foo = 'hello'; 
// [{name: 'foo', object: <obj>, type: 'update', oldValue: 0}] 

Answer 1

Bạn có thể đạt được điều này với getter và setter.

var obj = { 
    get foo() { 
    console.log({ name: 'foo', object: obj, type: 'get' }); 
    return obj._foo; 
    }, 
    set bar(val) { 
    console.log({ name: 'bar', object: obj, type: 'set', oldValue: obj._bar }); 
    return obj._bar = val; 
    } 
}; 

obj.bar = 2; 
// {name: 'baz', object: <obj>, type: 'set', oldValue: undefined} 

obj.foo; 
// {name: 'foo', object: <obj>, type: 'get'} 

Hoặc, trong trình duyệt có hỗ trợ dành cho Proxy, bạn có thể viết giải pháp chung chung hơn.

var obj = { 
    foo: 1, 
    bar: 2 
}; 

var proxied = new Proxy(obj, { 
    get: function(target, prop) { 
    console.log({ type: 'get', target, prop }); 
    return Reflect.get(target, prop); 
    }, 
    set: function(target, prop, value) { 
    console.log({ type: 'set', target, prop, value }); 
    return Reflect.set(target, prop, value); 
    } 
}); 

proxied.bar = 2; 
// {type: 'set', target: <obj>, prop: 'bar', value: 2} 

proxied.foo; 
// {type: 'get', target: <obj>, prop: 'bar'} 

Answer 2

@Dan solution là đúng.

Trong trường hợp nếu bạn muốn hỗ trợ các trình duyệt cũ hơn, tôi khuyên bạn nên truy cập polyfill.

hoặc sử dụng Object.defineProperties API được hỗ trợ trong IE 9.

var obj = Object.defineProperties({}, { 
    "foo":{ 
     get:function(){ 
      console.log("Get:"+this.value); 
     }, 
     set:function(val){ 
      console.log("Set:"+val); 
      this.value = val; 
     } 
    }, 

    "bar":{   
     get:function(){ 
      console.log("Get:"+this.value); 
     }, 
     set:function(val){ 
      console.log("Set:"+val); 
      this.value = val; 
     } 
    } 
}); 

Answer 3

Disclaimer: Tôi là tác giả của thư viện object-observer gợi ý dưới đây.

Tôi không đi với giải pháp getters/setters - nó phức tạp, không thể mở rộng và không thể duy trì. Backbone đã ràng buộc hai chiều của họ theo cách đó và bản mẫu để làm cho nó hoạt động chính xác là một đoạn mã.

Proxy là cách tốt nhất để đạt được những gì bạn cần, chỉ cần thêm vào các ví dụ ở trên một số đăng ký và quản lý cuộc gọi lại và thực hiện chúng khi có thay đổi.

Liên quan đến thư viện polyfill: một số/hầu hết trong số này được triển khai bằng cách sử dụng 'kiểm tra bẩn' hoặc kỹ thuật bỏ phiếu - không hiệu quả, không thực hiện. Thỉnh thoảng, đây là trường hợp của polyfill được chỉ ra bởi Nirus ở trên.

Tôi khuyên bạn nên chọn một số thư viện quan sát qua Proxy. Có một vài trong số đó, object-observer là một trong số chúng: được viết cho trường hợp sử dụng này chính xác, sử dụng các proxy gốc, cung cấp quan sát cây sâu, v.v.