什么时候用引号括起 JS 变量
When to wrap JS variable in quotes
我有以下正在运行的 JS,但我对为什么需要将变量 func 括在引号中感到困惑。有人可以解释一下吗?
function CustomPrompt(){
this.render = function(dialog,func){
var winW = window.innerWidth;
var winH = window.innerHeight;
var dialogoverlay = document.getElementById('dialogoverlay');
var dialogbox = document.getElementById('dialogbox');
dialogoverlay.style.display = "block";
dialogoverlay.style.height = winH+"px";
dialogbox.style.left = (winW/2) - (550 * .5)+"px";
dialogbox.style.top = "100px";
dialogbox.style.display = "block";
document.getElementById('dialogboxhead').innerHTML = ' ';
document.getElementById('dialogboxbody').innerHTML = dialog;
document.getElementById('dialogboxbody').innerHTML += '<br><input id="prompt_value1" >';
document.getElementById('prompt_value1').focus();
//HERE'S THE LINE I'M CONFUSED BY
//*******************************
document.getElementById('dialogboxfoot').innerHTML = '<button onclick="Prompt.ok(\''+func+'\')">OK</button> <button onclick="Prompt.cancel()">Cancel</button>';
}
this.cancel = function(){
document.getElementById('dialogbox').style.display = "none";
document.getElementById('dialogoverlay').style.display = "none";
}
this.ok = function(func){
var prompt_value1 = document.getElementById('prompt_value1').value;
window[func](prompt_value1);
document.getElementById('dialogbox').style.display = "none";
document.getElementById('dialogoverlay').style.display = "none";
}
}
func
变量似乎是一个字符串,它标识附加到全局 window
对象的函数,您在 ok
函数中使用 window[func](prompt_value1);
调用该对象。
func
需要作为字符串发送,因为 它是 window 对象上的键。
如果您要删除示例中的 qoutes,按钮的 onclick 方法将尝试在当前范围内发送 func
变量的值。由于 func
是在您的函数范围内声明的,因此您将无法访问它。相反,变量值是内联的。
本例内联变量place
function hello(place) {
console.log(place);
}
function iHaveMyOwnScope() {
var place = "world"; // this is in my scope
var container = document.getElementById('container1');
container.innerHTML = '<button onclick="hello(\''+place+'\')">Hello1</button>';
}
iHaveMyOwnScope();
<div id="container1"></div>
这个例子试图通过全局范围
访问变量place
由于 place
未在全局范围内定义,因此无法访问。
function hello(place) {
console.log(place);
}
function iHaveMyOwnScope() {
var place = "world"; // this is in my scope
var container = document.getElementById('container1');
container.innerHTML = '<button onclick="hello(place)">Hello2</button>';
}
iHaveMyOwnScope();
<div id="container1"></div>
此示例以编程方式创建按钮并在函数范围内附加事件处理程序
function hello(place) {
console.log(place);
}
function iHaveMyOwnScope() {
var place = "world"; // this is in my scope
var container = document.getElementById('container1');
var button = document.createElement('button')
button.innerHTML = 'Hello3'
button.addEventListener('click', function() {
// Here we can access the place variable
// since this handler is defined in the functions scope
hello(place)
}, false)
// Add button to container
container.appendChild(button);
}
iHaveMyOwnScope();
<div id="container1"></div>
我有以下正在运行的 JS,但我对为什么需要将变量 func 括在引号中感到困惑。有人可以解释一下吗?
function CustomPrompt(){
this.render = function(dialog,func){
var winW = window.innerWidth;
var winH = window.innerHeight;
var dialogoverlay = document.getElementById('dialogoverlay');
var dialogbox = document.getElementById('dialogbox');
dialogoverlay.style.display = "block";
dialogoverlay.style.height = winH+"px";
dialogbox.style.left = (winW/2) - (550 * .5)+"px";
dialogbox.style.top = "100px";
dialogbox.style.display = "block";
document.getElementById('dialogboxhead').innerHTML = ' ';
document.getElementById('dialogboxbody').innerHTML = dialog;
document.getElementById('dialogboxbody').innerHTML += '<br><input id="prompt_value1" >';
document.getElementById('prompt_value1').focus();
//HERE'S THE LINE I'M CONFUSED BY
//*******************************
document.getElementById('dialogboxfoot').innerHTML = '<button onclick="Prompt.ok(\''+func+'\')">OK</button> <button onclick="Prompt.cancel()">Cancel</button>';
}
this.cancel = function(){
document.getElementById('dialogbox').style.display = "none";
document.getElementById('dialogoverlay').style.display = "none";
}
this.ok = function(func){
var prompt_value1 = document.getElementById('prompt_value1').value;
window[func](prompt_value1);
document.getElementById('dialogbox').style.display = "none";
document.getElementById('dialogoverlay').style.display = "none";
}
}
func
变量似乎是一个字符串,它标识附加到全局 window
对象的函数,您在 ok
函数中使用 window[func](prompt_value1);
调用该对象。
func
需要作为字符串发送,因为 它是 window 对象上的键。
如果您要删除示例中的 qoutes,按钮的 onclick 方法将尝试在当前范围内发送 func
变量的值。由于 func
是在您的函数范围内声明的,因此您将无法访问它。相反,变量值是内联的。
本例内联变量place
function hello(place) {
console.log(place);
}
function iHaveMyOwnScope() {
var place = "world"; // this is in my scope
var container = document.getElementById('container1');
container.innerHTML = '<button onclick="hello(\''+place+'\')">Hello1</button>';
}
iHaveMyOwnScope();
<div id="container1"></div>
这个例子试图通过全局范围
访问变量place由于 place
未在全局范围内定义,因此无法访问。
function hello(place) {
console.log(place);
}
function iHaveMyOwnScope() {
var place = "world"; // this is in my scope
var container = document.getElementById('container1');
container.innerHTML = '<button onclick="hello(place)">Hello2</button>';
}
iHaveMyOwnScope();
<div id="container1"></div>
此示例以编程方式创建按钮并在函数范围内附加事件处理程序
function hello(place) {
console.log(place);
}
function iHaveMyOwnScope() {
var place = "world"; // this is in my scope
var container = document.getElementById('container1');
var button = document.createElement('button')
button.innerHTML = 'Hello3'
button.addEventListener('click', function() {
// Here we can access the place variable
// since this handler is defined in the functions scope
hello(place)
}, false)
// Add button to container
container.appendChild(button);
}
iHaveMyOwnScope();
<div id="container1"></div>