Question

我正在尝试使用看起来像这样的ubonstrustive dom，

  var app = {

    common : {

        init: function() {

            //Initialisate the request object
            app.request.init();
        }

    },

    request: {

        users : "helloworld",

        init: function() {
            alert("...request started...");
            $('form').on('change', '#workbase', this.workBaseChange);
        },

        workBaseChange: function(e) {
            var that = this;
            console.log(this);
        }

    },

    validation : {}

}

UTIL = {

    fire : function(func, funcname, args) {

        var namespace = app;
        funcname = (funcname === undefined) ? 'init' : funcname;
        if(func !== '' && namespace[func] && typeof namespace[func][funcname] == 'function') {
            namespace[func][funcname](args);
        }

    },

    loadEvents: function() {
        UTIL.fire('common');
        $.each(document.body.className.split(/\s+/), function(i, classnm){
            UTIL.fire(classnm);
        });
    }
};

$(document).ready(UTIL.loadEvents);

request.workBaseChange在更改选择菜单时触发，但如果该函数中的log this返回更改的select而不是我期望的请求对象，我是否做错了什么？如何获取请求{}的上下文？

Answer 1

尝试

$('form').on('change', '#workbase', this.workBaseChange.bind(this));

您可以在此处找到更多信息：https://developer.mozilla.org/en/docs/Web/JavaScript/Reference/Global_objects/Function/bind

注意如果使用IE，则仅在IE9或更高版本中支持。然而，上面的链接上有一个polyfill。

this.workBaseChange是提供给jquery事件的回调。在回调中，＆＃39;这个＆＃39; value设置为触发事件的元素，即select。 bind函数返回一个新函数，其值为＆＃39; this＆＃39;限定为该功能，然后设置＆＃39;这个＆＃39;属性为您提供的值。

另见jquery docs（Context，Call and Apply）：

http://api.jquery.com/Types/#Function

在JavaScript中，变量＆＃34; this＆＃34;总是指当前   上下文。默认情况下，＆＃34;这个＆＃34;指的是窗口对象。在一个   函数此上下文可以更改，具体取决于函数的方式   调用。

使用handle元素调用jQuery中的所有事件处理程序   背景。

在此处查看此工作：https://jsfiddle.net/mzxrhz8t/

不显眼的DOM-ready javascript失去了这个的上下文，

1 个答案: