除非调用console.log，否则未定义循环引用父子关系

Circular reference parent-child is undefined unless console.log is called

本文关键字：未定义 循环 引用 父子关系 调用 console log      更新时间：2023-09-26

请考虑以下代码

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

每当在内容可编辑的div中进行DOM修改（突变）时，都会触发此代码，并且它会导致一个错误，说明observerObj.text未定义。

但是，如果我取消对这一行//console.log(this.observer); //->THIS LINE的注释，则不会产生任何错误，并且它可以按预期工作。

为什么？

这是JSFiddle。要复制，请在文本后面的contenteditablediv中按ENTER键。

注意：如果有人建议如何在没有循环引用的情况下将上下文传递给mutationObserver（或给出正确的范围），我也将不胜感激。

您可以使用函数#bind来保持正确的this:

this.observer = new MutationObserver(this.mutationObserver.bind(this));

试试看：http://jsfiddle.net/reLr9/

相关文章：