20、運行題 ※ · 大前端精選

[TOC] 1、結果是什么？為什么？ ``` <script> function Foo() { getName = function () { console.log(1) } return this } Foo.getName = function () { console.log(2) } Foo.prototype.getName = function () { console.log(3) } function getName() { console.log(5) } var getName = function () { console.log(4) } // 運行結果 Foo.getName() // 2 getName() // 4 Foo().getName() // 1 getName() // 1 new Foo.getName() // 2 new Foo().getName() // 3 new new Foo().getName() // 3 /* * 預解析： * function Foo() { getName = function () { console.log(1) } return this } function getName() { console.log(5) } 重名：PK！！！ getName = undefined // 沒有值失敗了最終結果就是只有兩個函數： Foo、getName * 逐行解讀代碼： * 函數聲明，不會改變值；函數表達式，會改變值； * Foo.getName = function() { console.log(2) } * Foo.prototype.getName = function() { console.log(3) } * getName = function() { console.log(4) } * * Foo.getName() // 2 自身上有停止向上查找 * getName() // 4 * Foo().getName() // 先執行Foo()函數，開啟新的一輪預解析、解讀代碼；再執行getName()函數， * 預解析： * 空 * 逐行解讀： * getName = function() { console.log(1) } * this指向的是window，因為Foo是window調用的； * Foo().getName()變形為：window.getName = function() { console.log(1) }，全局作用域掛載了getName()方法 * 所以：getName = function() { console.log(4) } 被 window.getName = function() { console.log(1) }覆蓋了 * 因此：Foo().getName() 結果就是：1 * getName() // 1 * new Foo.getName() // 點的優先級是最高的，因此變形為：Foo.getName() -> 結果是：2；接下來相當于 new function() { console.log(2) }，所以最終結果肯定是：2 * new Foo().getName() // 點的優先級最高，但是更高的是先執行整體，因此變形為：new Foo()先執行結果為：Foo實例對象，然后再在實例對象上查找getName()，變形為：Foo.getName()，按照實例對象的查找規則，自身上有停止，沒有會按照原型鏈__proto__查找，結果就是：3 * new new Foo().getName() // 變形：new Foo().getName()，運行結果是: 3，然后new function() { console.log(3) }，最終結果肯定是：3 * */ // new Foo.getName() 和 new Foo().getName() 不好理解看這里 function Foo() { // this.getName = function() { // console.log(1) // } } Foo.getName = function () { console.log(2) } Foo.prototype.getName = function() { console.log(3) } console.log(new Foo().getName()) </script> ``` ***** 2、運行結果是什么？為什么？ ``` <script> var arr = [1,2,3] function test(arr) { arr = [] } test(arr) // 結果 console.log(arr) //1,2,3 /* * 預解析： * arr = undefined * function test(arr) { arr = [] } * 逐行解讀代碼： * arr = [1,2,3] * function test(arr) { arr = [] } // 函數聲明，跳過 * test(arr) // 函數調用，開啟新的預解析、解讀代碼 * 預解析： * arr = undefined * 解讀代碼： * arr = [] * console.log(arr) // 此arr非函數內部的arr，因為作用域額關系，因此結果就是1,2,3 * */ </script> ``` ***** 3、運行結果是什么？為什么？ ``` <script> var a = 1; if (!(b in window)) { // false var b = 2; a+=1 } else { a+=2 } // 結果 console.log(a) // 3 console.log(b) // undefined /* * 預解析： * a = undefined * b = undefined * 逐行解讀代碼： * a = 1 * !(b in window) // 預解析中有了b，因此b是掛載到window上，所以b in window 為true，然后取反，所以是false，因此不走if，走了else，所以：a += 2，a最終結果就是：3 * console.log(a) // 3 * console.log(b) // undefined * */ </script> ``` ***** 4、運行結果是什么？為什么？ ``` <script> var scope = 'global scope' function checkscope() { var scope = 'local scope' function f() { return scope } return f } // 結果 console.log(checkscope()()) // local scope /* * 預解析： * scope = undefined * function checkscope() { var scope = 'local scope'; function f() { return scope }; return f } * 逐行解讀代碼： * scope = 'global scope' * function checkscope() { var scope = 'local scope'; function f() { return scope }; return f } // 函數聲明，跳過 * console.log(checkscope()()) // 分開兩次執行：第一次執行，checkscope(),函數調用，開啟新一輪的 * 預解析： * scope = undefined * function f() { return scope } * 逐行解讀： * scope = 'local scope' * function f() { return scope }; // 函數聲明 * return f // 返回出去 * checkscope() // 結果就是：function f() { return scope } * checkscope()() // 第二次執行：相當于：function f() { return scope } () 執行，開啟新的預解析、解讀代碼： * 預解析： * 空 * 逐行解讀： * return scope // 預解析后沒有，按照作用域鏈向上級查找，上級的scope = 'local scope'，因此最終結果就是：local scope * */ </script> ``` 5、運行結果是什么？為什么？ ``` <script> var y = 10 if (!(x in window)) { var x = 10; } else { ++y } //結果 console.log(x) // undefined console.log(y) // 11 /* * 預解析： * y = undefined * x = undefined * 逐行解讀代碼： * y = 10 * (x in window) // x 在預解析中存在，因此是掛載在window上面的，所以結果是：true；但是!(x in window)結果就是：false，因此，if不執行 * else ++y // 前++在這里，結果是：11 * console.log(x) // undefined * console.log(y) // 11 * */ </script> ``` 6、運行結果是什么？為什么？怎么修改達到預期 ``` for(var i = 0; i< 5; i++) { setTimeout(function () { // 結果 console.log(i) // 5 }, 300) } ~~~ for( var i = 0;i<5;i++) { (function(i){ setTimeout(function () { console.log(i); },1000) })(i); } ~~~~~~ /* * 這個setTimout在for里面是異步執行的，在延遲輸出的時候，i的值已經是5了，因此會輸出 5,5,5,5,5 * */ for( var i = 0;i<5;i++) { (function(i){ setTimeout(function () { console.log(i); },1000) })(i); } /*得采用閉包的方法，將里面的i值保存下來；結果就是 01234*/ ``` 7、運行結果是什么？為什么？ ``` var str1 = 'abc123def456'; var str2 = str1.replace(/\d+/gi, '*') // 結果 console.log(str2) // abc*def* ``` 8、1&&2和1||2的值分別是多少？ ``` 1&&2 // 2 1||2 // 1 ``` 9、指出以下代碼的區別 ``` function Person() {} var person = Person() var person = new Person() ``` 10、alert(undefined == null)彈出什么 ``` alert(undefined == null) // true ``` 11、以下代碼輸出的結果是什么 ``` console.log(1 + '2' + '2') console.log(1 ++ '2' + '2') console.log('A' - 'B' + '2') console.log('A' - 'B' + 2) ``` 12、以下代碼輸出的結果是什么？ ``` A:var test = 1; typeof test = 'number' B:var test = 1.2; typeof test = 'float' C:var test = undefined; typeof test = 'undefined' D:var test = {}; typeof test = 'object' E:var test = '4299' - 0; typeof test = 'number' F:var test = null; typeof test = 'object' ``` 13、以下代碼的運行結果是 ``` var arr = new Array(2,3,4,5,6) var newArr = 0 for(var i=1;i<arr.length;i++) { newArr+=arr[i] } // 結果 document.write(newArr) // 18 ``` 14、分析下面代碼，結果是 ``` var s1 = parseInt('101 小四') document.write(s1) ``` ***** 15、看下列代碼輸出為何？解釋原因 ``` var a = null; alert(typeof a); //object // 解釋：null 是一個只有一個值的數據類型，這個值就是 null。表示一個空指針對象，所以用 typeof 檢測會返回”object” ``` ***** 16、看下列代碼,輸出什么？解釋原因 ``` var undefined; undefined == null; // true 1 == true; // true 2 == true; // false 0 == false; // true 0 == ''; // true NaN == NaN; // false [] == false; // true [] == ![]; // true 解釋： undefined 與 null 相等，但不恒等（===）一個是 number 一個是 string 時，會嘗試將 string 轉換為 number 嘗試將 boolean 轉換為 number，0 或 1 嘗試將 Object 轉換成 number 或 string，取決于另外一個對比量的類型所以，對于 0、空字符串的判斷，建議使用 “===” 。“===”會先判斷兩邊的值類型，類型不匹配時為 false。 ``` ***** 17、看下面的代碼，輸出什么，foo 的值為什么 ``` var foo = "11"+2-"1"; console.log(foo); console.log(typeof foo); 結果：執行完后 foo 的值為 111，foo 的類型為 String ``` 18、看代碼給答案 ``` var a = new Object(); a.value = 1; b = a; b.value = 2; alert(a.value); 答案：2（考察引用數據類型細節） ``` 19、看程序，寫結果 ``` function setN(obj){ obj.name='屌絲'; obj = new Object(); obj.name = '腐女'; }; var per = new Object(); setN(per); alert(per.name); //屌絲 ``` 20、下面輸出多少 ``` var o1 = new Object(); var o2 = o1; o2.name = "CSSer"; console.log(o1.name); // CSSer ``` 21、a 輸出多少 ~~~ var a = 6; setTimeout(function () { var a = 666; alert(a); // 666 }, 1000); /* * 逐行解讀： * a = 6 * 遇到了setTimeout，執行function函數，開啟新的預解析、逐行解讀 * 預解析： * a = undefined * 逐行解讀： * a = 666 * alert(a) // 666，作用域鏈查找規則：自己有，拿自己的，自己沒有找父級的 * */ var a = 6; setTimeout(function () { alert(a); var a = 666; }, 1000); /* * 逐行解讀： * a = 6 * 遇到了setTimeout，執行function函數，開啟新的預解析、逐行解讀 * 預解析： * a = undefined * 逐行解讀： * alert(a) // undefined * a = 666 * */ var a = 6; setTimeout(function () { alert(a); var a = 66; }, 1000); a = 666; alert(a); /* * 逐行解讀： * a = 6 * 遇到了setTimeout，執行function函數，開啟新的預解析、逐行解讀 * 預解析： * a = undefined * 逐行解讀： * alert(a) // undefined * a = 66 * a = 666 * alert(a) // 666 * * */ /* * 預解析（總）： * a = undefined * 逐行解讀： * 直接看代碼！！！ * * */ ~~~ ***** 22、看下列代碼輸出為何？解釋原因 ``` var a; alert(typeof a); // undefined alert(b); // 報錯 ``` 解釋：Undefined 是一個只有一個值的數據類型，這個值就是“undefined”，在使用 var 聲明變量但并未對其賦值進行初始化時，這個變量的值就是 undefined。而 b 由于未聲明將報錯。注意未申明的變量和聲明了未賦值的是不一樣的 ***** 23、分析代碼，得出正確的結果 ``` var a=10, b=20 , c=30; ++a; a++; e=++a + (++b) + (c++) + a++; alert(e); 彈出提示對話框：77 ``` 24、寫出函數 DateDemo 的返回結果，系統時間假定為今天 ``` function DateDemo(){ var d, s="今天日期是："; d = new Date(); s += d.getMonth() +1+ "/"; s += d.getDate() + "/"; s += d.getFullYear(); return s; } 結果：今天日期是：7/21/2016 ``` 25、寫出程序運行的結果？ ``` for(i=0, j=0; i<10, j<6; i++, j++){ k = i + j;} 結果：10 ``` 26、閱讀以下代碼，請分析出結果 ``` var arr = new Array(1 ,3 ,5); arr[4]='z'; arr2 = arr.reverse(); arr3 = arr.concat(arr2); alert(arr3); 彈出提示對話框：z,,5,3,1,z,,5,3,1 ``` 27、看題作答 ``` function f1(){ var tmp = 1; this.x = 3; console.log(tmp); //A console.log(this.x)； //B } var obj = new f1(); //1 console.log(obj.x) //2 console.log(f1()); //3 這道題讓我重新認識了對象和函數，首先看代碼（1），這里實例話化了 f1 這個類。相當于執行了 f1 函數。所以這個時候 A 會輸出 1，而 B 這個時候的 this 代表的是實例化的當前對象 obj B 輸出 3.。代碼（2）毋庸置疑會輸出 3，重點代碼（3）首先這里將不再是一個類，它只是一個函數。那么 A 輸出 1，B 呢？這里的 this 代表的其實就是 window 對象，那么 this.x 就是一個全局變量相當于在外部的一個全局變量。所以 B 輸出 3。最后代碼由于 f 沒有返回值那么一個函數如果沒返回值的話，將會返回 underfined ，所以答案就是： 1， 3， 3， 1， 3， underfined 。 ``` 28、下面輸出多少 ``` var o1 = new Object(); var o2 = o1; o2.name = "CSSer"; console.log(o1.name); 如果不看答案，你回答真確了的話，那么說明你對 javascript 的數據類型了解的還是比較清楚了。js 中有兩種數據類型，分別是：基本數據類型和引用數據類型（object Array）。對于保存基本類型值的變量，變量是按值訪問的，因為我們操作的是變量實際保存的值。對于保存引用類型值的變量，變量是按引用訪問的，我們操作的是變量值所引用（指向）的對象。答案就清楚了： //CSSer; ``` 29、再來一個 ``` function changeObjectProperty (o) { o.siteUrl = "http://www.csser.com/"; o = new Object(); o.siteUrl = "http://www.popcg.com/"; } var CSSer = new Object(); changeObjectProperty(CSSer); console.log(CSSer.siteUrl); // “http://www.csser.com/” 如果 CSSer 參數是按引用傳遞的，那么結果應該是"http://www.popcg.com/"，但實際結果卻仍是 "http://www.csser.com/"。事實是這樣的：在函數內部修改了引用類型值的參數，該參數值的原始引用保持不變。我們可以把參數想象成局部變量，當參數被重寫時，這個變量引用的就是一個局部變量，局部變量的生存期僅限于函數執行的過程中，函數執行完畢，局部變量即被銷毀以釋放內存。（補充：內部環境可以通過作用域鏈訪問所有的外部環境中的變量對象，但外部環境無法訪問內部環境。每個環境都可以向上搜索作用域鏈，以查詢變量和函數名，反之向下則不能。） ``` 30、a 輸出多少？ ``` var a = 6; setTimeout(function () { var a = 666; alert(a); // 輸出 666， }, 1000); 因為 var a = 666;定義了局部變量 a，并且賦值為 666，根據變量作用域鏈，全局變量處在作用域末端，優先訪問了局部變量，從而覆蓋了全局變量。 var a = 6; setTimeout(function () { alert(a); // 輸出 undefined var a = 666; }, 1000); 因為 var a = 666;定義了局部變量 a，同樣覆蓋了全局變量，但是在 alert(a);之前 a 并未賦值，所以輸出 undefined。 var a = 6; setTimeout(function(){ alert(a); var a = 66; }, 1000); a = 666; alert(a); // 666, undefined; 記住：異步處理，一切 OK 聲明提前 ``` 31、精度問題: JS 精度不能精確到 0.1 所以。。。。同時存在于值和差值中 ``` var n = 0.3,m = 0.2, i = 0.2, j = 0.1; alert((n - m) == (i - j)); //false alert((n-m) == 0.1); //false alert((i-j)==0.1); //true ``` 32、加減運算 ``` alert('5'+3); //53 string alert('5'+'3'); //53 string alert('5'-3); //2 number alert('5'-'3'); //2 number ``` 33、結果是什么？ ``` function foo(){ foo.a = function(){alert(1)}; this.a = function(){alert(2)}; a = function(){alert(3)}; var a = function(){alert(4)}; }; foo.prototype.a = function(){alert(5)}; foo.a = function(){alert(6)}; foo.a(); //6 var obj = new foo(); obj.a(); //2 foo.a(); //1 ``` 34、輸出結果 ``` var a = 5; function test(){ a = 0; alert(a); alert(this.a); //沒有定義 a 這個屬性 var a; alert(a) } test(); // 0, 5, 0 new test(); // 0, undefined, 0 //由于類它自身沒有屬性 a，所以是 undefined ``` 35、結果是 ``` var bool = !!2; alert(bool)；//true; 雙向非操作可以把字符串和數字轉換為布爾值。 ``` 36、下面這段代碼想要循環輸出結果 01234，請問輸出結果是否正確，如果不正確，請說明為什么，并修改循環內的代碼使其輸出正確結果 ~~~ for(var i=0;i<5;++i){ setTimeout(function(){ console.log(i+''); },100*i); } ~~~ 37、.JavaScript alert(0.4*0.2);結果是多少？和你預期的一樣嗎？如果不一樣該如何處理？有誤差，應該比準確結果偏大。原因： java和JavaScript中計算小數運算時,都會先將十進制的小數換算到對應的二進制,一部分小數并不能完整的換算為二進制,這里就出現了第一次的誤差解決方案：一般我會將小數變為整數來處理。當然原理也是一致先轉為整數再計算。 ``` alert(((0.4*10)*(0.2*10))/10); ``` 38、下列 JavaScript 代碼執行后，依次 alert 的結果是 ``` (function test(){ var a=b=5; alert(typeof a); alert(typeof b); })(); alert(typeof a); alert(typeof b); 答案：number number undefined number ``` 39、下列 JavaScript 代碼執行后，iNum 的值是 ``` var iNum = 0; for(var i = 1; i< 10; i++){ if(i % 5 == 0){ continue; } iNum++; } 答案：8 ``` 40、輸出結果是多少？ ``` 1） var a; var b = a * 0; if (b == b) { console.log(b * 2 + "2" - 0 + 4); } else { console.log(!b * 2 + "2" - 0 + 4); } 答案：26 2） <script> var a = 1; </script> <script> var a; var b = a * 0; if (b == b) { console.log(b * 2 + "2" - 0 + 4); } else { console.log(!b * 2 + "2" - 0 + 4); } </script> 答案：6 3） var t = 10; function test(t){ var t = t++; }test(t); console.log(t); 答案：10 4） var t = 10; function test(test){ var t = test++; }test(t); console.log(t); 答案：10 6） var t = 10; function test(test){ t = test++; }test(t); console.log(t); 答案：10 7） var t = 10; function test(test){ t = t + test; console.log(t); var t = 3; }test(t); console.log(t); 答案：NaN 10 8） var a; var b = a / 0; if (b == b) { console.log(b * 2 + "2" - 0 + 4); } else { console.log(!b * 2 + "2" - 0 + 4); } 答案：26 9） <script> var a = 1; </script> <script> var a; var b = a / 0; if (b == b) { console.log(b * 2 + "2" + 4); } else { console.log(!b * 2 + "2" + 4); } </script> 答案：Infinity24 ``` 41、下列 JavaScript 代碼執行后，運行的結果是 ``` <button id='btn'>點擊我</button> var btn = document.getElementById('btn'); var handler = { id: '_eventHandler', exec: function(){ alert(this.id); } } btn.addEventListener('click', handler.exec); 答案：”btn" ``` 42、下列 JavaScript 代碼執行后，依次 alert 的結果是 ``` var obj = {proto: {a:1,b:2}}; function F(){}; F.prototype = obj.proto; var f = new F(); obj.proto.c = 3; obj.proto = {a:-1, b:-2}; alert(f.a); alert(f.c); delete F.prototype['a']; alert(f.a); alert(obj.proto.a); 答案： 1 3 undefined -1 ``` 43、下列 JavaScript 代碼執行后的效果是 ``` <ul id='list'> <li>item</li> <li>item</li> <li>item</li> <li>item</li> <li>item</li> </ul> var items = document.querySelectorAll('#list>li'); for(var i = 0;i < items.length; i++){ setTimeout(function(){ items[i].style.backgroundColor = '#fee'; }, 5); } 答案：報錯，因為 i 一直等于 5，items[i]獲取不到元素 ``` 44、下列 JavaScript 代碼執行后的 li 元素的數量是 ``` <ul> <li>Item</li> <li></li> <li></li> <li>Item</li> <li>Item</li> </ul> var items = document.getElementsByTagName('li'); for(var i = 0; i< items.length; i++){ if(items[i].innerHTML == ''){ items[i].parentNode.removeChild(items[i]); } } ``` 45、數組和字符串 ``` <script lang="JavaScript" type="text/javascript"> function outPut(s) { document.writeln(s); } var a = "lashou"; var b = a; outPut(b); a = "拉手"; outPut(a); outPut(b); var a_array = [1, 2, 3]; var b_array = a_array; outPut(b_array); a_array[3] = 4; outPut(a_array); outPut(b_array); </script> 輸出結果：答案：lashou 拉手 lashou 1,2,3 1,2,3,4 1,2,3,4 ``` 46、下列控制臺都輸出什么 ``` 第 1 題： function setName(){ name="張三"; } setName(); console.log(name); 答案："張三" 第 2 題： //考點：1、變量聲明提升 2、變量搜索機制 var a=1; function test(){ console.log(a); var a=1; } test(); 答案：undefined 第 3 題： var b=2; function test2(){ window.b=3; console.log(b); } test2(); 答案：3 第 4 題： c=5;//聲明一個全局變量 c function test3(){ window.c=3; console.log(c); //答案：undefined，原因：由于此時的 c 是一個局部變量 c，并且沒有被賦值 var c; console.log(window.c);//答案：3，原因：這里的 c 就是一個全局變量 c } test3(); 第 5 題： var arr = []; arr[0] = 'a'; arr[1] = 'b'; arr[10] = 'c'; alert(arr.length); //答案：11 console.log(arr[5]); //答案：undefined 第 6 題： var a=1; console.log(a++); //答案：1 console.log(++a); //答案：3 第 7 題： console.log(null==undefined); //答案：true console.log("1"==1); //答案：true，因為會將數字 1 先轉換為字符串 1 console.log("1"===1); //答案：false，因為數據類型不一致第 8 題： typeof 1; "number" typeof "hello"; "string" typeof /[0-9]/; "object" typeof {}; "object" typeof null; "object" typeof undefined; "undefined" typeof [1,2,3]; "object" typeof function(){}; //"function" 第 9 題： parseInt(3.14); //3 parseFloat("3asdf"); //3 parseInt("1.23abc456"); parseInt(true);//"true" NaN 第 10 題： //考點：函數聲明提前 function bar() { return foo; foo = 10; function foo() {} //var foo = 11; } alert(typeof bar());//"function" 第 11 題： //考點：函數聲明提前 var foo = 1; function bar() { foo = 10; return; function foo() {} } bar(); alert(foo);//答案：1 第 12 題： console.log(a);//是一個函數 var a = 3; function a(){} console.log(a);////3 第 13 題： //考點：對 arguments 的操作 function foo(a) { arguments[0] = 2; alert(a);//答案：2，因為：a、arguments 是對實參的訪問，b、通過 arguments[i]可以修改指定實參的值 } foo(1); 第 14 題： function foo(a) { alert(arguments.length);//答案：3，因為 arguments 是對實參的訪問 } foo(1, 2, 3); 第 15 題 bar();//報錯 var foo = function bar(name) { console.log("hello"+name); console.log(bar); }; //alert(typeof bar); foo("world");//"hello" console.log(bar);//undefined console.log(foo.toString()); bar();//報錯第 16 題： function test(){ console.log("test 函數"); } setTimeout(function(){ console.log("定時器回調函數"); }, 0) test(); 結果： test 函數定時器回調函數 ``` 47、對作用域上下文和 this 的理解，看下列代碼： ``` var User = { count: 1, getCount: function() { return this.count; } }; console.log(User.getCount()); // what? var func = User.getCount; console.log(func()); // what? 問兩處 console 輸出什么？為什么？答案是 1 和 undefined。 func 是在 winodw 的上下文中被執行的，所以會訪問不到 count 屬性。繼續追問，那么如何確保 Uesr 總是能訪問到 func 的上下文，即正確返回 1。正確的方法是使用 Function.prototype.bind。兼容各個瀏覽器完整代碼如下： Function.prototype.bind = Function.prototype.bind || function(context){ var self = this; return function(){ return self.apply(context, arguments); }; } var func = User.getCount.bind(User); console.log(func()); ``` 48、運行結果 ~~~ console.log(a) var a = 12 function fn() { console.log(a) var a = 13 } fn() console.log(a) /* * 預解析： * a = undefined * function fn() { console.log(a); var a = 13 } * 逐行解讀代碼： * console.log(a) // undefined * var a = 12 * function fn() { console.log(a); var a = 13 } // 函數聲明，不執行跳過 * fn() // 函數調用 * 預解析： * a = undefined * 逐行解讀代碼： * console.log(a) // undefined * * console.log(12) // 12 * */ ~~~ 49、運行結果 ~~~ console.log(a) var a = 12 function fn() { console.log(a) a = 13 } fn() console.log(a) /* * 預解析： * a = undefined * function fn() { console.log(a); a = 13 } * 逐行解讀代碼： * consosle.log(a) // undefined * var a = 12 * function fn() { console.log(a); a = 13 } // 不執行，因為是函數聲明 * fn() // 這個函數調用，開啟新的局部作用域解析機制 * 預解析： * 空 // 因為沒有var、參數、function、this，預解析找的就是這些東西 * 逐行解讀代碼： * console.log(a) // 12 * a = 13 * console.log(a) // 13 * * */ ~~~ 50、運行結果 ~ O(∩_∩)O哈哈~ ~~~ console.log(a) a = 12 function fn() { console.log(a) a = 13 } fn() console.log(a) /* * 實際情況是下面這樣： * 預解析： * function fn() { console.log(a); a = 13 } * 逐行解讀代碼： * console.log(a) // a is not defined，程序報錯后續代碼不執行 * */ /* * 把第一行注釋掉就是下面的結果 * 預解析： * function fn() { console.log(a); a = 13 } * 逐行解讀代碼： * console.log(a) // a is not defined * a = 12 * function fn() { console.log(a); a = 13 } // 函數聲明，不理會它，跳過 * fn() // 函數執行，開啟新的局部預解析、逐行解讀代碼 * 預解析： * 空 * 逐行解讀代碼： * console.log(a) // 12 * a = 13 * console.log(a) // 13 * */ ~~~ 51、運行結果： ~~~ var foo = 1 function bar() { if (!foo) { var foo = 10 } console.log(foo) } bar() /* * 預解析： * foo = undefined * function bar() { if(!foo) { var foo = 100 } console.log(100) } * 逐行解讀代碼： * foo = 1 * function bar() { if(!foo) { var foo = 100 } console.log(100) } // 函數聲明，不理會它，跳過 * bar() // 函數執行，開啟新的局部解析作用域 * 預解析： * foo = undefined * 逐行解讀代碼： * if(!foo) { var foo = 100 } // 此時foo = undefined， undefined取反，不就是真么，所以條件成立 * foo = 10 * console.log(10) // 最終結果就是：10 * */ ~~~ 52、運行結果： ~~~ var n = 0 function a() { var n = 10 function b() { n++ console.log(n) } b() return b } var c = a() c() console.log(n) /* * 預解析： * n = undefined * function a() { var n = 10 function b() { n++ console.log(n) } b() return b } c = undefined 逐行解讀代碼： n = 0 c = a() c() // 執行a開啟新的局部作用域 * 預解析： * n = undefined * function b() { n++; console.log(n) } * 逐行解讀代碼： * n = 10 * function b() { n++; console.log(n) } // 函數聲明跳過不理它 * b() // 函數調用，開啟新的局部作用域： * 預解析： * 空 * 逐行解讀代碼： * n++ // 按照作用域鏈線上及查找 * console.log(n) // 11 * return b // n++; console.log(n) c() 會導致B()函數的里面的n再次++，因此結果就是:n = 12 console.log(n) // 但是外部作用域無法訪問內部的變量，結果就是：0 * * 最終結果就是：11 12 0 * * */ ~~~ 53、運行結果 ~~~ var a = 10, b = 11, c = 12 function test(a) { a = 1 var b = 2 c = 3 } test(10) console.log(a) console.log(b) console.log(c) /* * 預解析： * a = undefined * b = undefined * c = undefined * function test(a) { a = 1; var b = 2; c = 3 } * 逐行解讀代碼： * a = 10 * b = 11 * c = 12 * function test(a) { a = 1; var b = 2; c = 3 } // 跳過，不理會，因為是函數聲明 * test(10) // 函數執行，開啟新的作用域解析： * 預解析： * a = undefined * b = undefined * 逐行解讀代碼： * a = 10 // 實參傳遞進來的 * b = 2 // 私有的 * c = 3 // 全局的 * console.log(a) // 10 * console.log(b) // 11 * console.log(c) // 3 * */ ~~~ 54、分析運行結果 ~~~ if (!("a" in window)) { var a = 1 } console.log(a) /* * 預解析： * a = undefined * 在全局聲明的變量相當于掛載到了window上面，因此window上面此時就存在了a變量 * 逐行解讀代碼： * if語句不成立，所以不進入 * console.log(a) // undefined * */ ~~~ 55、分析運行結果 ~~~ // 'use strict' var a = 4 function b(x, y, a) { console.log(a) arguments[2] = 10 console.log(a) } a = b(1, 2, 3) console.log(a) /* * 預解析： * a = undefined * function b(x, y, a) { console.log(a) arguments[2] = 10 console.log(a) } 逐行解讀代碼： a = 4 function b() {} // 函數聲明，跳過，不執行 a = b(1, 2, 3) // 函數調用，執行代碼，開啟新的局部作用域： * 預解析： * x = undefined * y = undefined * a = undefined * 逐行解讀代碼： * console.log(a) // 3 * arguments[2] = 10 -> a = 10 * console.log(a) // 10 a = b(1, 2, 3) // 把b函數的返回值給我到a變量，而此時b沒有返回值，所以 a = undefined console.log(a) // 結果就是：undefined * * * */ /* * 在JS的非嚴格模式下，函數的實參集合與形參變量存在映射關系，不管其中一個誰改變了，另外一個都會跟著改變 * function fn(a) { * // a = 10 * arguments[0] = 100 * // a = 100 * } * fn(10) * * 在JS嚴格模式下，arguments和形參變量的映射關系就被切斷了，相互之間互不干擾 * */ ~~~ 56、分析結果： ~~~ var foo = 'hello'; (function (foo) { console.log(foo) var foo = foo || 'world' console.log(foo) })(foo) // 把全局foo的值當做實參傳遞給私有作用域中的形參 console.log(foo) /* * 預解析： * foo = undefined * 逐行解讀代碼： * foo = 'hello' * 自執行函數執行，開啟函數內部的解析 * 預解析： * foo = undefined // 注意：這里的foo和外部全局的foo，不是同一個 * 逐行解讀代碼： * console.log(foo) // hello - 外部傳遞進來的數據是hello，雖然此foo非彼foo但是值是同一個 * var foo = foo || 'world' // * console.log(foo) // hello * console.log(foo) // hello * * * * 邏輯&& 與邏輯|| * 在&&和||一起使用的時候： * &&的優先級高于|| * 在條件判斷中： * &&：所有條件都為真，整體才為真 * ||：只要有一個條件為真，整體就為真 * 在賦值操作中： * ||：A||B，首先看A的真假，A為真返回的是A的值，A為假返回的是B的值(不管B是啥) * 1||2 => 1 * 0||false => false * &&：A&&B，首先看A的真假，A為假返回A的值，A為真返回B的值 * 1&&2 => 2 * 0&&false => 0 * // 在實際中的應用 function fn(num, callback) { // 如果num沒有傳值，讓其默認為0 num = num || 0 // 這種做法不太嚴謹 callback && callback() // 如果傳了就執行，如果不傳就不執行 } * // 調用 fn(1, function() {}) * */ ~~~ 57、分析結果： ~~~ console.log(0||2&&false||3) /* * 按照運算符優先級來看的話： * 先計算：2 && false * 結果是：2 為真返回 false * 接下來就是： * 0 || false || 3 對比 * 結果：0 為假返回 false * false || 3 * 結果：false 為假返回 3 * 最終結果就是：3 * * */ ~~~ ***** 預解析規則： 1，預解析：找東西通過var、function、參數、this 2，逐行解讀代碼，遇到表達式就會改變原來預解析倉庫中的內容，如果遇到函數調用就開了一個新的作用域，重新開始預解析、逐行解讀代碼；如果在函數作用于內部沒有通過var、function、參數找到任何東西，那么就會返回到父級繼續查找，這就是作用域鏈的過程 58、分析結果 ~~~ console.log(a); // undefined var a = 1; ~~~ 59、分析結果 ~~~ console.log(a); // a is not defined a = 1; ~~~ 60、分析結果 ~~~ alert(a); var a = 1; function fn() { alert(2) }; 解析順序： 1，找一些東西：var、function、參數（先把需要的東西找齊了才去逐行解讀代碼）根據var找到a = 未定義（為什么不去讀取呢？我們有理由相信一個偷懶機制，萬一a = \[\]或{}那默認上來讀取的數據量就比較龐大），所有的變量在正式運行代碼之前都會提前賦值：未定義根據function找到fn = function fn() {alert(2)}（所有函數，在正式運行代碼之前都是整個函數塊）我們把這個步驟稱為：JS的預解析 2，逐行解讀代碼當逐行解讀代碼的時候，每次都要去倉庫里看一眼，看看里面有沒有現在遇到的東西：當讀取到a的時候不會往下繼續讀取而是先回到倉庫里面看看有沒有a，我們倉庫中現在有一個a = 未定義，所以alert(a)的結果就是undefined。 ~~~ 61、分析結果 ~~~ console.log(a); // a is not defined a = 1; 解析順序： 1，整個代碼片段一看沒有var，沒有函數，沒有參數，所以以上代碼預解析完成后倉庫里面什么都沒有 2，倉庫里面什么都沒有的情況下再逐行解讀代碼就會出現a is not defined ~~~ 62、分析結果 ~~~ // 示例：逐行解讀代碼 alert(a); // function a() {alert(4)} var a = 1; alert(a); // 1 function a() { alert(2); }; alert(a); // 1 var a = 3; alert(a); // 3 function a() { alert(4); }; alert(a); // 3 // 解析過程 1，預解析：var function 參數倉庫中的值： a = undefined a = function a() {alert(2)} 注意：在預解析的過程中，如果遇到重名的只會留下一個，一個是a = undefined另一個是a = function a(0 {alert(2)}，這個和上下文沒有關系，主要是看有沒有值，所以現在倉庫中的值發生了變化。倉庫中的值： a = function a() {alert(2)} var a = 3；這行的時候又會把a提取出來a = undefined，沒有值所以：倉庫中的值： a = function a() {alert(2)} function a() {alert(4)}；這行的時候會把a = function a(){alert(4)}提取出來，這個時候倉庫中的值為： a = function a() {alert(2)} a = function a() {alert(4)} 這兩個PK才會遵循上下文的順序倉庫中的值： a = function a() {alert(4)} 預解析完成！！！倉庫中的值為： a = function a() {alert(4)} 2，逐行解讀代碼：表達式：=+-\*/%++--!，表達式可以修改預解析的值第一個alert結果：function a() {alert(4)} 表達式是可以修改倉庫中的值所以第二個alert結果：1 函數聲明不能修改預解析的值所以第三個alert結果：1 第四個alert結果：3 第五個alert結果：3 擴展：如果我在本實例最下面添加a();結果是什么？ // 示例：逐行解讀代碼 alert(a); // function a() {alert(4)} var a = 1; alert(a); // 1 function a() { alert(2); }; alert(a); // 1 var a = 3; alert(a); // 3 function a() { alert(4); }; alert(a); // 3 a()； //a is not defined 解答： alert(typeof a) //number 因為a這時候等于3，相當于3()；JS 中有這樣的語法嗎？沒有所以報錯了 ~~~ 63、分析結果 ~~~ var a = 1; function fn() { alert(a); // undefined var a = 2; } fn(); alert(a); // 1 1，預解析： a = undefined fn = function fn() {alert(a);var a = 2;} 2，逐行解讀代碼：第一行：var a = 1;由于是表達式可以改變值，所以a得值變為了： a = 1; 第二行：function fn() {alert(a);var a = 2;}，由于這是函數聲明不會改變值，所以不做任何修改，繼續往下走第三行：fn()；這個時候遇到了函數調用，那么就會往這個函數里面走，函數呢也是一個域，所以就會執行預解析、逐行解讀代碼： 1，fn()函數局部預解析：由于遇到了var a = 2;所以預解析的結果為：a = undefined 2，fn()含數局部逐行解析代碼：第一行：alert(a)；由于預解析a = undefined此時和外面的a沒有半毛錢關系，所以結果就是undefined 第二行：var a = 2;由于是表達式所以會改變函數作用于中a的值所以a = 2 fn()函數調用已走完第四行：alert(a)；這里會查找全局a = 1;所以結果就是1 ~~~ 64、分析結果 ~~~ var a = 1; function fn() { alert(a); a = 2; } fn(); alert(a); // 解析過程 1，預解析： a = undefined fn = function fn () {alert(a); a = 2;} 2，逐行解讀代碼： a = 1； function fn () {alert(a); a = 2;}，函數聲明不做修改 fn(); 函數調用，掉頭執行function fn () {alert(a); a = 2;}，函數作用于執行： 1，預解析：沒有找到var function 參數 2，逐行解讀代碼： alert(a)內部沒又找到，查找外層a = 1（作用域鏈）;所以alert(a)結果就是：1 a = 2; 第二個：alert(a)； // 2 ~~~ 65、解析過程 ~~~ var a = 1; function fn(a) { alert(a); a = 2; } fn(); alert(a); // 解析過程 1，預解析： a = undefined fn = function fn(a) {alert(a); a = 2} 2，逐行解讀代碼 a = 1; fn()函數調用開始新的作用域： 1，預解析：沒有var，沒有function，找到了參數a，參數本質上就是局部變量 a = undefined； 2，逐行解讀代碼：第一個alert(a)： undefined a = 2;（修改的是局部的a，并非全局的a）第二個alert(a)： 1 ~~~ 66、解析過程 ~~~ var a = 1; function fn(a) { alert(a); a = 2; } fn(a); alert(a); // 解析過程 1，預解析： a = undefined fn = function fn (a) {aler(a); a= 2}; 2，逐行解讀代碼 a = 1; fn(a) 函數調用： 1，預解析（var、function、參數）： a = undefined 2，逐行解讀代碼：傳遞了實參：a = 1 alert(a) //1 a = 2; alert(a)（全局的a） // 1 ~~~