Question

我正在构建一个小型应用程序，它是销售查询过程的一部分。它有＆＃39;页面＆＃39;访客进展的地方。我将这些页面作为大对象文字的一部分进行了布局。在以下代码中，branch-select是其中一个页面。如您所见，init()函数使用this来引用parent branch-select来设置兄弟值。但是，save()函数是从click事件调用的，所以我不必使用this，而是每次设置值时都必须费力地写出完整的对象引用？请参阅代码＆amp;以下评论说明问题：

    // This is part of a larger object called "stepData"

        "previous page": {
            // ...
        }
        "branch-select": {
            ref: "Select Type",
            visited: false, 
            init: function(){
                this.visited = true;  // Here I can use "this" to set other values in the parent object
                // ....
            },
            next: "",
            save: function(){
                branchKey = $(this).attr('data-value');   // this function is invoked from a click event, so "this" refers to the DOM element that was clicked. Therefore throughout the rest of the function if I want to set values on the parent object, I have to write out the full object reference each time...
                switch(branchKey){
                    case "Lodges":
                        stepData['branch-select'].ref = "Lodges";
                        stepData['branch-select'].values[0].a = "Lodges";
                        stepData['branch-select'].next = "lodge-2";     // Do I really have to write out stepData['branch-select'] each time?
                        break;
                    case "Caravans":
                        stepData['branch-select'].ref = "Caravans";
                        stepData['branch-select'].values[0].a = "Caravans";
                        stepData['branch-select'].next = "van-2";
                        break;
                }
                stepData[stepData['branch-select'].next].init();
            }
        },
        "next page": {
            // ...
        }

为了DRY（不要重复自己）代码，我想知道是否有任何简洁的解决方案？

修改

Webkit的答案提出了一个新问题;点击的DOM元素（.branch-select）是动态引入的，所以要绑定click事件，我必须使用：

    $("#template-holder").on('click', ".branch-select", stepData['branch-select'].save);

（template-holder是始终存在的父元素）。如何将call（）方法集成到上面的代码中？

Answer 1

在处理事件时使用“this”引用对象的另一种方法是使用“call”。

例如：

var setData = {
    save: function(){
        // 'this' shall be setData!
        var _bs = this['branch-select'];

        _bs.ref = "Lodges"...
    }
}

然后：

$(".someElement").on('click', function() {
    setData.save.call(setData)
});

**更新（我很确定这应该是相同的）：

$("#template-holder").on('click', ".branch-select", function() {
    stepData['branch-select'].save.call(setData)
});

Javascript：重新分配＆＃39;这个＆＃39;还是另类？

1 个答案: