Question

<body>
   <script>
    ping = new Object;
    ping.test = '1234';
   </script>

<a href="#" onclick="alert(ping.test);">Test</a>
</body>

为什么这在IE8中有效但在Firefox或Chrome中无效？弹出窗口在FF v5和Chrome v12中给出“未定义”，在IE9中给出“1234”。

Answer 1

这是内联事件模型（DOM Level 0），因此只使用在其执行上下文中定义的变量。

以下部分

ping = new Object;
ping.test = '1234';

当解释器遍历页面时，

处于自己的执行上下文中。全局范围内的代码将通过this使用全局对象。

但是这里

<a href="#" onclick="alert(ping.test);">Test</a>

是单独执行，您的浏览器将其视为匿名函数。使用

<a href="#" onclick="alert(this);">Test</a>

不会导致我们想要的东西。该行看到window，this实际上用于内联事件处理程序使用的当前对象。

因此，除非我们允许通过引用window来查看ping，否则不会在此上下文中定义ping。

<a href="#" onclick="alert(window.ping.test);">Test</a>

现在，当浏览器运行时，它将获取window全局变量，该变量在（\ script \）上下文中与this相同，并且可以访问ping.test

在以下浏览器中看到

Google Chrome Mac 12.0.742.112
Safari Version 5.0.5（6533.21.1）
Firefox Mac 3.6.18

<强>参考
Mozilla Docs: this keyword
Dom Events: inline model

Answer 2

ping已超出范围。试试这个：

<body>
    <a href="#" id="test">Test</a>
    <script>
    var ping = new Object();
    ping.test = '1234';
    document.getElementById("test").onclick = function() { 
        alert(ping.test);
    };
    </script>
</body>

Answer 3

这是一个范围问题。试试这个：

<body>
   <script>
    var ping = {};
    ping.test = '1234';
   </script>

<a href="#" onclick="alert(ping.test);">Test</a>
</body>

编辑：这对我有用

<body>
   <script>
    var ping = {};
    ping.test = '1234';

    function test(){
        alert(ping.test);
    }
   </script>
<a href="#" onclick="test();">Test</a>
</body>

的onclick = “警报（ping.test）;”给出undefined

3 个答案: