这里有新鲜出炉的 Javascript 教程,程序狗速度看过来!
Javascript 是一种由 Netscape 的 LiveScript 发展而来的原型化继承的基于对象的动态类型的区分大小写的客户端脚本语言,主要目的是为了解决服务器端语言,比如 Perl,遗留的速度问题,为客户提供更流畅的浏览效果。
这篇文章主要介绍了 JS 作用域闭包、预解释和 this 关键字, 结合实例形式分析了 javascript 作用域闭包、预解释和 this 关键字在具体使用过程中的操作技巧与注意事项, 需要的朋友可以参考下
本文实例分析了 JS 作用域闭包、预解释和 this 关键字。分享给大家供大家参考,具体如下:
- var number = 2;
- var obj = {number : 5,
- fn1 : ( function() {
- this.number *= 2;
- number=number*2;
- var number=3;
- return function() {
- this.number *= 2;
- number*=3;
- alert(number);
- }
- } )()
- };
- var fn1 = obj.fn1;
- alert(number);
- fn1();
- obj.fn1();
- alert(window.number);
- alert(obj.number);
【解析】
1. fn1 本身后面就有 (),所以 var fn1 = obj.fn1; 时他已经被执行,但是里面的 return function 并没有被执行
2. alert(number); 输出全局的 number,本来是 2,经过 var fn1 = obj.fn1; 后,相当于执行了
- this.number *= 2;
- number=number*2;
- var number=3;
这三句话
注意:任何一个直接执行的匿名方法,他的 this 指向 window
所以 this.number *= 2; 使得全局变量变成 4,即输出 4
而 number=number*2; 他是去看作用域块里的 number,var number=3; 作用域声明在先,但是没有赋值,所以 number=number*2; 这句话其实没用
3. 执行到 fn1(); 就是执行 fn1 里面的 return function,也就是这三句话
- this.number *= 2;
- number*=3;
- alert(number);
这时候依然是个匿名方法,所以 this.number *= 2; 使得全局变量变为 8,number*=3; 去找作用域块里的 number,外层定义 number 为 3,所以 alert(number); 就是 9,如果是 alert(this.number); 则指向全局变量,即输出 8
4. obj.fn1();,依然执行 fn1 里面的 return function,也就是这三句话
- this.number *= 2;
- number*=3;
- alert(number);
但这时 this 指向 obj,this.number *= 2; 使得 obj 里的 number 变为 10,number*=3; 还是去找作用域块,由于上面变为 9,所以这里就是 27,alert(number); 输出的是作用域块的 number,即 27,如果是 alert(this.number); 则指向 obj 的 number,即输出 10
5. alert(window.number); 经过上面几轮,全局变量变为 8(即执行 obj.fn1(); 对全局变量无影响)
6. alert(obj.number); 只有这句话 obj.fn1();,改变了 obj.number,所以输出 10
- (function(){
- var a=10;
- fn();
- function fn(){
- var a=a+10;
- console.log(a);
- return a;
- }
- console.log(a);
- console.log(fn()+10);
- })();
fn 函数里的 a 先被声明但是没有赋值,然后进行运算,他不会去找函数外面的同名变量,因为他已经在里面被声明了。一个不是数字的和数字进行运算,输出 NaN
console.log(fn()+10); 这句话要输出两个值:console.log(fn()); 和 console.log(fn()+10);
结果:
NaN 10 NaN NaN
如果题目改成
- (function(){
- var a=10;
- fn();
- function fn(){
- a=a+10;
- console.log(a);
- return a;
- }
- console.log(a);
- console.log(fn()+10);
- })();
结果:
20
20
30
40
希望本文所述对大家 Javascript 程序设计有所帮助。
来源: http://www.phperz.com/article/17/0525/329483.html