這篇文章給大家分享的是有關(guān)JavaScript中8道有趣的面試題的內(nèi)容。小編覺得挺實用的，因此分享給大家做個參考，一起跟隨小編過來看看吧。

創(chuàng)新互聯(lián)建站-專業(yè)網(wǎng)站定制、快速模板網(wǎng)站建設(shè)、高性價比榆社網(wǎng)站開發(fā)、企業(yè)建站全套包干低至880元,成熟完善的模板庫,直接使用。一站式榆社網(wǎng)站制作公司更省心,省錢,快速模板網(wǎng)站建設(shè)找我們，業(yè)務(wù)覆蓋榆社地區(qū)。費用合理售后完善，十載實體公司更值得信賴。

JavaScript 是一種有趣的語言，我們都喜歡它，因為它的性質(zhì)。瀏覽器是JavaScript的主要運行的地方，兩者在我們的服務(wù)中協(xié)同工作。JS有一些概念，人們往往會對它掉以輕心，有時可能會忽略不計。原型、閉包和事件循環(huán)等概念仍然是大多數(shù)JS開發(fā)人員繞道而行的晦澀領(lǐng)域之一。正如我們所知，無知是一件危險的事情，它可能會導(dǎo)致錯誤。

問題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'函數(shù)，是否會導(dǎo)致堆棧溢出錯誤？

function foo() {
 setTimeout(foo, 0); // 是否存在堆棧溢出錯誤?
}

問題5: 如果在控制臺中運行以下函數(shù)，頁面(選項卡)的 UI 是否仍然響應(yīng)

function foo() {
 return Promise.resolve().then(foo);
}

問題6: 我們能否以某種方式為下面的語句使用展開運算而不導(dǎo)致類型錯誤

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 ??

答案

現(xiàn)在，讓我們從頭到尾回答每個問題。我將給您一個簡短的解釋，同時試圖揭開這些行為的神秘面紗，并提供一些參考資料。

問題1： undefined

使用var關(guān)鍵字聲明的變量在JavaScript中會被提升，并在內(nèi)存中分配值undefined。 但初始化恰發(fā)生在你給變量賦值的地方。 另外，var聲明的變量是函數(shù)作用域的，而let和const是塊作用域的。 所以，這就是這個過程的樣子：

var a = 10; // 全局使用域
function foo() {
 // var a 的聲明將被提升到到函數(shù)的頂部。
 // 比如:var a

 console.log(a); // 打印 undefined

 // 實際初始化值20只發(fā)生在這里
 var a = 20; // local scope
}

問題 2：ReferenceError：a undefined

let和const聲明可以讓變量在其作用域上受限于它所使用的塊、語句或表達(dá)式。與var不同的是，這些變量沒有被提升，并且有一個所謂的暫時死區(qū)(TDZ)。試圖訪問TDZ中的這些變量將引發(fā)ReferenceError，因為只有在執(zhí)行到達(dá)聲明時才能訪問它們。

var a = 10; // 全局使用域
function foo() {
 // TDZ 開始

 // 創(chuàng)建了未初始化的'a'
 console.log(a); // ReferenceError

 // TDZ結(jié)束，'a'僅在此處初始化，值為20
 let a = 20;
}

下表概述了與JavaScript中使用的不同關(guān)鍵字聲明的變量對應(yīng)的提升行為和使用域：

問題 3: [3, 3, 3]

在for循環(huán)的頭部聲明帶有var關(guān)鍵字的變量會為該變量創(chuàng)建單個綁定（存儲空間）。 閱讀更多關(guān)于閉包的信息。 讓我們再看一次for循環(huán)。

// 誤解作用域:認(rèn)為存在塊級作用域
var array = [];
for (var i = 0; i < 3; i++) {
 // 三個箭頭函數(shù)體中的每個`'i'`都指向相同的綁定，
 // 這就是為什么它們在循環(huán)結(jié)束時返回相同的值'3'。
 array.push(() => i);
}
var newArray = array.map(el => el());
console.log(newArray); // [3, 3, 3]

