javascript - 对象的范围未按预期运行

Question

我正在尝试改掉编码中长期存在的坏习惯:将小部件写入全局范围。

我为网页上的新闻卷制作了一个大型的、大部分独立的脚本，在我将整个脚本填充到一个函数中后，我对它的工作效果感到惊喜......事实上，太好了。

为了确保我没有作弊，我编写了以下代码以确保我的范围界定正确:

var story_count = "THIS IS NOT A NUMBER";

console.log(story_count);

touch_roll = function()
{
    this.story_count = 0;
}

console.log(story_count);

touch_roll();

console.log(story_count);

完全期望这会在控制台中产生以下响应

THIS IS NOT A NUMBER
THIS IS NOT A NUMBER
THIS IS NOT A NUMBER

我非常惊讶地发现输出实际上是这个:

THIS IS NOT A NUMBER
THIS IS NOT A NUMBER
0

这不是我想的那样吗？研究并没有真正帮助我，但我有点精疲力尽，所以我完全有可能读错了。如果不是这样，那么我如何将所有 namespace 完全保留在该函数的范围内，以免扰乱网站上的现有位？

<小时/>

根据下面 Matt 的回答，这是更正后的代码:

var story_count = "THIS IS NOT A NUMBER";

console.log(story_count);

var touch_roll = new function()
{
    this.story_count = 0;
    console.log(story_count);
}

console.log(story_count);

通过将 touch_roll 声明为 var 并将该函数实例化为 new Javascript 将所述函数作为运行时评估为一个对象(因此我们还可以删除对底部 touch_roll() 的调用)。

修正后的输出如下:

THIS IS NOT A NUMBER
0
THIS IS NOT A NUMBER

Answer 1

因为您没有使用 new 调用 touch_roll，所以 this 是 window 对象(这就是浏览器环境中的全局变量属于)。

如果您使用new，那么您会得到:

THIS IS NOT A NUMBER
THIS IS NOT A NUMBER
THIS IS NOT A NUMBER

此外，您还将 touch_roll 声明为隐式全局变量。要么使用 function declaration syntax ，或向其中添加 var。