Javascript 为什么 object 属性在 header 脚本中可以，但在 html 中未定义？

Question

第一个警报在加载时正确显示 "hello"，但是当我单击按钮时，警报显示 "undefined" 完全相同属性。

在 firefox quantum 上测试，从 uwamp 直接从文件，在 IE 和 edge 上测试。

<html>
    <head>
        <meta charset="UTF-8"/>
        <title>TestObjectProperty</title>
            <script type="text/javascript"> 

                lang = {
                    greeting: "Hello",
                    bye: "good bye!"
                };

                alert(lang.greeting); 
                //works fine, alert shows Hello

            </script>
    </head>
    <body >
        <button  onclick="alert(lang.greeting);">test lang</button>
        <!-- alert shows UNDEFINED -->
    </body>
</html>

我想我应该在单击按钮时显示 "Hello"。感谢您的帮助。

Answer 1

问题是 lang 是当前元素的一个属性：

https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/lang

如果您这样做 onclick="console.log(lang)"，您会看到它是一个空字符串。在 window 范围内显式定义 lang，或使用另一个变量名称，例如 _lang:

<html>
    <head>
        <meta charset="UTF-8"/>
        <title>TestObjectProperty</title>
            <script type="text/javascript"> 

                window.lang = {
                    greeting: "Hello",
                    bye: "good bye!"
                };

                alert(window.lang.greeting); 
                //works fine, alert shows Hello

            </script>
    </head>
    <body >
        <button  onclick="alert(window.lang.greeting);">test lang</button>
        <!-- alert should show "Hello" -->
    </body>
</html>

请参阅 this jsfiddle 进行演示。

Javascript 为什么 object 属性 在 header 脚本中可以，但在 html 中未定义？

Javascript why is object property ok in header script but undefined in html?

javascript

object

undefined

Javascript 为什么 object 属性在 header 脚本中可以，但在 html 中未定义？