Question

我是13年的网络开发人员，但我现在真的在学习 JavaScript所以请耐心等待我，有很多方法可以做，所以我不确定我是对的还是错。

下面我有一个简单的模态对话脚本我正在处理。它使用 Bootstrap Modal 作为它的CSS端。

我的目标是创建一个简单的模态对话框，显示并要求用户执行操作（确定或取消按钮单击）。我想通过允许在这些点击事件发生时传入和调用一些Callback函数，使其在未来的项目中使用变得灵活。还有一些其他选项，比如显示取消按钮。（我尚未添加该部分）

所以我正在做的是让函数接受一个选项/设置对象。我还有默认选项/设置，然后用户选项合并到其中，允许用户选项是可选的，并且如果它们存在则覆盖默认值。

我知道有几种方法可以做到这一点，但这是我在JS开发人员研究过的一些项目中看到的方法。

下面是我的JavaScript代码，一个包含代码的JSFiddle页面，以及一个只看到结果的JSFiddle输出页面。

在代码中途，有一条评论// PROBLEM AREA DOES NOT CALL THE CALLBACK FUNCTION

在这个领域，到目前为止我有3个不同的事情......

this.options.cancelCallback(); // This is what I wanted to work!
zPanel.dialog.confirm.options.cancelCallback(); Tried this 2nd
options.cancelCallback(); // This Works if there is a user defined callback but errors when not

所以我现在在那个区域的问题是当我打电话给this.options.cancelCallback()哪个应该持有回调函数时，如果用户传递了一个应该被重新分配给这个属性，如果用户没有，它至少应该看到一个空的默认值。

我觉得this部分搞砸了，因为它在onclick函数里面...顺便说一句，对我来说看起来不像是普通的点击事件，我在另一个项目中看到它并且“工作”

所以我收到的错误消息是Uncaught TypeError: Cannot call method 'okCallback' of undefined

有人可以使用JS，向我展示如何解决这个问题或改进这个问题，我正在努力学习做这样的事情的最佳方法。谢谢

JSFiddle http://jsfiddle.net/jasondavis/dymn5/

全屏预览http://jsfiddle.net/jasondavis/dymn5/show/result/

var zPanel = {

    dialog: {

        confirm: function (options) {

            var i;

            // Default options
            this.options = {
                message: "",                    // String: Default Message
                cancelButton: true,             // Boolean: Show Cancel Button
                okButton: true,                 // Boolean: Show Ok Button
                cancelCallback: function () {}, // Function: Callback function when Cancel button clicked
                okCallback: function () {}      // Function: Callback function when Ok button clicked
            };
            // Merge User defined options
            for(i in options) {
                if(i in this.options) {
                    this.options[i] = options[i];
                } else {
                    throw new Error("Notice doesn't support option: " + i);
                }
            }

            var container = document.createElement('div');
            //template for modal window
            container.innerHTML += '<div class="modal-content confirm">' +
                '<div class="modal-body">' +
                '<div>' + this.options.message + '</div>' +
                '<div class="controls">' +
                '<button type="button" class="btn primary">OK</button>' +
                '<button type="button" class="btn">Cancel</button>' +
                '</div>' +
                '</div>' +
                '</div>';

            //modal window
            var modal = container.firstChild;
            container = document.createElement('div');
            container.innerHTML = '<div class="modal-backdrop fade in"></div>';
            //dark background
            var background = container.firstChild;

            //Find OK button
            var ok = modal.getElementsByTagName('button')[0];
            ok.onclick = function () {
                modal.parentNode.removeChild(modal);
                document.body.removeChild(background);

                // PROBLEM AREA DOES NOT CALL THE CALLBACK FUNCTION
                this.options.okCallback();
                //zPanel.dialog.confirm.options.okCallback();
                //options.okCallback(); // Works if there is a user defined callback
            }

            //Find Cancel button
            var cancel = modal.getElementsByTagName('button')[1];
            cancel.onclick = function () {
                modal.parentNode.removeChild(modal);
                document.body.removeChild(background);

                // PROBLEM AREA DOES NOT CALL THE CALLBACK FUNCTION
                this.options.cancelCallback();
                //zPanel.dialog.confirm.options.cancelCallback();
                //options.cancelCallback(); // Works if there is a user defined callback
            }

            document.body.appendChild(background);
            document.body.appendChild(modal);
        }

    }

}

// Create a Dialog on Click event
$('#delete_btn').click(function () {
    zPanel.dialog.confirm({
        message: 'Are you sure you want to delete action?',
        cancelCallback: function(){alert('user pressed Cancel button')},
        okCallback: function () {alert('id deleted')},
    });
});

Answer 1

函数内部this更改的上下文，尤其是事件处理程序。使用setTimeout时，这也是一个常见问题。

this将引用事件发生的元素。一种克服此问题的方法是将处理程序外的this值存储在容器函数的新变量中，然后引用处理程序中的变量。

请在confirm方法中添加以下内容：

var self = this;

在你的处理程序中，使用：

self.options.cancelCallback();

DEMO： http://jsfiddle.net/dymn5/3/

使用处理程序的上下文提供传递的回调的方法，您可以使用：

self.options.cancelCallback.apply(this, arguments);

这样cancelCallback的{{1}}值将是事件发生的元素，并且会传递任何参数，例如this对象。

这允许您将其用于您的选项：

event

Answer 2

在javascript中，this始终引用函数的“所有者”。

// example 1: function without an owner
var displayA = function() { console.log(this.a); }
displayA(); // undefined

// example 2: object with a function member
var obj = {
    a: 1,
    displayA: displayA
}

obj.displayA(); // logs "1"
// note that obj.displayA is the exact same function as displayA. But when it is called, obj is the owner of the function.

在第一个示例中，displayA没有“所有者”。当函数没有所有者时，this自动被假定为全局对象（浏览器中为window）。

在第二个示例中，displayA的所有者为obj。在这种情况下，this会引用obj，因此会显示obj.a（即值1）。

解决此问题的常用方法包括：

// storing `this` in a variable, when a callback function needs a reference to this
var self = this;
window.onload = function() { 
    // I can use self instead of this!
    self.doStuff();
}

// using Function#call or Function#apply
// let's say I want to use the "obj" variable as the "this" reference in a function:
function myFunction(a, b) { this.doStuff(a, b); }
myFunction.call(obj, a, b); // after obj, pass normal function arguments
myFunction.apply(obj, [a, b]); // after obj, pass function arguments in an array

无法在JavaScript中的click事件中访问此内容

2 个答案: