班门弄斧01:Javascript闭包
闭包:兴趣,注意undefined这个数据类型
先看一个例子:
<script type="text/javascript">
var name = "Love Movie";
var object = {
name : "Love Music",
getName : function(){
alert(this.name);
}
};
alert(object.getName ());
</script>
这个例子会弹出什么东西?
会弹出“Love Music”,"undefined"
打印undefined的原因仔细思考下。
<script type="text/javascript">
var name = "Love Movie";
var object = {
name : "Love Music",
getName : function(){
alert(this.name);
}
};
var a = object.getName();
alert(a);
</script>
闭包:局部变量和全局变量的区分
<script type="text/javascript">
var name = "Love Movie";
var object = function() {
var name = "Love Music"; //(A)
};
function init() {
object();
}
init();
alert(name);
</script>
会打印出Love Movie,因为(A)处的name是object对象的局部变量,外部是无法访问的。
如果去除(A)处的var,结果又是如何?Love Music
如果在一个函数中,用var定义变量,那么这个变量将是这个函数的局部变量,并且外部的函数无法调用。
那么如果想要有属于自己函数的变量,一定要在函数中给这个变量增加一个 var,否则将会默认为全局变量。
提问,那么我们如何调用局部变量呢?
<script type="text/javascript">
var name = "Love Movie";
var object = {
name : "Love Music", //(A)
getName : function() {
return this.name;
}
};
alert(object.getName());
</script>
这个例子不太好!因为这个不是闭包的例子,只是演示了数组的属性和值。
闭包:深度剖析
<script type="text/javascript">
var name = "Love Movie";
function z() {
var name = "Love Music";
function getZname() {
return name;
}
return getZname;
}
var getZname = z();
alert(getZname());
</script>
Q1:这个会弹出什么呢?
<script type="text/javascript">
var name = "Love Movie";
function z() {
var name = "Love Music";
function getZname() {
return this.name;
}
return getZname;
}
var getZname = z();
alert(getZname());
</script>
Q2:这个会弹出什么呢?
答案:
Q1:Love Music
Q2:Love Movie
Q1剖析:
<script type="text/javascript">
var name = "Love Movie";
function z() {
var name = "Love Music";
function getZname() {
return name;
}
return getZname;
}
var getZname = z();
alert(getZname);
alert(getZname());
</script>
这边需要仔细分析下,getZname是什么玩意。
它其实就是
function getZname() {
return name;
}函数对象,然后我们再执行getZname()方法。
验证一下:
<script type="text/javascript">
var name = "Love Movie";
function z() {
var name = "Love Music";
function getZname() {
return name;
}
function _getZname() {
return "Love Dota";
}
return _getZname;
}
var getZname = z();
alert(getZname);
alert(getZname());
</script>
直接返回“Love Dota”
Q2剖析:
理解完Q1剖析,Q2应该很好理解,同样是一个函数,只不过this指向的那么是全局变量。
验证一下:
<script type="text/javascript">
var name = "Love Movie";
function z() {
var name = "Love Music";
function getZname() {
return this;
}
return getZname;
}
var getZname = z();
alert(getZname);
alert(getZname().name);
</script>
看了上述那么多的例子,究竟什么是闭包呢?
闭包:概念
闭包就是能够读取其他函数内部变量的函数。
由于在Javascript语言中,只有函数内部的子函数才能读取局部变量,因此可以把闭包简单理解成"定义在一个函数内部的函数"。
所以,在本质上,闭包就是将函数内部和函数外部连接起来的一座桥梁。
2014.01.03 01:45
闭包:待续
先说几句废话:每天都是在洗完澡临睡前有点想看文章的冲动,洗澡前干了什么呢,dota,dota...
上述的javascript闭包说的实在令人乏味,javascript闭包到底是个啥玩意?
当你return的是内部function时,就是一个闭包。内部function会close-over外部function的变量直到内部function结束。
这句话,我的理解是(可能有坑):
(1)闭包最起码得有2个函数:外部函数和内部函数
(2)外部函数必须有返回值,返回值是内部函数
(3)对于变量的操作统一放到内部变量中进行、
举例:
function foo(x) {
var tmp = 3;
return function (y) {
alert(x + y + (++tmp));
}
}
var bar = foo(2); // bar 现在是一个闭包
bar(10);
按照这种思路去理解,其实闭包就是一个封闭的东西(包含了一些变量+一个方法)
function (y) {
alert(x + y + (++tmp));
}
In computer science, a closure is a function together with a referencing environment for the nonlocal names (free variables) of that function.
从技术上来讲,在JS中,每个function都是闭包,因为它总是能访问在它外部定义的数据。
Since scope-defining construction in Javascript is a function, not a code block like in many other languages, what we usually mean by closure in Javascript is a fuction working with nonlocal variables defined in already executed surrounding function.
我去,完全被大神们写的文章搞晕了!(看不得就正常了,因为理论总是令人费解的凑字数,然后让你解开)
<script type="text/javascript">
// 我们可以调用这个匿名方法, 返回这个内部函数,它是一个闭包
var db = (
function() {
var data = {};
return
function(key, val) {
if (val === undefined) {
return data[key]
}
else {
return data[key] = val
}
}
}
)();
db('x'); // 返回 undefined
db('x', 1); // 设置data['x']为1
db('x'); // 返回 1
// 我们不可能访问data这个object本身
// 但是我们可以设置它的成员
</script>
多多实践!