爲什麼這個Object.observe通知示例不起作用

我想通過使用Thingy通知（使用Thingy）使用Object.observe功能來運行在此處發佈的示例http://www.html5rocks.com/en/tutorials/es7/observe/的示例。這裏是代碼片段我跑：爲什麼這個Object.observe通知示例不起作用

function Thingy(a, b, c) { 
    this.a = a; 
    this.b = b; 
} 

Thingy.MULTIPLY = 'multiply'; 
Thingy.INCREMENT = 'increment'; 
Thingy.INCREMENT_AND_MULTIPLY = 'incrementAndMultiply'; 


Thingy.prototype = { 
    increment: function(amount) { 
    var notifier = Object.getNotifier(this); 

    notifier.performChange(Thingy.INCREMENT, function() { 
     this.a += amount; 
     this.b += amount; 
    }, this); 

    notifier.notify({ 
     object: this, 
     type: Thingy.INCREMENT, 
     incremented: amount 
    }); 
    }, 

    multiply: function(amount) { 
    var notifier = Object.getNotifier(this); 

    notifier.performChange(Thingy.MULTIPLY, function() { 
     this.a *= amount; 
     this.b *= amount; 
    }, this); 

    notifier.notify({ 
     object: this, 
     type: Thingy.MULTIPLY, 
     multiplied: amount 
    }); 
    }, 

    incrementAndMultiply: function(incAmount, multAmount) { 
    var notifier = Object.getNotifier(this); 

    notifier.performChange(Thingy.INCREMENT_AND_MULTIPLY, function() { 
     this.increment(incAmount); 
     this.multiply(multAmount); 
    }, this); 

    notifier.notify({ 
     object: this, 
     type: Thingy.INCREMENT_AND_MULTIPLY, 
     incremented: incAmount, 
     multiplied: multAmount 
    }); 
    } 
} 

var observer = { 
    records: undefined, 
    callbackCount: 0, 
    reset: function() { 
     this.records = undefined; 
     this.callbackCount = 0; 
    }, 
} 
var observer2 = { 
    records: undefined, 
    callbackCount: 0, 
    reset: function() { 
     this.records = undefined; 
     this.callbackCount = 0; 
    }, 
}; 

observer.callback = function(r) { 
    console.log(r); 
    observer.records = r; 
    observer.callbackCount++; 
}; 

observer2.callback = function(r){ 
    console.log('Observer 2', r); 
} 

Thingy.observe = function(thingy, callback) { 
    // Object.observe(obj, callback, optAcceptList) 
    Object.observe(thingy, callback, [Thingy.INCREMENT, 
            Thingy.MULTIPLY, 
            Thingy.INCREMENT_AND_MULTIPLY, 
            'update']); 
} 

Thingy.unobserve = function(thingy, callback) { 
    Object.unobserve(thingy); 
} 

var thingy = new Thingy(2, 4); 

// Observe thingy 
Object.observe(thingy, observer.callback); 
Thingy.observe(thingy, observer2.callback); 

// Play with the methods thingy exposes 
thingy.increment(3);    // { a: 5, b: 7 } 
thingy.b++;      // { a: 5, b: 8 } 
thingy.multiply(2);    // { a: 10, b: 16 } 
thingy.a++;      // { a: 11, b: 16 } 
thingy.incrementAndMultiply(2, 2); // { a: 26, b: 36 }

當我試圖運行此我得到TypeError: undefined is not a function。我不熟悉Object.observe，那麼爲什麼會發生錯誤以及如何解決它。

注意：這需要Object.observe這僅在Chrome 33+中才有。

來源

2014-10-20 user568109

由於這個的經典誤解而發生錯誤。在你的代碼有：

var notifier = Object.getNotifier(this); 

notifier.performChange(Thingy.MULTIPLY, function() { 
    this.a *= amount; 
    this.b *= amount; 
}, this);

的這裏面performChange指本身，而不是它的通知採取的對象。要修復此用法：

var notifier = Object.getNotifier(this); 
var self = this; 

notifier.performChange(Thingy.MULTIPLY, function() { 
    self.a *= amount; 
    self.b *= amount; 
}, this);

更改所有通知程序，您的代碼將按預期工作。

來源

2014-10-20 07:40:33 user568109

爲什麼這個Object.observe通知示例不起作用

回答

相關問題