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

下面是我正在编写的一个简单的模式对话框脚本。它对CSS端使用引导模式

我的目标是创建一个简单的模式对话框，该对话框将显示并要求用户执行操作（单击“确定”或“取消”按钮）。我希望通过允许在这些单击事件发生时传入和调用一些回调函数，使其在未来的项目中灵活使用。还有一些其他选项喜欢显示或不显示取消按钮。（我还没有在中添加该部分）

所以我要做的是让函数接受选项/设置的对象。我也有默认选项/设置，用户选项随后合并到其中，允许用户选项是可选的，如果存在默认选项，则覆盖默认选项

我知道有几种方法可以做到这一点，但这是我从我尊敬的JS开发人员那里学习过的几个项目中看到的方法

下面是我的JavaScript代码，一个包含代码的JSFIDLE页面，以及一个JSFIDLE输出页面，用于查看结果

在代码中间有一条注释

//问题区域不调用回调函数

在这方面，我有三个不同的东西，我已经尝试了到目前为止

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（）

时，哪个应该持有回调函数，如果用户在其中传递了一个回调函数，它应该被重新分配给这个属性，如果用户没有，它至少应该看到一个空的默认值

我认为

这个

部分是混乱的，因为它在onclick函数中。顺便说一句，在我看来，这不像是一个正常的点击事件，我在另一个项目中看到了它，它“工作了”

因此，我得到的错误消息是

uncaughttypeerror:cannotcalledmethod'okCallback'of undefined

有人能告诉我如何绕过这个问题或改进它吗？多谢各位

JSFIDLE

全屏预览

var zPanel={
对话框：{
确认：功能（选项）{
var i；
//默认选项
此选项={
消息：“”，//字符串：默认消息
cancelButton:true，//布尔值：显示取消按钮
Ok按钮：true，//布尔值：显示Ok按钮
cancelCallback:function（）{}，//单击Cancel按钮时，function:Callback函数
okCallback:function（）{}//function:单击Ok按钮时的回调函数
};
//合并用户定义的选项
对于（选项中的i）{
如果（本.options中的i）{
这个。选项[i]=选项[i]；
}否则{
抛出新错误（“通知不支持选项：+i”）；
}
}
var container=document.createElement（'div'）；
//模态窗口模板
container.innerHTML+=“”+
'' +
“+此.options.message+”“”+
'' +
“好的”+
“取消”+
'' +
'' +
'';
//模态窗口
var modal=container.firstChild；
container=document.createElement（'div'）；
container.innerHTML=''；
//暗背景
var background=container.firstChild；
//查找确定按钮
var ok=modal.getElementsByTagName（'button'）[0]；
ok.onclick=函数（）{
modal.parentNode.removeChild（modal）；
document.body.removeChild（背景）；
//问题区域不调用回调函数
this.options.okCallback（）；
//zPanel.dialog.confirm.options.okCallback（）；
//options.okCallback（）；//如果存在用户定义的回调，则可以使用
}
//查找取消按钮
var cancel=modal.getElementsByTagName（'button'）[1]；
cancel.onclick=函数（）{
modal.parentNode.removeChild（modal）；
document.body.removeChild（背景）；
//问题区域不调用回调函数
this.options.cancelCallback（）；
//zPanel.dialog.confirm.options.cancelCallback（）；
//options.cancelCallback（）；//如果存在用户定义的回调，则可以使用
}
document.body.appendChild（背景）；
document.body.appendChild（模态）；
}
}
}
//单击事件时创建对话框
$（'#删除_btn'）。单击（函数（）{
zPanel.dialog.confirm({
消息：“是否确实要删除操作？”，
cancelCallback:function（）{alert（'user pressed Cancel button'）}，
okCallback:函数（）{alert（'id deleted'）}，
});
});

此的上下文在函数内部发生变化，尤其是事件处理程序。使用

setTimeout

时，这也是一个常见问题

此

将引用事件发生的元素。克服此问题的一种方法是将处理程序外部的

this

的值存储在容器函数中的一个新变量中，然后在处理程序中引用该变量

因此，在您的

confirm

方法中添加如下内容：

var self = this;

在处理程序中，使用：

self.options.cancelCallback();

演示：

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

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

这样

cancelCallback

的

this

值将成为事件发生的元素，并将向其传递任何参数，如

事件

对象

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

.confirm({
    cancelCallback: function (e) {
        // `this` refers to the button
        // `e` refers to the event
    }
});

---

在javascript中，

这个

总是指函数的“所有者”

// 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有n个

// 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.

// 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