如果使用 let 聲明一個具有塊級作用域的變量，則為每個循環(huán)迭代創(chuàng)建一個新的綁定。

// 使用ES6塊級作用域
var array = [];
for (let i = 0; i < 3; i++) {
 // 這一次，每個'i'指的是一個新的的綁定，并保留當(dāng)前的值。
 // 因此，每個箭頭函數(shù)返回一個不同的值。
 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并發(fā)模型基于“事件循環(huán)”。 當(dāng)我們說“瀏覽器是 JS 的家”時我真正的意思是瀏覽器提供運行時環(huán)境來執(zhí)行我們的JS代碼。

瀏覽器的主要組件包括調(diào)用堆棧，事件循環(huán)，任務(wù)隊列和Web API。 像setTimeout，setInterval和Promise這樣的全局函數(shù)不是JavaScript的一部分，而是 Web API 的一部分。 JavaScript 環(huán)境的可視化形式如下所示：

JS調(diào)用棧是后進(jìn)先出(LIFO)的。引擎每次從堆棧中取出一個函數(shù)，然后從上到下依次運行代碼。每當(dāng)它遇到一些異步代碼，如setTimeout，它就把它交給Web API(箭頭1)。因此，每當(dāng)事件被觸發(fā)時，callback 都會被發(fā)送到任務(wù)隊列（箭頭2）。

事件循環(huán)(Event loop)不斷地監(jiān)視任務(wù)隊列(Task Queue)，并按它們排隊的順序一次處理一個回調(diào)。每當(dāng)調(diào)用堆棧(call stack)為空時，Event loop獲取回調(diào)并將其放入堆棧(stack )(箭頭3)中進(jìn)行處理。請記住，如果調(diào)用堆棧不是空的，則事件循環(huán)不會將任何回調(diào)推入堆棧。

現(xiàn)在，有了這些知識，讓我們來回答前面提到的問題：

步驟調(diào)用 foo()會將foo函數(shù)放入調(diào)用堆棧(call stack)。在處理內(nèi)部代碼時，JS引擎遇到setTimeout。然后將foo回調(diào)函數(shù)傳遞給WebAPIs(箭頭1)并從函數(shù)返回，調(diào)用堆棧再次為空計時器被設(shè)置為0，因此foo將被發(fā)送到任務(wù)隊列(箭頭2)。由于調(diào)用堆棧是空的，事件循環(huán)將選擇foo回調(diào)并將其推入調(diào)用堆棧進(jìn)行處理。進(jìn)程再次重復(fù)，堆棧不會溢出。

運行示意圖如下所示：

代碼部署后可能存在的BUG沒法實時知道，事后為了解決這些BUG，花了大量的時間進(jìn)行l(wèi)og 調(diào)試，這邊順便給大家推薦一個好用的BUG監(jiān)控工具 Fundebug。

問題5 : 不會響應(yīng)

大多數(shù)時候，開發(fā)人員假設(shè)在事件循環(huán)圖中只有一個任務(wù)隊列。但事實并非如此，我們可以有多個任務(wù)隊列。由瀏覽器選擇其中的一個隊列并在該隊列中處理回調(diào)。

在底層來看，JavaScript中有宏任務(wù)和微任務(wù)。setTimeout回調(diào)是宏任務(wù)，而Promise回調(diào)是微任務(wù)。

主要的區(qū)別在于他們的執(zhí)行方式。宏任務(wù)在單個循環(huán)周期中一次一個地推入堆棧，但是微任務(wù)隊列總是在執(zhí)行后返回到事件循環(huán)之前清空。因此，如果你以處理條目的速度向這個隊列添加條目，那么你就永遠(yuǎn)在處理微任務(wù)。只有當(dāng)微任務(wù)隊列為空時，事件循環(huán)才會重新渲染頁面、

現(xiàn)在，當(dāng)你在控制臺中運行以下代碼段

function foo() {
 return Promise.resolve().then(foo);
}

每次調(diào)用'foo'都會繼續(xù)在微任務(wù)隊列上添加另一個'foo'回調(diào)，因此事件循環(huán)無法繼續(xù)處理其他事件（滾動，單擊等），直到該隊列完全清空為止。 因此，它會阻止渲染。

問題6 : 會導(dǎo)致TypeError錯誤

展開語法 和 for-of 語句遍歷iterable對象定義要遍歷的數(shù)據(jù)。Array 或Map 是具有默認(rèn)迭代行為的內(nèi)置迭代器。對象不是可迭代的，但是可以通過使用iterable和iterator協(xié)議使它們可迭代。

在Mozilla文檔中，如果一個對象實現(xiàn)了@@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 函數(shù)來定制對象的迭代行為：

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循環(huán)遍歷對象本身的可枚舉屬性以及對象從其原型繼承的屬性。 可枚舉屬性是可以在for-in循環(huá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)掌握了這些知識，應(yīng)該很容易理解為什么我們的代碼要打印這些特定的屬性

var obj = { a: 1, b: 2 }; //a，b 都是 enumerables 屬性

// 將{c：3}設(shè)置為'obj'的原型，并且我們知道
// for-in 循環(huán)也迭代 obj 繼承的屬性
// 從它的原型，'c'也可以被訪問。
Object.setPrototypeOf(obj, { c: 3 });

// 我們在'obj'中定義了另外一個屬性'd'，但是
// 將'enumerable'設(shè)置為false。 這意味著'd'將被忽略。
Object.defineProperty(obj, "d", { value: 4, enumerable: false });

for (let prop in obj) {
 console.log(prop);
}
// 打印
// a
// b

問題8 : 10

在全局范圍內(nèi)初始化x時，它成為window對象的屬性(不是嚴(yán)格的模式)?？纯聪旅娴拇a:

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)用方法的對象。因此，在foo.getx()的例子中，它指向foo對象，返回90的值。而在xGetter()的情況下，this指向 window對象, 返回 window 中的x的值，即10。

