1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>Document</title> 6 </head> 7 <body> 8 <script> 9 10 /*//demo1 11 var v = "hello"; 12 (function(){ 13 console.log(v); 14 var v = "world"; 15 16 })();//undefined*/ 17 18 //1、function作用域里的变量v遮盖了上层作用域变量v。 19 //2、在function作用域内，变量v的声明被提升了。所以最初的代码相当于： 20 21 // var v = "hello"; 22 // (function(){ 23 // var v; 24 // console.log(v); 25 // v = "world"; 26 // })(); 27 28 // 所以这总类型我们叫做 声明提升 ， 29 //声明提升:当前作用域内的声明都会提升到作用域的最前面,包括变量和函数的声明 30 //实例如下： 31 32 //demo2 33 /* (function(){ 34 35 console.log(a); 36 console.log(a+b+c); 37 var a = "1"; 38 var f = function(){}; 39 var b = "2"; 40 var c = "3"; 41 42 })();*/ 43 44 // 这个代码是怎么进行声明提升的？ 45 // 变量a,f,b,c的声明会被提升到函数作用域的最前面，类似如下： 46 /*(function(){ 47 var a,f,b,c; 48 alert(a); 49 a = 1; 50 f = function(){}; 51 b = 2; 52 c = 3; 53 alert(a+b+c); 54 })();*/ 55 // 请注意函数表达式并没有被提升，这也是函数表达式与函数声明的区别。进一步看二者的区别： 56 57 //demo3 58 /*function(){ 59 60 var f1 = function aa(){}; 61 function f2(){ 62 alert(1); 63 } 64 }; 65 aa(); 66 f2(); 67 68 */ 69 //var f1,function f2(){}; //hoisting,被隐式提升的声明 70 // 上面代码中函数声明f2被提升，所以在前面调用f2是没问题的。虽然变量f1也被提升，但f1提升后的值为undefined,其真正的初始值是在执行到函数表达式处被赋予的。所以只有声明是被提升的。 71 72 73 //demo4 74 /*var a = 1; 75 function outer(){ 76 var b = 2; 77 function inner(){ 78 var c = 4; 79 console.log(a); //1 80 } 81 inner(); //调用inner函数 82 } 83 outer(); //调用rainman函数 */ 84 85 //JavaScript的作用域链 86 //观察alert(a);这句代码。JavaScript首先在inner函数中查找是否定义了变量a，如果定义了则使用inner函数中的a变量；如果inner函数中没有定义a变量，JavaScript则会继续在onter函数中查找是否定义了a变量，在这段代码中outer函数体内没有定义a变量，则JavaScript引擎会继续向上（全局对象）查找是否定义了a；在全局对象中我们定义了a = 1，因此最终结果会弹出'1'。 87 88 //作用域链：JavaScript需要查询一个变量x时，首先会查找作用域链的第一个对象，如果以第一个对象没有定义x变量，JavaScript会继续查找有没有定义x变量，如果第二个对象没有定义则会继续查找，以此类推。 89 90 //上面的代码涉及到了三个作用域链对象，依次是：inner、outer、window。 91 92 93 //demo5 94 var a = 1; //定义全局变量 a 95 function check(){ 96 a = 100; //不加var还是全局变量 97 var a=100;//a是局部变量 98 console.log(a); //100 99 } 100 check(); 101 console.log(a); //1 102 103 //demo6 104 /*var v = "hello"; 105 if(true){ 106 console.log(v); 107 var v = "world"; 108 console.log(v); 109 }//hello word 110 */ 111 // 输出结果为”hello”,说明javascript是没有块级作用域的。函数是JavaScript中唯一拥有自身作用域的结构。 112 113 //demo7 114 function rain(){ 115 var x = 1; 116 function man(){ 117 x = 100; 118 119 } 120 man(); //调用man 121 console.log( x ); //100 122 } 123 rain(); //调用rain 100 124 125 //上面得代码说明了，变量x在整个rain函数体内都可以使用，并可以重新赋值。 126 127 128 // // demo8 129 // var x = 1; 130 // function rain(){ 131 // console.log( x ); 132 // var x = 'man'; 133 // console.log( x ); 134 // } 135 // rain() //undefined.man 136 137 138 //demo9 139 /* function rain(){ 140 x = 100; 141 } 142 rain(); 143 console.log( x ); //100 144 145 //未使用var关键字定义的变量都是全局变量。 */ 146 147 148 //demo10 149 /* var x = 100 ; 150 console.log(window.x); //100 .100 151 console.log(x); 152 */ 153 //全局变量都是window对象的属性相当于： 154 // window.x = 100; 155 // alert( window.x ); 156 // alert(x) 157 158 159 //demo11 160 /* var x = 10; 161 function outer(){ 162 var x = 20; 163 function inner(){ 164 var x = 30; 165 console.log(x);//30 166 } 167 inner(); 168 console.log(x);//20 169 } 170 outer(); 171 console.log(x);//10 172 */ 173 174 //解释如下： 175 // var x = 10;//全局定义了一个变量x=10 176 // function outer(){//这有一个函数（进入局部） 177 // var x = 20;//局部定义了一个x=20 178 // function inner(){//在外边的局部又进入一个局部 179 // var x = 30;//里边的局部定义了一x=30 180 // alert(x);//弹x，这里弹得是里边局部定义的x 30 181 // } 182 // inner();//调用里边函数 弹30 183 // alert(x);//这个是弹第一个局部的x 20 184 // } 185 // outer();//调用第一个局部，第二个局部的出了局部就销毁了。弹20 186 // alert(x);//局部已经销毁，弹得是全局的 x=10 187 188 189 //demo12 190 /*var t='a'; 191 function test2(){ 192 console.log(t);//undefined 193 var t='b'; 194 console.log(t);//b 195 } 196 test2();//0*/ 197 198 199 //解释如下： 200 // var t='a';//全局定义一个字符串t=‘a’； 201 // function test2(){//函数，进入了局部 202 // alert(t);//这个时候js已经找完整个局部，发现局部下边也定义有t，那么这个已经用不了全局的变量，但是这个代码执行的时候局部定义的t还没有执行到。所以弹出undefined，找不到 203 // var t='b';//这个时候才定义了一个局部变量t 204 // alert(t);//弹出上边定义的局部变量 弹得是“b” 205 // } 206 // test2(); 207 208 209 //demo13 210 /*var t='a'; 211 function test2(){ 212 console.log(t); 213 t='b'; 214 console.log(t); 215 } 216 console.log(t);//a 217 test2();//a,b 218 console.log(t);//b*/ 219 220 221 //解释如下： 222 // var t='a';//全局定义一个字符串t=‘a’； 223 // function test2(){//函数，进入了局部 224 // alert(t);//这个时候js已经找完整个局部，发现局部下边没有定义有t，只是在下边给t赋了个值，但是赋值是在这个代码后边，所以这个弹得是全局变量的t。 弹出 a 225 // t='b';//把b赋值给t。注意不是定义t等于b，而是赋值。 226 // alert(t);//上边t被赋值为b 所以弹出b 227 // } 228 // test2(); 229 230 231 //demo14 232 /* var a="Hello"; 233 function test(){ 234 var a; 235 alert(a);//局部定义有a 但是没有赋值，所以弹出undefined 236 a="World"; 237 alert(a);//a在局部被赋值，弹出 World。 238 } 239 test();//undefined,word*/ 240 241 242 // demo15 243 /* var a="Hello"; 244 function test(){ 245 alert(a); 246 a="World"; 247 alert(a); 248 } 249 test();//hello,word 250 */ 251 252 //demo16 253 var a =1; 254 function test(){ 255 console.log(a); 256 var a=4; 257 console.log(a); 258 a=2; 259 console.log(a); 260 } 261 test(); //undefined,4,2 262 console.log(a);//2 263 </script> 264 </body> 265 </html>