用9種辦法解決 JS 閉包經典面試題之 for 循環取 i

Betta 發布于2019-08-21 10:41 / 1826人閱讀

摘要：閉包正確的說應該是指一個閉包域每當聲明了一個函數它就產生了一個閉包域可以解釋為每個函數都有自己的函數棧每個閉包域對象都有一個不是屬性內默認有個名為的全局引用有了這個引用就可以直接調用的屬性或方法凡是在閉包域內聲明的變量或方法外部無法直接訪問

閉包

正確的說,應該是指一個閉包域,每當聲明了一個函數,它就產生了一個閉包域(可以解釋為每個函數都有自己的函數棧),每個閉包域(Function 對象)都有一個 function scope(不是屬性),function scope內默認有個名為 Globe 的全局引用(有了這個引用,就可以直接調用 Globe 的屬性或方法)

凡是在閉包域內聲明的變量或方法,外部無法直接訪問

閉包域可以訪問外部的變量或方法

(上圖為 chrome 下 debug 環境)

當在一個閉包域內包含另一個閉包域時(簡單的說就是在一個函數內有另一個函數,當然這個內部函數的生命周期是依附于外部函數的), 此時,若子閉包域(內部的閉包域,內部函數)使用了父閉包域(外部閉包域,外部函數)的私有變量(在父閉包域中聲明的變量,父閉包域的外部空間無法直接訪問,但子閉包域可以訪問),子閉包域即當前的子函數的 function scope 會產生一個 closure 對象屬性,這個對象屬性內包含的是子閉包域對父閉包域的所有引用(只要子閉包域(內部函數)還存活,其父閉包域(外部函數)就依舊存活),倘若在父閉包域存活期間對其私有變量內容進行修改,則對這些父閉包域的私有變量進行引用的子閉包域中 function scope 的 closure 對象屬性的內容也會發生變化,因為這只是引用.

舉例:

結果如下:

第一次調用innerA

第二次調用 innerA

控制臺輸出

回到主題面試經典問題

產品一

產品二

產品三

產品四

產品五

解決辦法:

解決辦法一

/*
解決思路:
    增加若干個對應的閉包域空間(這里采用的是匿名函數),專門用來存儲原先需要引用的內容(下標),不過只限于基本類型(基本類型值傳遞,對象類型引用傳遞)
 */
