JavaScript的this,arguments和closures

浏览数：10 / 时间：2015年06月08日

前提

JavaScript远没有我想的那个简单，它的复杂程度，以至于我无法驾驭。今天看了看书，然后补充了一下"yanshiba"的视频，最后看了看阮大哥的博客，在这里写下自己对JavaScript中的this,arguments，closures和作用域的简单地理解。写完了这篇文章，发现很多内容都是阮大哥的，还有的内容是yanshiba讲的。我做的事情就是收集起来，然后写了一下自己的理解。编程语言的博大精深！！！加油吧。

JavaScript的作用域

作用域分为两种，全局作用域和局部作用域。顾名思义，全局作用域在程序的全局可以使用，局部作用域，只能在程序的局部进行使用。
1. 全局作用域
程序:
?
1
2
3
4
5
// 在函数的外面，var 一个变量，函数内部就可以进行使用
var number1 = 1;
function f1() {
console.log(number1);
}<br>f1();
显示结果:
2. 局部作用域
程序:
?
1
2
3
4
5
6
// 在函数的内部使用var 声明一个变量并且赋值，函数内部可以进行使用，但是函数外部无法使用
function f() {
var number = 100;
console.log("内部访问"+number);
}
f();<br>console.log("外部访问"+number);
 
显示结果:
 
3. JavaScript的特色变量作用域
程序:
?
1
2
3
4
5
6
// 在函数内部不使用var关键字声明的变量，只要函数一调用之后，该变量就相当于是一个全局变量
function f() {
number = 100;
}
f();
console.log(number);
显示:
 
4. 函数嵌套变量的分析
说明：如果f1()函数内部有一个f2()函数，那么f1()函数所有的局部变量对f2来说都是可见的。也就是可以使用的。
程序:
?
1
2
3
4
5
6
7
8
9
//f1()函数中的number变量相对于f1而言就是一个局部变量，在f2中是可见的。
function f1() {
var number = 100;
function f2() {
console.log(number)
}
f2();
}
f1();
显示:
但是f2中的局部变量在f1中是不见的。
程序：
?
1
2
3
4
5
6
7
8
function f1() {
function f2() {
var number = 100;
}
console.log(number);
f2();
}
f1();
显示:
总结：f1()中的局部变量在f2()中是可见的，但是f2()中的局部变量在f1()中是不可见的，这就是JavaScript所特有的"链式作用域"。
其实还有一种情况，阮大哥在他的博客里面写到过:既然f2可以读取到f1中的局部变量，那么只要把f2作为返回值，我们就可以在f1的外部读取到f1的内部变量了。哈哈，是不是这么回事？好好想想。而这种方式不就是那个"高上大"的闭包吗？
程序:
?
1
2
3
4
5
6
7
8
9
function f1() {
var number = 100;
function f2() {
console.log(number);
}
return f2;
}
var result = f1();
console.log(result);
显示:
 
到这里为止，JavaScript的作用域我算是稍微了解清楚了。不知道你是否理解了。曾经接触的JavaScript真的太浅了呀。

JavaScript的闭包

很久以前就接触过闭包，今天才正式去google it.通过多方面资料的了解，闭包应该就是一个函数，这个函数的功能是读取其他函数内部的变量。通俗点：就是一个读取其它函数内部变量的函数。好像，阮大哥也是这么理解的。
闭包的作用:"闭包可以用在许多地方。它的最大用处有两个，一个是前面提到的可以读取函数内部的变量，另一个就是让这些变量的值始终保持在内存中"--摘自阮的博客。
程序:
?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
function f1() {
var n = 1;
nAdd = function() {
n+=1;
}
function f2() {
alert(n);
}
return f2;
}
var result = f1();
result(); // 1
nAdd();
result(); // 2
为什么第一次的值为999，第二次的值为1000？ 第一个1很容易理解，因为返回的是f2(),所以alert出来的是n的值
第二个2，因为第一次执行的1还保存在内存当中，内存当中的1+1 =2 所有alert出来的是2。这也是闭包的一个重要的特性。
如果还想自己深入的了解，稍后看下面的参考链接。

JavaScript的this关键字

this关键字：它代表函数运行时，自动生成的一个内部的对象，只能在函数的内部进行使用。

作为函数调用

1. 在函数的内部使用:引用局部变量
?
1
2
3
4
5
function f() {
this.x = 100;
alert(this.x);
}
f(); //1
2. 在函数的内部使用:引用全局变量
?
1
2
3
4
5
var x = 1;
function f() {
alert(this.x);
}
f(); //1

 

3. 在函数的内部使用：改变全局变量
?
1
2
3
4
5
6
var x = 1;
function f() {
this.x = 0;
}
f();
alert(x); //0
解释：2和3共同说明this是一个全局对象。

作为对象方法使用

这里的this就是指的是上一级的对象。
?
1
2
3
4
5
6
7
function test() {
alert(this.x);
}
var o = {}; // 声明并实例化一个对象
o.x = 1; //o对象中的x为 1
o.m = test; // o对象中的m是test函数的引用
o.m(); //调用test函数,因为o.x=1所以输出1
 
当然还有阮大哥提到的，作为构造函数调用和applay调用。有兴趣的可以去探索一下

JavaScript的arguments

JavaScript的arguments是一个特殊对象，程序员不用明确指出参数名就可以访问它们。arguments[0], arguments[1]....
程序:
?
1
2
3
4
5
6
function f() {
alert(arguments[0]); //test1
alert(arguments[1]); //test2
alert(arguments[2]); // test3
}
f("test1", "test2", "test3");

参考链接

this讲解: http://www.ruanyifeng.com/blog/2010/04/using_this_keyword_in_javascript.html
closures讲解: http://www.ruanyifeng.com/blog/2009/08/learning_javascript_closures.html
 

JavaScript的this,arguments和closures,古老的榕树,5-wow.com

郑重声明：本站内容如果来自互联网及其他传播媒体，其版权均属原媒体及文章作者所有。转载目的在于传递更多信息及用于网络分享，并不代表本站赞同其观点和对其真实性负责，也不构成任何其他建议。

标签： 编程语言 Java C C# Javascript js Python Ruby Spring 程序 VB

相关文章

随机文章

您可能还喜欢

您可能还喜欢