譯者：前端小智
你知道的越多，你不知道的越多
點贊再看，養成習慣
本文 GitHub：github.com/qq449245884… 上已經收錄，更多往期高贊文章的分類，也整理了很多我的文件，和教程資料。歡迎Star和完善，大家面試可以參照考點複習，希望我們一起有點東西。
JavaScript 是一種有趣的語言，我們都喜歡它，因為它的性質。瀏覽器是JavaScript的主要執行的地方，兩者在我們的服務中協同工作。JS有一些概念，人們往往會對它掉以輕心，有時可能會忽略不計。原型、閉包和事件迴圈等概念仍然是大多數JS開發人員繞道而行的晦澀領域之一。正如我們所知，無知是一件危險的事情，它可能會導致錯誤。
想閱讀更多優質文章請猛戳GitHub部落格,一年百來篇優質文章等著你！
接下來，來看看幾個問題，你也可以試試想想，然後作答。
問題1：瀏覽器控制檯上會列印什麼？
var a = 10;
function foo() {
console.log(a); // ??
var a = 20;
}
foo();
複製程式碼問題2:如果我們使用 let 或 const 代替 var，輸出是否相同
var a = 10;
function foo() {
console.log(a); // ??
let a = 20;
}
foo();
複製程式碼問題3：“newArray”中有哪些元素？
var array = [];
for(var i = 0; i <3; i++) {
array.push(() => i);
}
var newArray = array.map(el => el());
console.log(newArray); // ??
複製程式碼問題4：如果我們在瀏覽器控制檯中執行'foo'函式，是否會導致堆疊溢位錯誤？
function foo() {
setTimeout(foo, 0); // 是否存在堆疊溢位錯誤?
};
複製程式碼問題5: 如果在控制檯中執行以下函式，頁面(選項卡)的 UI 是否仍然響應
function foo() {
return Promise.resolve().then(foo);
};
複製程式碼問題6: 我們能否以某種方式為下面的語句使用展開運算而不導致型別錯誤
var obj = { x: 1, y: 2, z: 3 };
[...obj]; // TypeError
複製程式碼問題7：執行以下程式碼片段時，控制檯上會列印什麼？
var obj = { a: 1, b: 2 };
Object.setPrototypeOf(obj, {c: 3});
Object.defineProperty(obj, 'd', { value: 4, enumerable: false });
// what properties will be printed when we run the for-in loop?
for(let prop in obj) {
console.log(prop);
}
複製程式碼問題8：xGetter() 會列印什麼值？
var x = 10;
var foo = {
x: 90,
getX: function() {
return this.x;
}
};
foo.getX(); // prints 90
var xGetter = foo.getX;
xGetter(); // prints ??
複製程式碼答案
現在，讓我們從頭到尾回答每個問題。我將給您一個簡短的解釋，同時試圖揭開這些行為的神祕面紗，並提供一些參考資料。
問題1： undefined
解析：
使用var關鍵字宣告的變數在JavaScript中會被提升，並在記憶體中分配值undefined。 但初始化恰發生在你給變數賦值的地方。 另外，var宣告的變數是函式作用域的，而let和const是塊作用域的。 所以，這就是這個過程的樣子：
var a = 10; // 全域性使用域
function foo() {
// var a 的宣告將被提升到到函式的頂部。
// 比如:var a
console.log(a); // 列印 undefined
// 實際初始化值20只發生在這裡
var a = 20; // local scope
}
複製程式碼問題 2：ReferenceError：a undefined。
解析：
let和const宣告可以讓變數在其作用域上受限於它所使用的塊、語句或表示式。與var不同的是，這些變數沒有被提升，並且有一個所謂的暫時死區(TDZ)。試圖訪問TDZ中的這些變數將引發ReferenceError，因為只有在執行到達宣告時才能訪問它們。
var a = 10; // 全域性使用域
function foo() { // TDZ 開始
// 建立了未初始化的'a'
console.log(a); // ReferenceError
// TDZ結束，'a'僅在此處初始化，值為20
let a = 20;
}
複製程式碼下表概述了與JavaScript中使用的不同關鍵字宣告的變數對應的提升行為和使用域：
問題 3: [3, 3, 3]
解析：
在for迴圈的頭部宣告帶有var關鍵字的變數會為該變數建立單個繫結（儲存空間）。 閱讀更多關於閉包的資訊。 讓我們再看一次for迴圈。
// 誤解作用域:認為存在塊級作用域
var array = [];
for (var i = 0; i < 3; i++) {
// 三個箭頭函式體中的每個`'i'`都指向相同的繫結，
// 這就是為什麼它們在迴圈結束時返回相同的值'3'。
array.push(() => i);
}
var newArray = array.map(el => el());
console.log(newArray); // [3, 3, 3]
複製程式碼如果使用 let 宣告一個具有塊級作用域的變數，則為每個迴圈迭代建立一個新的繫結。
// 使用ES6塊級作用域
var array = [];
for (let i = 0; i < 3; i++) {
// 這一次，每個'i'指的是一個新的的繫結，並保留當前的值。
// 因此，每個箭頭函式返回一個不同的值。
array.push(() => i);
}
var newArray = array.map(el => el());
console.log(newArray); // [0, 1, 2]
複製程式碼解決這個問題的另一種方法是使用閉包。
let array = [];
for (var i = 0; i < 3; i++) {
array[i] = (function(x) {
return function() {
return x;
};
})(i);
}
const newArray = array.map(el => el());
console.log(newArray); // [0, 1, 2]
複製程式碼問題4 : 不會溢位
解析：
JavaScript併發模型基於“事件迴圈”。 當我們說“瀏覽器是 JS 的家”時我真正的意思是瀏覽器提供執行時環境來執行我們的JS程式碼。
瀏覽器的主要元件包括呼叫堆疊，事件迴圈**，任務佇列和Web API**。 像setTimeout，setInterval和Promise這樣的全域性函式不是JavaScript的一部分，而是 Web API 的一部分。 JavaScript 環境的視覺化形式如下所示：
JS呼叫棧是後進先出(LIFO)的。引擎每次從堆疊中取出一個函式，然後從上到下依次執行程式碼。每當它遇到一些非同步程式碼，如setTimeout，它就把它交給Web API(箭頭1)。因此，每當事件被觸發時，callback 都會被髮送到任務佇列（箭頭2）。
事件迴圈(Event loop)不斷地監視任務佇列(Task Queue)，並按它們排隊的順序一次處理一個回撥。每當呼叫堆疊(call stack)為空時，Event loop獲取回撥並將其放入堆疊(stack )(箭頭3)中進行處理。請記住，如果呼叫堆疊不是空的，則事件迴圈不會將任何回撥推入堆疊。
現在，有了這些知識，讓我們來回答前面提到的問題：
步驟
-
呼叫
foo()會將foo函式放入呼叫堆疊(call stack)。 -
在處理內部程式碼時，JS引擎遇到
setTimeout。 -
然後將
foo回撥函式傳遞給WebAPIs(箭頭1)並從函式返回，呼叫堆疊再次為空 -
計時器被設定為0，因此
foo將被髮送到任務佇列(箭頭2)。 -
由於呼叫堆疊是空的，事件迴圈將選擇
foo回撥並將其推入呼叫堆疊進行處理。 -
程式再次重複，堆疊不會溢位。
執行示意圖如下所示：
問題5 : 不會響應
解析：
大多數時候，開發人員假設在事件迴圈圖中只有一個任務佇列。但事實並非如此，我們可以有多個任務佇列。由瀏覽器選擇其中的一個佇列並在該佇列中處理回撥。
在底層來看，JavaScript中有巨集任務和微任務。setTimeout回撥是巨集任務，而Promise回撥是微任務。
主要的區別在於他們的執行方式。巨集任務在單個迴圈週期中一次一個地推入堆疊，但是微任務佇列總是在執行後返回到事件迴圈之前清空。因此，如果你以處理條目的速度向這個佇列新增條目，那麼你就永遠在處理微任務。只有當微任務佇列為空時，事件迴圈才會重新渲染頁面、
現在，當你在控制檯中執行以下程式碼段
function foo() {
return Promise.resolve().then(foo);
};
複製程式碼每次呼叫'foo'都會繼續在微任務佇列上新增另一個'foo'回撥，因此事件迴圈無法繼續處理其他事件（滾動，單擊等），直到該佇列完全清空為止。 因此，它會阻止渲染。
問題6 : 會導致TypeError錯誤
解析：
展開語法 和 for-of 語句遍歷iterable物件定義要遍歷的資料。Array 或Map 是具有預設迭代行為的內建迭代器。物件不是可迭代的，但是可以通過使用iterable和iterator協議使它們可迭代。
在Mozilla文件中，如果一個物件實現了@@iterator方法，那麼它就是可迭代的，這意味著這個物件(或者它原型鏈上的一個物件)必須有一個帶有@@iterator鍵的屬性，這個鍵可以通過常量Symbol.iterator獲得。
上述語句可能看起來有點冗長，但是下面的示例將更有意義：
var obj = { x: 1, y: 2, z: 3 };
obj[Symbol.iterator] = function() {
// iterator 是一個具有 next 方法的物件，
// 它的返回至少有一個物件
// 兩個屬性：value＆done。
// 返回一個 iterator 物件
return {
next: function() {
if (this._countDown === 3) {
const lastValue = this._countDown;
return { value: this._countDown, done: true };
}
this._countDown = this._countDown + 1;
return { value: this._countDown, done: false };
},
_countDown: 0
};
};
[...obj]; // 列印 [1, 2, 3]
複製程式碼還可以使用 generator 函式來定製物件的迭代行為：
var obj = {x:1, y:2, z: 3}
obj[Symbol.iterator] = function*() {
yield 1;
yield 2;
yield 3;
}
[...obj]; // 列印 [1, 2, 3]
複製程式碼問題7 : a, b, c
解析：
for-in迴圈遍歷物件本身的可列舉屬性以及物件從其原型繼承的屬性。 可列舉屬性是可以在for-in迴圈期間包含和訪問的屬性。
var obj = { a: 1, b: 2 };
var descriptor = Object.getOwnPropertyDescriptor(obj, "a");
console.log(descriptor.enumerable); // true
console.log(descriptor);
// { value: 1, writable: true, enumerable: true, configurable: true }
複製程式碼現在你已經掌握了這些知識，應該很容易理解為什麼我們的程式碼要列印這些特定的屬性
var obj = { a: 1, b: 2 }; //a，b 都是 enumerables 屬性
// 將{c：3}設定為'obj'的原型，並且我們知道
// for-in 迴圈也迭代 obj 繼承的屬性
// 從它的原型，'c'也可以被訪問。
Object.setPrototypeOf(obj, { c: 3 });
// 我們在'obj'中定義了另外一個屬性'd'，但是
// 將'enumerable'設定為false。 這意味著'd'將被忽略。
Object.defineProperty(obj, "d", { value: 4, enumerable: false });
for (let prop in obj) {
console.log(prop);
}
// 列印
// a
// b
// c
複製程式碼問題8 : 10
解析：
在全域性範圍內初始化x時，它成為window物件的屬性(不是嚴格的模式)。看看下面的程式碼:
var x = 10; // global scope
var foo = {
x: 90,
getX: function() {
return this.x;
}
};
foo.getX(); // prints 90
let xGetter = foo.getX;
xGetter(); // prints 10
複製程式碼我們們可以斷言：
window.x === 10; // true
複製程式碼this 始終指向呼叫方法的物件。因此，在foo.getx()的例子中，它指向foo物件，返回90的值。而在xGetter()的情況下，this指向 window物件, 返回 window 中的x的值，即10。
要獲取 foo.x的值，可以通過使用Function.prototype.bind將this的值繫結到foo物件來建立新函式。
let getFooX = foo.getX.bind(foo);
getFooX(); // 90
複製程式碼就這樣！ 如果你的所有答案都正確，那麼幹漂亮。 我們們都是通過犯錯來學習的。 這一切都是為了瞭解背後的“原因”。
程式碼部署後可能存在的BUG沒法實時知道，事後為了解決這些BUG，花了大量的時間進行log 除錯，這邊順便給大家推薦一個好用的BUG監控工具 Fundebug。
交流（歡迎加入群，群工作日都會發紅包，互動討論技術）
為了回饋讀者，《大遷世界》不定期舉行(每個月一到三次)，現金抽獎活動，保底200，外加使用者讚賞，希望你能成為大遷世界的小錦鯉，快來試試吧
乾貨系列文章彙總如下，覺得不錯點個Star，歡迎 加群 互相學習。
我是小智，公眾號「大遷世界」作者，對前端技術保持學習愛好者。我會經常分享自己所學所看的乾貨，在進階的路上，共勉！
關注公眾號，後臺回覆福利，即可看到福利，你懂的。
每次整理文章，一般都到2點才睡覺，一週4次左右，挺苦的，還望支援，給點鼓勵
