1 <!DOCTYPE html> 2 <html> 3 <script src="./jquery-1.7.2.js"></script> 4 <head> 5 <title></title> 6 </head> 7 <body> 8 <input type="text" name="type" id="type" value="songxuxua"/> 9 <span id="hah"></span> 10 <a href="javascript:void(0);" >ssssssssssss</a> 11 </body> 12 <script> 13 /* * 14 * @type 开心菜鸟系列－－－－作用域（javascript入门篇） 15 * @introduce {string} 16 * @author {string} 开心菜鸟 17 */ 18 19 /* * 20 * 书接上文啊,上一节我们谈了全局变量, 21 * 但是我看了,看的人很少啊,可能太简单了,没办法水平就这么高,毕竟不是专业做js的. 22 * 本来吧,想这周内接着写的,但是由于我离职了,要做交接工作啊,虽然在公司里是酱油级别的人物, 23 * 但是我这个人,做事比较认真,bug能不改就不改,改了,就要改好,即使最后时刻,下午写了三篇doc文档, 24 * 结束了我8个月的phper过渡期. 25 * 闲话少说了,在这里说这些,其实就是想少开个贴子,呵呵 26 */ 27 // 还要说一下全局变量,有一点拉下了,最近又碰到了,分享给大家, 28 // 猜猜我是谁, 29 // 错误用法@2,我们在ie8以下,看看屌丝的代码,2013/11.8日 晚发现的这个,由于我平时保持规范,遇不到. 30 console.info(type); 31 console.info(hah); 32 // 这个东西真有意思啊,第一次遇到,也是在写博客的时候,自己测试遇到的, 33 // 他把dom的id全都生成全局变量了,但是在ie7以下啊,他只是一个object,并不是一个元素对象,试试喽 34 function test() 35 { 36 // 错误用法@1 37 var name = abc = 'songxiuxuan'; 38 data = 'songxiuxun'; 39 } 40 test(); // 注释和不注释啊 41 // 大家猜猜这是什么啊. 42 console.info(abc) // 这是什么啊土豪 43 // 解释一下,ie对一些js的语法要求比较严格,由于我不是专业写js的,所以就不列举了,只是列举出我们实例碰到的. 44 // age是一个全局变量,但是ie认为你age并没有声明啊,我赋于一个没有声明的变量,他就会报错. 45 // 这里有一个知识点,上一章并没有提到的,当声明变量的时候, 46 // 如果没有用var去声明的话,那么我们就认为他是window.变量的一个属性,而ie8以下对声明变量解析和其它浏览器器不同的. 47 // 这样会污染全局变量的. 48 49 // 弥补了全局变量写的不足,下面我们开始,今天的主题,作用域,在js中是虾米鸟东东. 50 // 我想说的是,我写的东西没有理论,只有例子,因为理论没用啊. 51 // 其实作用域,这个东西在js中非常重要,只是你平时不注意而已 52 // 在产生作用域之前,我们先理一下,先要进入上下文,然后执行上下文,之后就会产生了作用域,至于这个是全局的还是局部的, 53 // 要看具体的代码喽,其实就是caller调用了calle,把控制权交给了calle,caller等待,在交给calle的时候就产生了作用域,叫函数作用域. 54 // 今天我们主要讲函数作用域,可能会带着点闭包, 55 // 首先作用域是静态的? 56 function statciScope() 57 { 58 // 也声明一个局部变量 59 var weiwu = 'hahahh'; 60 console.info(weiwu); 61 } 62 function callerStatic() 63 { 64 var weiwu = 'songxiuxuan' // 声明一个局部变量 65 statciScope(); 66 } 67 callerStatic(); // hahaha 68 // 继续, 69 // 传说this是变动的,当然,今天我们不谈. 70 function thisSocpe() 71 { 72 this.socpe = 'this is this'; 73 console.info( this.socpe); 74 } 75 function callerThis() 76 { 77 this.socpe = 'caller' 78 new thisSocpe(); 79 } 80 // ok连传说中的this都没有指向调用他的,我们证明了作用域是静态的. 81 new (callerThis) 82 // 深入作用域 83 function goToScope(a,b,c) 84 { 85 var parentVar = 'this is parent'; 86 return function () { 87 console.info(a,b,c,parentVar); // 看一看输出了什么啊 88 } 89 } 90 // 证明了,作用域是从caller调用了calle进入上下文到执行函数上下文,到底发生了什么啊 91 // 当进行上下文时,就会函数的创建了一个scope的属性,也就是函数创建阶段 92 // 当caller去调用calle,就执行了这个函数,也就是执行这个上下文,而函数的形参是第一个存入到scope作用域中, 93 // 然后会把函数内的局部变量也放入到作用域中, 94 // 当这个函数发生闭包,这个作用域在函数内部就相当于全局的,也就是说他也有一个属性,指向这个函数,而里面的函数又有一层作用域, 95 // 但是由于闭包函数的上一层作用域对他来说是静止的.会出现下一层改变上一层作用域的属性,会一直保存 96 // 其实大家可能想不明白,我就说直接一点吧,window是什么啊,是在浏览器下javascript的里大的一层作用域 , 97 // 而nodejs里最大的变量作用是global,这个只是js底层给我们封装好的一个变量,我们是在一个全局的空间里写东西, 98 // 那么就会产生层级之前关系,层级关系的链接就是作用域相连接,这样,每新产生一个作用域,我们完全可以把它想像成新开辟一个window的全局对象 99 // 只不过这个全局对象,是指对于他的子层来讲. 100 // 因为有了这个作用域,我们就可以在子层调用上层的变量.我们下次进行调用子层的时候,上次修改了上层的作用域属性,还存在, 101 // 以前我一直不理解,但是js就是这样,只要一个页面不刷新,一个变量增加会保存的,这个和函数作用域是一样的. 102 103 goToScope(20,30,40)(); 104 105 // 还有一点需要补充,就是我们要调用一个变量时,我们会从作用,向上去查找,直到找到这个变量, 106 // 如果在函数作用域找不到这个变更,我们就会在原型链上去寻找 107 108 function Abc() 109 { 110 // this.name = 'songxiuxuan';//打开我 111 this.getName = function () { 112 } 113 } 114 // Abc.prototype.name = 'wo jiao kaixin feida de kaixin';//打开我 115 Abc.prototype.setName = function () { 116 console.info('aaa'); 117 } 118 function Child() 119 { 120 // this.name = 'heiheihei'; //打开我 121 this.getHeihei = function () { 122 console.info( this.name); 123 } 124 } 125 Child.prototype.heihei = function () { 126 return function () { 127 console.info( this.name) 128 } 129 } 130 Child.prototype = new Abc(); 131 c = new Child(); 132 // 把name的挨个打个,试试一下,呵呵 结束了. 133 c.getHeihei(); 134 135 136 137 138 139 140 141 142 143 144 145 146 147 148 </script> 149 </html>