要獲取 foo.x的值，可以通過使用Function.prototype.bind將this的值綁定到foo對象來創(chuàng)建新函數(shù)。

let getFooX = foo.getX.bind(foo);
getFooX(); // 90

就這樣！ 如果你的所有答案都正確，那么干漂亮。 咱們都是通過犯錯來學(xué)習(xí)的。 這一切都是為了了解背后的“原因”。

代碼部署后可能存在的BUG沒法實時知道，事后為了解決這些BUG，花了大量的時間進(jìn)行l(wèi)og 調(diào)試，這邊順便給大家推薦一個好用的BUG監(jiān)控工具 Fundebug。

感謝各位的閱讀！關(guān)于“JavaScript中8道有趣的面試題”這篇文章就分享到這里了，希望以上內(nèi)容可以對大家有一定的幫助，讓大家可以學(xué)到更多知識，如果覺得文章不錯，可以把它分享出去讓更多的人看到吧！

另外有需要云服務(wù)器可以了解下創(chuàng)新互聯(lián)scvps.cn，海內(nèi)外云服務(wù)器15元起步，三天無理由+7*72小時售后在線，公司持有idc許可證，提供“云服務(wù)器、裸金屬服務(wù)器、高防服務(wù)器、香港服務(wù)器、美國服務(wù)器、虛擬主機、免備案服務(wù)器”等云主機租用服務(wù)以及企業(yè)上云的綜合解決方案，具有“安全穩(wěn)定、簡單易用、服務(wù)可用性高、性價比高”等特點與優(yōu)勢，專為企業(yè)上云打造定制，能夠滿足用戶豐富、多元化的應(yīng)用場景需求。

分享文章：JavaScript中8道有趣的面試題-創(chuàng)新互聯(lián)
轉(zhuǎn)載來源：http://jinyejixie.com/article16/coejdg.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供域名注冊、網(wǎng)站內(nèi)鏈、虛擬主機、網(wǎng)頁設(shè)計公司、定制開發(fā)、用戶體驗

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請盡快告知，我們將會在第一時間刪除。文章觀點不代表本網(wǎng)站立場，如需處理請聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時需注明來源： 創(chuàng)新互聯(lián)