存储实例用于嵌套映射/对象

Store instance for usage in nested map/object

本文关键字：对象 映射 嵌套 实例 用于 存储      更新时间：2023-09-26

我的JQuery小部件有一个非常恼人的作用域问题。实际上，我需要访问我的地图/对象options中的小部件实例(this)。

这是可能的吗?有什么建议吗?

$.widget( "my.myWidget", {
    // Below 'this.defCallback' will be undefined
    // How can I store 'this' (the widget instance) in a variable??
    options: {
        callback: this.defCallback  // allow user to overwrite/provide custom callback
    },

    ....

    defCallback: function() {
        console.log('defCallback');
    }
});

如果我有一个嵌套函数，我知道我可以很容易地解决这个问题，但我有一个嵌套的对象/映射，这使事情变得困难。

function foo {
    var _this = this;
    ...
    var bar = function() {
        // easily access this
        _this.defCallback();
        ...
    }
}

用法:

$('<div></div>')
    .myWidget();  // use defCallback
$('<div></div>')
    .myWidget({
        callback: function() {
            ...
        }
    });  // use custom callback

Edit:如何"绑定"回调函数并调用:

    _create: function() {
        this.element.click( this.options.callback );
    }

.click (value.callback (_this)

在javascript中，你可以使用apply()和call()方法动态地改变函数的上下文。

在es5上可以使用bind()。所以你的代码:

_create: function() {this.element。点击(this.options.callback);}

变成apply():

_create: function() {
    var el = this.element;
    var callback = this.options.callback;
    el.click(function() {
         callback.apply(el);
         // If you have parameters:
         // callback.apply(el, arguments || array);
    });
}
与<<p> em>调用(): 
_create: function() {
    var el = this.element;
    var callback = this.options.callback;
    el.click(function() {
         callback.call(el);
         // If you have parameters:
         // callback.call(el, arg0, arg1, ...);
    });
}

与 bind () : 

_create: function() {
    this.element.click(this.options.callback.bind(this));
}

由于您的问题是将this引用绑定在对象定义中，您需要更改代码。

快速的方法是像这样修改它(从你的小提琴):

var mw = {
    defCallback: function () {
        alert("abc");
    },
    _create: function () {
        //this.populateOptions();
        alert("Is undefined: " + this.options.isUndefined);  // outputs 'true'
        this.element.click(this.options.callback.bind(this));
    },
    populateOptions: function() {
        if (this.options.callback === undefined)
            this.options.callback = this.defCallback;
    }   
};

首先用父属性和函数定义对象。

mw.options = {
    //accessObjectParent: this.instantiator,
    isUndefined: (mw.defCallback === undefined), // this refers to the map/object 
    // Can I access the maps 'parent'/instantiator?
    // this.instantiator.defCallback ???
    callback: mw.defCallback
};

然后附加选项对象，您可以引用父对象而不是使用this。

$。小部件("我。

现在在小部件声明中传递对象

相关文章：