8個有意思的JavaScript面試題

摘要：神奇的JS系列。

作者：前端小智
原文： 8個問題看你是否真的懂 JS

經授權轉載，版權歸原作者所有。

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

接下來，來看看幾個問題，你也可以試試想想，然後作答。

問題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 回調并将其推入調用堆棧進行處理。
程序再次重複，堆棧不會溢出。

運作示意圖如下所示：

代碼部署後可能存在的BUG沒法實時知道，事後為了解決這些BUG，花了大量的時間進行log 調試，這邊順便給大家推薦一個好用的BUG監控工具

問題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

問題8 : 10

在全局範圍内初始化

時，它成為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

對象，傳回

的值。而在

xGetter()

的情況下，

this

指向 window對象, 傳回 window 中的

的值，即

要擷取

foo.x

的值，可以通過使用

Function.prototype.bind

将

this

的值綁定到

foo

對象來建立新函數。

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

就這樣！如果你的所有答案都正确，那麼幹漂亮。咱們都是通過犯錯來學習的。這一切都是為了了解背後的“原因”。

關于Fundebug

專注于JavaScript、微信小程式、微信小遊戲、支付寶小程式、React Native、Node.js和Java線上應用實時BUG監控。自從2016年雙十一正式上線，Fundebug累計處理了10億+錯誤事件，付費客戶有陽光保險、核桃程式設計、荔枝FM、掌門1對1、微脈、青團社等衆多品牌企業。歡迎大家免費試用！

8個有意思的JavaScript面試題

問題1：浏覽器控制台上會列印什麼？

問題2：如果我們使用 let 或 const 代替 var，輸出是否相同？

問題3：“newArray”中有哪些元素？

問題4：如果我們在浏覽器控制台中運作'foo'函數，是否會導緻堆棧溢出錯誤？

問題5: 如果在控制台中運作以下函數，頁面(頁籤)的 UI 是否仍然響應

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

問題7：運作以下代碼片段時，控制台上會列印什麼？

問題8：xGetter() 會列印什麼值？

答案

問題1： `undefined`

問題 2： `ReferenceError：a undefined`

問題 3: `[3, 3, 3]`

問題4 : 不會溢出

步驟

問題5 : 不會響應

問題6 : 會導緻TypeError錯誤

問題7 : a, b, c

問題8 : 10

關于Fundebug

繼續閱讀

主流浏覽器四大綜合性能測試

JavaScript自學筆記【4】函數的聲明與調用目錄二、函數的聲明三、函數的調用

請求逾時VUE axios重新再次請求

nodejs微信開發---授權登入+擷取使用者資訊微信網頁授權

debian9更新4.9.0核心到4.19.2核心過程

Javascript建構Bingo卡片遊戲

JavaScript的那些坑之事件代理事件代理事件階段

javascript的for (var i in data)慎用javascript中的for (var i in data)謹慎用

tab滑鼠經過菜單切換

vue （vue2.0）使用總結(從大體結構總結)

vue搭建過程及出現問題

/\B(?=(?:\d{3})+$)/g 一條令人費解的正規表達式

适用于JavaScript的ECMAScript 2020規範向前發展

JS生成uuid的四種方法

layui多任務上傳添加進度條

8個有意思的JavaScript面試題

問題1：浏覽器控制台上會列印什麼？

問題2：如果我們使用 let 或 const 代替 var，輸出是否相同？

問題3：“newArray”中有哪些元素？

問題4：如果我們在浏覽器控制台中運作'foo'函數，是否會導緻堆棧溢出錯誤？

問題5: 如果在控制台中運作以下函數，頁面(頁籤)的 UI 是否仍然響應

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

問題7：運作以下代碼片段時，控制台上會列印什麼？

問題8：xGetter() 會列印什麼值？

答案

問題1： undefined

問題 2： ReferenceError：a undefined

問題 3: [3, 3, 3]

問題4 : 不會溢出

步驟

問題5 : 不會響應

問題6 : 會導緻TypeError錯誤

問題7 : a, b, c

問題8 : 10

關于Fundebug

繼續閱讀

問題1： `undefined`

問題 2： `ReferenceError：a undefined`

問題 3: `[3, 3, 3]`