Javascript 用作onclick处理程序的函数运算符和函数声明的行为不同_Javascript_Scope

Javascript 用作onclick处理程序的函数运算符和函数声明的行为不同

javascript

Javascript 用作onclick处理程序的函数运算符和函数声明的行为不同,javascript,scope,Javascript,Scope,我有两个职能： doSomething = function() { alert(this); } var doSomethingElse = function() { alert(this); } 这是我的HTML： <div id="banner-message"> <p>Hello World</p> <button id='button1' onclick='doSomething()'>Do Somethi

我有两个职能：

doSomething = function()  {
    alert(this);
}


var doSomethingElse = function() {
    alert(this);
}

这是我的HTML：

<div id="banner-message">
  <p>Hello World</p>
  <button id='button1' onclick='doSomething()'>Do Something</button>
  <button id='button2' onclick='doSomethingElse()'>Do Something Else</button>
</div>


你好，世界
做点什么
做点别的

为什么

doSomething（）
有一个细微的差别。这将在全局范围内创建doSomething
：
doSomething = function()

这将在当前范围内创建doSomething
：
var doSomething = function()

后者不起作用的原因是，您正在作用域内执行此代码（闭包，window.onload=function（）{}
，$（function（）{}）
等），因此变量在作用域外不可用。在小提琴中，JavaScript代码被包装在window.onload=function（）{var doSomethingElse=…}
中，有一个细微的差别。这将在全局范围内创建doSomething
：
doSomething = function()

这将在当前范围内创建doSomething
：
var doSomething = function()

后者不起作用的原因是，您正在作用域内执行此代码（闭包，window.onload=function（）{}
，$（function（）{}）
等），因此变量在作用域外不可用。在小提琴中，JavaScript代码被包装在window.onload=function（）{var doSomethingElse=…}
中
为什么doSomething（）函数调用工作，而doSomethingElse（）不工作
只有当您显示的代码不在全局范围内时（您的提琴中的代码被包装在JSFIDLE本身提供的onload
处理程序中，请参见JavaScript窗格上的选项-这是JSFIDLE更可笑的默认选项之一）。原因就是我所说的。不在此代码中声明doSomething
：
doSomething = function()  {
        alert(this);
}

var doSomethingElse = function() {
    alert(this);
}

…您正在创建一个名为doSomething
的全局变量。但是通过在此代码中声明doSomethingElse
：
doSomething = function()  {
        alert(this);
}

var doSomethingElse = function() {
    alert(this);
}

…您正在代码所在的范围内创建局部变量
为什么这很重要？因为在旧的onXYZ
属性样式事件处理程序中调用的任何函数都必须是全局函数
相反：
使用严格模式（“Use strict”
）以使分配给未声明的标识符是错误的，而不是创建自动全局标识符
使用现代事件处理（addEventListener
等），而不是需要全局函数的属性样式的事件处理程序
将脚本
标记放在文档正文的末尾，就在关闭的
标记之前，以便在代码运行之前创建HTML定义的所有元素。（这样就不需要onload
或类似的处理程序。）
例如（堆栈片段将自动脚本
标记放在正文
的末尾）：

“严格使用”；
//用于避免创建全局变量的作用域函数
（功能（）{
var doSomething=函数（）{
控制台日志（“doSomething”）；
};
var doSomethingElse=函数（）{
控制台日志（“doSomethingElse”）；
};
document.getElementById（“button1”）。addEventListener（“单击”，doSomething）；
document.getElementById（“按钮2”）。addEventListener（“单击”，doSomethingElse）；
})();

你好，世界
做点什么
做点别的

为什么doSomething（）函数调用工作，而doSomethingElse（）不工作
只有当您显示的代码不在全局范围内时（您的提琴中的代码被包装在JSFIDLE本身提供的onload
处理程序中，请参见JavaScript窗格上的选项-这是JSFIDLE更可笑的默认选项之一）。原因就是我所说的。不在此代码中声明doSomething
：
doSomething = function()  {
        alert(this);
}

var doSomethingElse = function() {
    alert(this);
}

…您正在创建一个名为doSomething
的全局变量。但是通过在此代码中声明doSomethingElse
：
doSomething = function()  {
        alert(this);
}

var doSomethingElse = function() {
    alert(this);
}

…您正在代码所在的范围内创建局部变量
为什么这很重要？因为在旧的onXYZ
属性样式事件处理程序中调用的任何函数都必须是全局函数
相反：
使用严格模式（“Use strict”
）以使分配给未声明的标识符是错误的，而不是创建自动全局标识符
使用现代事件处理（addEventListener
等），而不是需要全局函数的属性样式的事件处理程序
将脚本
标记放在文档正文的末尾，就在关闭的
标记之前，以便在代码运行之前创建HTML定义的所有元素。（这样就不需要onload
或类似的处理程序。）
例如（堆栈片段将自动脚本
标记放在正文
的末尾）：

“严格使用”；
//用于避免创建全局变量的作用域函数
（功能（）{
var doSomething=函数（）{
控制台日志（“doSomething”）；
};
var doSomethingElse=函数（）{
控制台日志（“doSomethingElse”）；
};
document.getElementById（“button1”）。addEventListener（“单击”，doSomething）；
document.getElementById（“按钮2”）。addEventListener（“单击”，doSomethingElse）；
})();

你好，世界
做点什么
做点别的
它可以在我的side@lucumt-您可能正在全局范围内使用代码。OP的小提琴不行，它可以在我的房间里用side@lucumt-您可能正在全局范围内使用代码。OP的小提琴不好，太棒了，谢谢。所以这基本上是由于JSFiddle的工作方式吗？@ashwnacharya是的。但你可以改变小提琴的选择。单击JavaScript选项卡内的JavaScript标题并更改加载类型
选项。它默认为加载时的，，更改为无包装-bo