问题描述
这个小片段有问题:
<a href="#" onClick="javascript:download();">测试</a>
一旦我在 Chrome 14.0 中点击链接,我就会得到一个
未捕获的类型错误:字符串不是函数
在 Firefox 和 IE 中它工作得很好.我通过重命名函数解决了这个问题,但我仍然很好奇 Chrome 中的下载"是什么.据我所知,这不是保留关键字,那可能是什么?
元素在 HTML5 中具有
download
属性,如此处,默认值为 ""
(空字符串).
这意味着 download === this.download
在 onclick
处理程序中(this
是 onevent
属性),因此元素的 download
属性优于 window
的 download
属性.
这个小提琴 列出了默认情况下存在的所有字符串属性.你可以看到 download
和 innerHTML
一样是一个属性,也失败 作为函数使用时完全相同的原因(即试图引用 window.innerHTML
,而是执行 elem.innerHTML()
).
正如评论中所说,使用 window
不会混淆属性/属性变量的计算结果.
这种作用域行为实际上似乎不是由 this
值引起的,而是由特定的作用域链"引起的.正在建设中.
根据 HTML5 规范:>
词法环境范围
让 Scope
成为 NewObjectEnvironment(元素的文档,全局环境)
的结果.
如果元素有表单所有者,让 Scope
成为 NewObjectEnvironment(元素的表单所有者,Scope)
的结果.
让 Scope
成为 NewObjectEnvironment(元素的对象,Scope)
的结果.
即发生的事情是作用域链是 window
-> ->element
(增加优势).这意味着 download
的计算结果为 element.download
而不是 window.download
.由此还可以得出的结论是,getElementById
会冒泡到 document.getElementById
(假设 elem.getElementById
不存在).>
我设置了一个系统示例,以便您可以看到变量如何在范围内冒泡链:
window.a = 1;文件.a = 2;elem.a = 3;窗口.b = 4;文件.b = 5;窗口.c = 6;
然后, 记录
3
, 5
, 6
点击时.
I've had a problem with this little snippet:
<script>
function download() {
alert('Hi');
}
</script>
<a href="#" onClick="javascript:download();">Test</a>
Once I click on the link in Chrome 14.0, I get a
Uncaught TypeError: string is not a function
<a>
elements have a download
attribute in HTML5 as explained here, with a default value of ""
(an empty string).
This means that download === this.download
in the onclick
handler (this
is the element in onevent
attributes), and therefore the download
attribute of the element is superior to the download
property of window
.
This fiddle lists all string attributes that are present by default. You can see download
is an attribute just like innerHTML
, which also fails with the exact same reason when used as a function (i.e. trying to refer to window.innerHTML
, but instead executing elem.innerHTML()
).
As said in the comments, using window
makes for no confusion as to what property/attribute variables will evaluate to.
This scope behaviour does actually not seem to due to the this
value but rather a specific "scope chain" that is being constructed.
As per the HTML5 specification:
I.e. what is happening is the scope chain is window
-> document
-> element
(increasing superiority). This means that download
evaluates to element.download
and not window.download
. What also can be concluded from this is that getElementById
will bubble up to document.getElementById
(given elem.getElementById
does not exist).
I set up a systematic example so that you can see how variables bubble up the scope chain:
window.a = 1;
document.a = 2;
elem.a = 3;
window.b = 4;
document.b = 5;
window.c = 6;
Then, <a ... onclick="console.log(a, b, c)">
logs 3
, 5
, 6
when clicked.
这篇关于不能使用“下载"作为 javascript 中的函数名的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持!