我正在按照教程显示工厂模式以在javascript中创建对象。下面的代码让我难以理解它的工作原理。
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>6-2.htm</title>
</head>
<body>
<script type="text/javascript">
function createAddress(street, city, state, zip) {
var obj = new Object();
obj.street = street;
obj.city = city;
obj.state = state;
obj.zip = zip;
obj.showLabel = function() {
//alert(this.street + "\n" + this.city + ", " + this.state + " " + this.zip);
//var obj;
alert(obj.street + "\n" + obj.city + ", " + obj.state + " " + obj.zip);
};
return obj;
};
var JohnAddr = createAddress("12 A St.", "Johnson City", "TN", 37614);
var JoeAddr = createAddress("10061 Bristol Park", "Pensacola", "FL", 32503);
JohnAddr.showLabel();
JoeAddr.showLabel();
</script>
</body>
</html>
第一条注释行对我来说似乎很合适(在showLabel函数中使用this
关键字)。我不确定在它的位置使用obj是如何工作的。 obj必须在某处引用一个全局变量,因为在该函数中运行时没有定义obj,对吧?因为我制作了2个对象,在这种情况下不仅仅是运气都能很好地显示,所以obj内容的旧值被正确存储和引用。但怎么样?如果我取消注释第二个评论然后它会中断,我理解为什么,现在我明确地告诉js我正在谈论一个局部变量并且没有。
答案 0 :(得分:6)
欢迎来到封闭世界。你是正确的感觉到你的行为,就像它是一个全球但不是全球的。这就是闭包的行为方式。
基本上在javascript中,当函数返回时,并非所有局部变量都必须像Java或C那样被垃圾收集/释放。如果存在对该变量的引用,那么该变量将在定义它的函数范围内存活。 / p>
从技术上讲,机制是不同的,有些人试图以这种方式解释它,并最终混淆了许多其他人。对我来说,闭包是一种“私有”全局变量,就像全局变量一样,它们在函数中共享,但它们并未在全局范围内声明。这就像你在遇到这个功能时所描述的那样。
以下是我在其他一些与javascript闭包有关的stackoverflow的答案,我认为值得一读:
Hidden Features of JavaScript?
Please explain the use of JavaScript closures in loops
或者您可以使用短语“javascript closure”来探索主题。
补充答案。
至于解释为什么this
在您的代码中起作用(而不是* cough *尝试更正您的代码,以便this
即使在未经修正的版本中工作也可以正常工作*咳嗽* ; - ):
Javascript有后期绑定。很晚,非常晚。 this
不仅在编译期间没有绑定,它甚至在运行时也没有绑定。它在执行时受到约束 - 也就是说,在调用函数之前,你无法知道它真正指向的是什么。调用者基本上可以决定this
的值是什么,而不是使用this
的函数。
一些时髦的javascript后期绑定动作:
function foo () {
alert(this.bar);
}
var bar = "hello";
var obj = {
foo : foo,
bar : "hi"
};
var second_obj = {
bar : "bye"
};
foo(); // says hello, 'this' refers to the global object and this.bar
// refers to the global variable bar.
obj.foo(); // says hi, 'this' refers to the first thing before the last dot
// ie, the object foo belongs to
// now this is where it gets weird, an object can borrow/steal methods of
// another object and have its 'this' re-bound to it
obj.foo.call(second_obj); // says bye because call and apply allows 'this'
// to be re-bound to a foreign object. In this case
// this refers to second_obj
在您的代码中,this
方便地将调用该函数的对象称为其方法,这就是为什么即使您显然不使用所谓的正确构造函数语法。
答案 1 :(得分:2)
obj
函数在showLabel
函数内工作的原因是因为obj是局部变量。每次调用create address时都会声明该函数。在JavaScript中,我们称之为闭包。
一般来说,原型对象创建优先于此工厂模式。
现在看看这个原型示例:
var Address = function(street, city, state, zip){
this.street = street;
this.city = city;
this.state = state;
this.zip= zip;
};
Address.prototype.showLabel = function(){
alert(this.street + "\n" + this.city + ", " + this.state + " " + this.zip);
}
现在,当我使用新关键字创建新地址时:
// create new address
var address = new Address('1', '2', '3', '4');
address.showLabel(); // alert
代码的行为与您期望的完全一致。但是,如果我不在构造函数中使用新关键字this
实际上是window
对象。
// create new address
var address = Address('1', '2', '3', '4'); // address == undefined
window.showLabel(); // address was added to window
我希望这可以解决一些问题。
答案 2 :(得分:1)
function Address(street, city, state, zip) {
this.street = street;
this.city = city;
this.state = state;
this.zip = zip;
this.showLabel = function() {
//alert(this.street + "\n" + this.city + ", " + this.state + " " + this.zip);
//var obj;
alert(this.street + "\n" + this.city + ", " + this.state + " " + this.zip);
};
};
var JohnAddr = new Address(...);
JohnAddr.showLabel();
答案 3 :(得分:0)
这是js古怪的一部分,showLabel是一个闭包并且可以访问obj,因为它在创建时在范围内 - 每次调用createAddress时都会创建一个新的闭包。
以你期望的方式使用'this',你需要使用new运算符:
var foo = new createAddress(...
并将成员变量分配给'this'。
在这种不使用new的情况下,“this”是全局对象。