for(var i = 0;i
解決辦法二
/*
解決思路:
    將下標作為對象屬性(name:"i",value:i的值)添加到每個數組項(p對象)中
*/
for(var i = 0;i
解決辦法三
/*
解決思路:
    與解決辦法一有點相似但卻有點不太相似.
    相似點:同樣是增加若干個對應的閉包域空間用來存儲下標
    不同點:解決辦法一是在新增的匿名閉包空間內完成事件的綁定,而此例是將事件綁定在新增的匿名函數返回的函數上

    此時綁定的函數中的 function scope 中的 closure 對象的 引用 arg 是指向將其返回的匿名函數的私有變量 arg
 */
for(var i = 0; i
解決辦法四
/*
解決思路與解決辦法一相同
 */
for(var i = 0; i
解決辦法五
/*
解決思路與解決辦法三及四相同
 */
for(var i = 0;i
解決辦法六
/*
解決思路:
    將下標添加為綁定函數的屬性
 */
for(var i = 0;i
解決辦法七
/*
解決思路:
    通過 new 使用 Function 的構造函數 創建 Function 實例實現,由于傳入的函數體的內容是字符串,故 Function 得到的是一個字符串拷貝,而沒有得到 i 的引用(這里是先獲取 i.toString()然后與前后字符串拼接成一個新的字符串,Function 對其進行反向解析成 JS 代碼)
 */
for(var i = 0;i
解決辦法八
/*
解決思路:
    直接通過 Function 返回一個函數
    與解決辦法七的不同之處在于:
        解決辦法七使用 new,使用了 new,此時 Function 函數就被當成構造器可以用來構造一個 Function 實例返回
        當前解決辦法沒有使用 new ,即將 Function 函數當成一個函數,傳入參數返回一個新函數;
        其實此處 new 與不 new 只是的區別在于:
            使用了 new 即 Function 函數充當構造器,由 JS 解析器生產一個新的對象,構造器內的 this 指向該新對象;
            不實用 new 即 Function 函數依舊是函數,由函數內部自己生產一個實例返回.
 */
for(var i = 0;i
解決辦法九
使用ES6新語法 let 關鍵字 由于幾新東西 各瀏覽器支持不同
chrome 及 opera支持以下語法

在 chrome 查看

可以在控制臺看到 j 變量是一個 block 級的變量
待函數綁定完成后看數組項:

此時的該數組項的的 Block 域有個 j 存儲的就是對應的數組下標
firefox支持一下語法

由于新語法各大廠商的支持尚未規范故暫不不推薦使用
解決辦法大同小異,只要理解其中的實質,可以寫出多多的解決辦法

云服務器 GPU云服務器 js面試閉包如何回答 js for循環回調 js for循環可以 js for循環語法

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/86017.html

python面試題之“該死的for循環系列”（二）

摘要：到這里，如果你明白了，我們就可以繼續進行下一步了理解匿名函數。似乎只要一沾上for循環，難度立刻加倍，下面我們來看一道python的面試題：要求寫出下面代碼的輸出結果并且解釋原因。 def multipliers(): return [lambda x:i*x for i in range(4)] print([m(2) for m in multipliers()]) 這...

shiweifu 2019-07-30 18:00 評論0 收藏0
56 道高頻 JavaScript 與 ES6+ 的面試題及答案

摘要：線程的劃分尺度小于進程，使得多線程程序的并發性高。線程在執行過程中與進程還是有區別的。每個獨立的線程有一個程序運行的入口順序執行序列和程序的出口。從邏輯角度來看，多線程的意義在于一個應用程序中，有多個執行部分可以同時執行。 showImg(https://segmentfault.com/img/bVbv2GE?w=900&h=400); 前言本文講解 56 道 JavaScript...

zengdongbao 2019-08-26 10:48 評論0 收藏0
數據分析面試題之Pandas中的groupby

摘要：昨天晚上，筆者有幸參加了一場面試，有一個環節就是現場編程題目如下示例數據如下，求每名學生對應的成績最高的那門科目與，用實現這個題目看上去很簡單，其實，并不簡單。 ??昨天晚上，筆者有幸參加了一場面試，有一個環節就是現場編程！題目如下：??示例數據如下，求每名學生（ID）對應的成績（score）最高的那門科目（class）與ID，用Python實現： showImg(https://se...

ThinkSNS 2019-07-30 18:32 評論0 收藏0
【進階4-3期】面試題之如何實現一個深拷貝

摘要：今天這篇文章我們來看看一道必會面試題，即如何實現一個深拷貝。木易楊注意這里使用上面測試用例測試一下一個簡單的深拷貝就完成了，但是這個實現還存在很多問題。引言上篇文章詳細介紹了淺拷貝 Object.assign，并對其進行了模擬實現，在實現的過程中，介紹了很多基礎知識。今天這篇文章我們來看看一道必會面試題，即如何實現一個深拷貝。本文會詳細介紹對象、數組、循環引用、引用丟失、Symbo...

longmon 2019-08-23 18:05 評論0 收藏0
JavaScript系列——JavaScript同步、異步、回調執行順序之經典閉包setTimeou

摘要：同步異步回調傻傻分不清楚。分割線上面主要講了同步和回調執行順序的問題，接著我就舉一個包含同步異步回調的例子。同步優先回調內部有個，第二個是一個回調回調墊底。異步也，輪到回調的孩子們回調，出來執行了。同步、異步、回調？傻傻分不清楚。大家注意了，教大家一道口訣：同步優先、異步靠邊、回調墊底（讀起來不順）用公式表達就是：同步 => 異步 => 回調這口訣有什么用呢？用來對付面試的...

lewif 2019-08-29 12:21 評論0 收藏0