摘要： 神奇的JS系列仅叫。
- 作者：前端小智
- 原文：8個(gè)問(wèn)題看你是否真的懂 JS
Fundebug經(jīng)授權(quán)轉(zhuǎn)載本刽，版權(quán)歸原作者所有赫冬。
JavaScript 是一種有趣的語(yǔ)言讽坏，我們都喜歡它妇萄，因?yàn)樗男再|(zhì)概说。瀏覽器是JavaScript的主要運(yùn)行的地方，兩者在我們的服務(wù)中協(xié)同工作嚣伐。JS有一些概念糖赔，人們往往會(huì)對(duì)它掉以輕心，有時(shí)可能會(huì)忽略不計(jì)轩端。原型放典、閉包和事件循環(huán)等概念仍然是大多數(shù)JS開(kāi)發(fā)人員繞道而行的晦澀領(lǐng)域之一。正如我們所知基茵，無(wú)知是一件危險(xiǎn)的事情奋构，它可能會(huì)導(dǎo)致錯(cuò)誤。
接下來(lái)拱层，來(lái)看看幾個(gè)問(wèn)題弥臼，你也可以試試想想，然后作答根灯。
問(wèn)題1：瀏覽器控制臺(tái)上會(huì)打印什么径缅？
var a = 10;
function foo() {
console.log(a); // ??
var a = 20;
}
foo();
問(wèn)題2：如果我們使用 let 或 const 代替 var，輸出是否相同烙肺？
var a = 10;
function foo() {
console.log(a); // ??
let a = 20;
}
foo();
問(wèn)題3：“newArray”中有哪些元素纳猪？
var array = [];
for (var i = 0; i < 3; i++) {
array.push(() => i);
}
var newArray = array.map(el => el());
console.log(newArray); // ??
問(wèn)題4：如果我們?cè)跒g覽器控制臺(tái)中運(yùn)行'foo'函數(shù)，是否會(huì)導(dǎo)致堆棧溢出錯(cuò)誤桃笙？
function foo() {
setTimeout(foo, 0); // 是否存在堆棧溢出錯(cuò)誤?
}
問(wèn)題5: 如果在控制臺(tái)中運(yùn)行以下函數(shù)氏堤，頁(yè)面(選項(xiàng)卡)的 UI 是否仍然響應(yīng)
function foo() {
return Promise.resolve().then(foo);
}
問(wèn)題6: 我們能否以某種方式為下面的語(yǔ)句使用展開(kāi)運(yùn)算而不導(dǎo)致類(lèi)型錯(cuò)誤
var obj = { x: 1, y: 2, z: 3 };
[...obj]; // TypeError
問(wèn)題7：運(yùn)行以下代碼片段時(shí)，控制臺(tái)上會(huì)打印什么搏明？
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);
}
問(wèn)題8：xGetter() 會(huì)打印什么值鼠锈？
var x = 10;
var foo = {
x: 90,
getX: function() {
return this.x;
}
};
foo.getX(); // prints 90
var xGetter = foo.getX;
xGetter(); // prints ??
答案
現(xiàn)在闪檬，讓我們從頭到尾回答每個(gè)問(wèn)題。我將給您一個(gè)簡(jiǎn)短的解釋?zhuān)瑫r(shí)試圖揭開(kāi)這些行為的神秘面紗购笆，并提供一些參考資料谬以。
問(wèn)題1： undefined
使用var關(guān)鍵字聲明的變量在JavaScript中會(huì)被提升，并在內(nèi)存中分配值undefined由桌。 但初始化恰發(fā)生在你給變量賦值的地方为黎。 另外，var聲明的變量是函數(shù)作用域的行您，而let和const是塊作用域的铭乾。 所以，這就是這個(gè)過(guò)程的樣子：
var a = 10; // 全局使用域
function foo() {
// var a 的聲明將被提升到到函數(shù)的頂部娃循。
// 比如:var a
console.log(a); // 打印 undefined
// 實(shí)際初始化值20只發(fā)生在這里
var a = 20; // local scope
}
問(wèn)題 2：ReferenceError：a undefined
let和const聲明可以讓變量在其作用域上受限于它所使用的塊炕檩、語(yǔ)句或表達(dá)式。與var不同的是捌斧，這些變量沒(méi)有被提升笛质，并且有一個(gè)所謂的暫時(shí)死區(qū)(TDZ)。試圖訪(fǎng)問(wèn)TDZ中的這些變量將引發(fā)ReferenceError捞蚂，因?yàn)橹挥性趫?zhí)行到達(dá)聲明時(shí)才能訪(fǎng)問(wèn)它們妇押。
var a = 10; // 全局使用域
function foo() {
// TDZ 開(kāi)始
// 創(chuàng)建了未初始化的'a'
console.log(a); // ReferenceError
// TDZ結(jié)束，'a'僅在此處初始化姓迅，值為20
let a = 20;
}
下表概述了與JavaScript中使用的不同關(guān)鍵字聲明的變量對(duì)應(yīng)的提升行為和使用域：
問(wèn)題 3: [3, 3, 3]
在for循環(huán)的頭部聲明帶有var關(guān)鍵字的變量會(huì)為該變量創(chuàng)建單個(gè)綁定（存儲(chǔ)空間）敲霍。 閱讀更多關(guān)于閉包的信息。 讓我們?cè)倏匆淮蝔or循環(huán)丁存。
// 誤解作用域:認(rèn)為存在塊級(jí)作用域
var array = [];
for (var i = 0; i < 3; i++) {
// 三個(gè)箭頭函數(shù)體中的每個(gè)`'i'`都指向相同的綁定肩杈，
// 這就是為什么它們?cè)谘h(huán)結(jié)束時(shí)返回相同的值'3'。
array.push(() => i);
}
var newArray = array.map(el => el());
console.log(newArray); // [3, 3, 3]
如果使用 let 聲明一個(gè)具有塊級(jí)作用域的變量解寝，則為每個(gè)循環(huán)迭代創(chuàng)建一個(gè)新的綁定扩然。
// 使用ES6塊級(jí)作用域
var array = [];
for (let i = 0; i < 3; i++) {
// 這一次，每個(gè)'i'指的是一個(gè)新的的綁定聋伦，并保留當(dāng)前的值夫偶。
// 因此，每個(gè)箭頭函數(shù)返回一個(gè)不同的值嘉抓。
array.push(() => i);
}
var newArray = array.map(el => el());
console.log(newArray); // [0, 1, 2]
解決這個(gè)問(wèn)題的另一種方法是使用閉包索守。
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]
問(wèn)題4 : 不會(huì)溢出
JavaScript并發(fā)模型基于“事件循環(huán)”晕窑。 當(dāng)我們說(shuō)“瀏覽器是 JS 的家”時(shí)我真正的意思是瀏覽器提供運(yùn)行時(shí)環(huán)境來(lái)執(zhí)行我們的JS代碼抑片。
瀏覽器的主要組件包括調(diào)用堆棧，事件循環(huán)****杨赤，任務(wù)隊(duì)列和Web API敞斋。 像setTimeout截汪，setInterval和Promise這樣的全局函數(shù)不是JavaScript的一部分，而是 Web API 的一部分植捎。 JavaScript 環(huán)境的可視化形式如下所示：
JS調(diào)用棧是后進(jìn)先出(LIFO)的衙解。引擎每次從堆棧中取出一個(gè)函數(shù)，然后從上到下依次運(yùn)行代碼焰枢。每當(dāng)它遇到一些異步代碼蚓峦，如setTimeout，它就把它交給Web API(箭頭1)济锄。因此暑椰，每當(dāng)事件被觸發(fā)時(shí)，callback 都會(huì)被發(fā)送到任務(wù)隊(duì)列（箭頭2）荐绝。
事件循環(huán)(Event loop)不斷地監(jiān)視任務(wù)隊(duì)列(Task Queue)一汽，并按它們排隊(duì)的順序一次處理一個(gè)回調(diào)。每當(dāng)調(diào)用堆棧(call stack)為空時(shí)低滩，Event loop獲取回調(diào)并將其放入堆棧(stack )(箭頭3)中進(jìn)行處理召夹。請(qǐng)記住，如果調(diào)用堆棧不是空的恕沫，則事件循環(huán)不會(huì)將任何回調(diào)推入堆棧监憎。
現(xiàn)在，有了這些知識(shí)婶溯，讓我們來(lái)回答前面提到的問(wèn)題：
步驟
- 調(diào)用
foo()會(huì)將foo函數(shù)放入調(diào)用堆棧(call stack)枫虏。 - 在處理內(nèi)部代碼時(shí)，JS引擎遇到
setTimeout爬虱。 - 然后將
foo回調(diào)函數(shù)傳遞給WebAPIs(箭頭1)并從函數(shù)返回隶债，調(diào)用堆棧再次為空 - 計(jì)時(shí)器被設(shè)置為0，因此
foo將被發(fā)送到任務(wù)隊(duì)列<Task Queue>(箭頭2)跑筝。 - 由于調(diào)用堆棧是空的死讹，事件循環(huán)將選擇
foo回調(diào)并將其推入調(diào)用堆棧進(jìn)行處理。 - 進(jìn)程再次重復(fù)曲梗，堆棧不會(huì)溢出赞警。
運(yùn)行示意圖如下所示：
代碼部署后可能存在的BUG沒(méi)法實(shí)時(shí)知道，事后為了解決這些BUG虏两，花了大量的時(shí)間進(jìn)行l(wèi)og 調(diào)試愧旦，這邊順便給大家推薦一個(gè)好用的BUG監(jiān)控工具 Fundebug。
問(wèn)題5 : 不會(huì)響應(yīng)
大多數(shù)時(shí)候定罢，開(kāi)發(fā)人員假設(shè)在事件循環(huán)<event loop>圖中只有一個(gè)任務(wù)隊(duì)列笤虫。但事實(shí)并非如此，我們可以有多個(gè)任務(wù)隊(duì)列。由瀏覽器選擇其中的一個(gè)隊(duì)列并在該隊(duì)列中處理回調(diào)<callbacks>琼蚯。
在底層來(lái)看酬凳，JavaScript中有宏任務(wù)和微任務(wù)。setTimeout回調(diào)是宏任務(wù)遭庶，而Promise回調(diào)是微任務(wù)宁仔。
主要的區(qū)別在于他們的執(zhí)行方式。宏任務(wù)在單個(gè)循環(huán)周期中一次一個(gè)地推入堆棧峦睡，但是微任務(wù)隊(duì)列總是在執(zhí)行后返回到事件循環(huán)之前清空翎苫。因此，如果你以處理?xiàng)l目的速度向這個(gè)隊(duì)列添加條目榨了，那么你就永遠(yuǎn)在處理微任務(wù)拉队。只有當(dāng)微任務(wù)隊(duì)列為空時(shí)，事件循環(huán)才會(huì)重新渲染頁(yè)面阻逮、
現(xiàn)在粱快，當(dāng)你在控制臺(tái)中運(yùn)行以下代碼段
function foo() {
return Promise.resolve().then(foo);
}
每次調(diào)用'foo'都會(huì)繼續(xù)在微任務(wù)隊(duì)列上添加另一個(gè)'foo'回調(diào)，因此事件循環(huán)無(wú)法繼續(xù)處理其他事件（滾動(dòng)叔扼，單擊等）事哭，直到該隊(duì)列完全清空為止。 因此瓜富，它會(huì)阻止渲染鳍咱。
問(wèn)題6 : 會(huì)導(dǎo)致TypeError錯(cuò)誤
展開(kāi)語(yǔ)法 和 for-of 語(yǔ)句遍歷iterable對(duì)象定義要遍歷的數(shù)據(jù)。Array 或Map 是具有默認(rèn)迭代行為的內(nèi)置迭代器与柑。對(duì)象不是可迭代的谤辜，但是可以通過(guò)使用iterable和iterator協(xié)議使它們可迭代。
在Mozilla文檔中价捧，如果一個(gè)對(duì)象實(shí)現(xiàn)了@@iterator方法丑念，那么它就是可迭代的，這意味著這個(gè)對(duì)象(或者它原型鏈上的一個(gè)對(duì)象)必須有一個(gè)帶有@@iterator鍵的屬性结蟋，這個(gè)鍵可以通過(guò)常量Symbol.iterator獲得脯倚。
上述語(yǔ)句可能看起來(lái)有點(diǎn)冗長(zhǎng)，但是下面的示例將更有意義：
var obj = { x: 1, y: 2, z: 3 };
obj[Symbol.iterator] = function() {
// iterator 是一個(gè)具有 next 方法的對(duì)象嵌屎，
// 它的返回至少有一個(gè)對(duì)象
// 兩個(gè)屬性：value＆done推正。
// 返回一個(gè) iterator 對(duì)象
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 函數(shù)來(lái)定制對(duì)象的迭代行為：
var obj = { x: 1, y: 2, z: 3 };
obj[Symbol.iterator] = function*() {
yield 1;
yield 2;
yield 3;
};
[...obj]; // 打印 [1, 2, 3]
問(wèn)題7 : a, b, c
for-in循環(huán)遍歷對(duì)象本身的可枚舉屬性以及對(duì)象從其原型繼承的屬性。 可枚舉屬性是可以在for-in循環(huán)期間包含和訪(fǎng)問(wèn)的屬性宝惰。
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 }
現(xiàn)在你已經(jīng)掌握了這些知識(shí)植榕，應(yīng)該很容易理解為什么我們的代碼要打印這些特定的屬性
var obj = { a: 1, b: 2 }; //a，b 都是 enumerables 屬性
// 將{c：3}設(shè)置為'obj'的原型尼夺，并且我們知道
// for-in 循環(huán)也迭代 obj 繼承的屬性
// 從它的原型尊残，'c'也可以被訪(fǎng)問(wèn)炒瘸。
Object.setPrototypeOf(obj, { c: 3 });
// 我們?cè)?obj'中定義了另外一個(gè)屬性'd'，但是
// 將'enumerable'設(shè)置為false夜郁。 這意味著'd'將被忽略什燕。
Object.defineProperty(obj, "d", { value: 4, enumerable: false });
for (let prop in obj) {
console.log(prop);
}
// 打印
// a
// b
問(wèn)題8 : 10
在全局范圍內(nèi)初始化x時(shí)粘勒，它成為window對(duì)象的屬性(不是嚴(yán)格的模式)竞端。看看下面的代碼:
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 始終指向調(diào)用方法的對(duì)象庙睡。因此事富，在foo.getx()的例子中，它指向foo對(duì)象乘陪，返回90的值统台。而在xGetter()的情況下，this指向 window對(duì)象, 返回 window 中的x的值啡邑，即10贱勃。
要獲取 foo.x的值，可以通過(guò)使用Function.prototype.bind將this的值綁定到foo對(duì)象來(lái)創(chuàng)建新函數(shù)谤逼。
let getFooX = foo.getX.bind(foo);
getFooX(); // 90
就這樣贵扰！ 如果你的所有答案都正確，那么干漂亮流部。 咱們都是通過(guò)犯錯(cuò)來(lái)學(xué)習(xí)的戚绕。 這一切都是為了了解背后的“原因”。
代碼部署后可能存在的BUG沒(méi)法實(shí)時(shí)知道枝冀，事后為了解決這些BUG舞丛，花了大量的時(shí)間進(jìn)行l(wèi)og 調(diào)試，這邊順便給大家推薦一個(gè)好用的BUG監(jiān)控工具 Fundebug果漾。
關(guān)于Fundebug
Fundebug專(zhuān)注于JavaScript球切、微信小程序、微信小游戲绒障、支付寶小程序欧聘、React Native、Node.js和Java線(xiàn)上應(yīng)用實(shí)時(shí)BUG監(jiān)控端盆。 自從2016年雙十一正式上線(xiàn)怀骤，F(xiàn)undebug累計(jì)處理了10億+錯(cuò)誤事件，付費(fèi)客戶(hù)有陽(yáng)光保險(xiǎn)焕妙、核桃編程蒋伦、荔枝FM、掌門(mén)1對(duì)1焚鹊、微脈痕届、青團(tuán)社等眾多品牌企業(yè)韧献。歡迎大家免費(fèi)試用！
