请考虑以下代码
var factory = function (element, opts) {
var MutationObserverController = function (element, opts) {
var defaults = {
subtree: true,
childList: true,
characterData: true
};
this.options = $.extend({}, defaults, opts);
this.watchedElement = element;
this.observer = new MutationObserver(this.mutationObserver);
this.observer.context = this;
//console.log(this.observer); //->THIS LINE
};
MutationObserverController.prototype.connect = function () {
this.observer.observe(this.watchedElement, this.options);
};
MutationObserverController.prototype.disconnect = function () {
this.observer.disconnect();
};
MutationObserverController.prototype.mutationObserver = function (mutations, observerObj) {
var ctx = observerObj.context;
ctx.disconnect();
mutations.forEach(function (m) {
console.log(m);
});
ctx.connect();
};
return new MutationObserverController(element, opts);
};
var mutOb = factory($('#myEditor').get(0), {});
mutOb.connect();
每次在 contenteditable div 中完成 DOM 修改(突变)时都会触发此代码,并产生错误指出observerObj.context未定义.
但是,如果我取消注释这一行//console.log(this.observer); //->THIS LINE
,不会产生任何错误,并且按预期工作。
Why?
这是JSFiddle http://jsfiddle.net/tivie/a9JS6/3/。要重现,请在 contenteditable div 中的文本后面按 ENTER。
注意:如果有人建议如何在没有循环引用的情况下将上下文传递给mutationObserver(或给出正确的范围),我也将不胜感激。
您可以使用函数#bind https://developer.mozilla.org/en-US/docs/JavaScript/Reference/Global_Objects/Function/bind保持正确this
:
this.observer = new MutationObserver(this.mutationObserver.bind(this));
Try it: http://jsfiddle.net/reLr9/ http://jsfiddle.net/reLr9/
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)