Question

我发现全局窗口对象的这种行为有点奇怪。

var x = 10;
function SomeClass(){
    var y = 15;
    console.log("Someclass:y - " + this.y); //prints undefined
}

console.log("window.x: " + window.x);   //prints 10

var obj = new SomeClass();
console.log("obj.y: " + obj.y); //prints - undefined

x 和 y 这两个变量都是本地的（分别为 window 和 SomeClass ）。尽管从对象上下文中调用了 y ，但它只打印undefined - 大概是因为这就是局部变量的行为方式。但是 window.x 通过打印x的值来表现不同。我知道这是你创建全局变量的方法，但这是 window 的一个特殊属性，它使局部变量的行为与对象变量类似吗？

Answer 1

根据ECMAScript language specification：

如果发生变量语句在一个FunctionDeclaration里面，变量定义为该函数中的函数局部范围， [...]。否则，它们被定义为全局范围（也就是说，它们是作为成员创建的全球对象[...]）

本质上，这意味着var关键字在函数内和全局范围内的含义略有不同。

我认为一种方法是在全局范围内创建变量更像是在创建对象后设置实例变量，而不是设置局部变量。

比较在构造函数中设置局部变量：

function SomeClass(){ 
    var y = 15; 
} 

var obj = new SomeClass(); 
console.log("obj.y: " + obj.y); //prints - undefined

并在创建对象后设置实例变量：

function SomeClass(){ 
} 

var obj = new SomeClass(); 
obj.y = 15;
console.log("obj.y: " + obj.y); //prints - 15

Answer 2

为了达到你想要的变量，它应该是this.y = 15;这将允许你通过this.y引用它，但obj.y它是打印的原因未定义只是因为y未被指定为SomeClass的成员，就像它中的随机变量一样。

http://www.javascriptkit.com/javatutors/object.shtml

Answer 3

您需要将y定义为SomeClass的成员。否则它只是函数SomeClass的闭包中的局部私有变量，但不是SomeClass对象的可公开访问的成员，所以：

function SomeClass(){
    this.y = 15;
    console.log("Someclass:y - " + this.y); //prints 15
}

关于分配给全局空间的变量也是窗口属性的好问题，不确定那个。人们会认为你需要

this.x="something"

以通过window.x访问它

Answer 4

要点的重点是，在您的课程示例中， y是私有的。

正如其他人提到的那样，有几种方法可以使它成为公共成员变量，但我想提到的一点是，以下结构的事实：

function SomeClass(){
  var y = 15;
}

...可以利用您的优势，因为它是私有。

通常我使用几种不同的模式来创建类和对象，但是你可以做的一件事就是从你的函数中返回一个对象文字，其中嵌入了可以引用y的函数，而不是将y暴露给外部世界。

将此示例弹出到页面中并试用它，看看您可以使用访问器方法读取和写入y：

<script type="text/javascript">
function SomeClass() {
  var y = 15;
  return {
    getY : function() { return y },
    setY : function(newY) { y = newY; }
  };
};

var obj = new SomeClass();

function showY() {
    alert("obj.getY: " + obj.getY()); // alerts current value of y.
}

function updateY() {    
    obj.setY(25);
    alert("updated.");
}

</script>
<input type="button" onclick="showY();return false;" value="showY"/>
<input type="button" onclick="updateY();return false" value="updateY"/>

然后先点击“showY”，再点击“updateY”，然后再点击“showY”查看行为。

这不是我个人使用的唯一模式，但是javascript非常灵活，你可以用它做很多有趣的事情。

希望我没有过多地鼓励你，并希望它对概念有所帮助！

Javascript局部变量就像窗口中的类变量一样

4 个答案: