摘要：關(guān)于點(diǎn)擊進(jìn)入項(xiàng)目是我于開始的一個項(xiàng)目，每個工作日發(fā)布一道面試題。即使這個時間周期內(nèi)，小明取得多次滿分。創(chuàng)建作用域鏈在執(zhí)行期上下文的創(chuàng)建階段，作用域鏈?zhǔn)窃谧兞繉ο笾髣?chuàng)建的。這種一層一層的關(guān)系，就是作用域鏈。

Step-By-Step (點(diǎn)擊進(jìn)入項(xiàng)目) 是我于 2019-05-20 開始的一個項(xiàng)目，每個工作日發(fā)布一道面試題。
每個周末我會仔細(xì)閱讀大家的答案，整理最一份較優(yōu)答案出來，因本人水平有限，有誤的地方，大家及時指正。
如果想 加群 學(xué)習(xí)，掃碼 二維碼 (點(diǎn)擊查看)，添加我為好友，驗(yàn)證信息為加入組織，我拉你進(jìn)群。

更多優(yōu)質(zhì)文章可戳: https://github.com/YvetteLau/...

__

本周面試題一覽:

節(jié)流(throttle)函數(shù)的作用是什么？有哪些應(yīng)用場景，請實(shí)現(xiàn)一個節(jié)流函數(shù)

說一說你對JS執(zhí)行上下文棧和作用域鏈的理解？

什么是BFC？BFC的布局規(guī)則是什么？如何創(chuàng)建BFC？

let、const、var 的區(qū)別有哪些？

深拷貝和淺拷貝的區(qū)別是什么？如何實(shí)現(xiàn)一個深拷貝？

節(jié)流函數(shù)的作用是規(guī)定一個單位時間，在這個單位時間內(nèi)最多只能觸發(fā)一次函數(shù)執(zhí)行，如果這個單位時間內(nèi)多次觸發(fā)函數(shù)，只能有一次生效。

舉例說明：小明的媽媽和小明約定好，如果小明在周考中取得滿分，那么當(dāng)月可以帶他去游樂場玩，但是一個月最多只能去一次。

這其實(shí)就是一個節(jié)流的例子，在一個月的時間內(nèi)，去游樂場最多只能觸發(fā)一次。即使這個時間周期內(nèi)，小明取得多次滿分。

1.按鈕點(diǎn)擊事件

2.拖拽事件

3.onScoll

4.計算鼠標(biāo)移動的距離(mousemove)

利用時間戳實(shí)現(xiàn)

function throttle (func, delay) {
    var lastTime = 0;
    function throttled() {
        var context = this;
        var args = arguments;
        var nowTime = Date.now();
        if(nowTime > lastTime + delay) {
            func.apply(context, args);
            lastTime = nowTime;
        }
    }
    //節(jié)流函數(shù)最終返回的是一個函數(shù)
    return throttled; 
}

利用定時器實(shí)現(xiàn)

function throttle(func, delay) {
    var timeout = null;
    function throttled() {
        var context = this;
        var args = arguments;
        if(!timeout) {
            timeout = setTimeout(()=>{
                func.apply(context, args);
                clearTimeout(timeout);
                timeout=null
            }, delay);
        }
    }
    return throttled;
}

時間戳和定時器的方式都沒有考慮最后一次執(zhí)行的問題，比如有個按鈕點(diǎn)擊事件，設(shè)置的間隔時間是1S，在第0.5S，1.8S，2.2S點(diǎn)擊，那么只有0.5S和1.8S的兩次點(diǎn)擊能夠觸發(fā)函數(shù)執(zhí)行，而最后一次的2.2S會被忽略。

組合實(shí)現(xiàn)，允許設(shè)置第一次或者最后一次是否觸發(fā)函數(shù)執(zhí)行

function throttle (func, wait, options) {
    var timeout, context, args, result;
    var previous = 0;
    if (!options) options = {};

    var later = function () {
        previous = options.leading === false ? 0 : Date.now() || new Date().getTime();
        timeout = null;
        result = func.apply(context, args);
        if (!timeout) context = args = null;
    };

    var throttled = function () {
        var now = Date.now() || new Date().getTime();
        if (!previous && options.leading === false) previous = now;
        var remaining = wait - (now - previous);
        context = this;
        args = arguments;
        if (remaining <= 0 || remaining > wait) {
            if (timeout) {
                clearTimeout(timeout);
                timeout = null;
            }
            previous = now;
            result = func.apply(context, args);
            if (!timeout) context = args = null;
        } else if (!timeout && options.trailing !== false) {
            // 判斷是否設(shè)置了定時器和 trailing
            timeout = setTimeout(later, remaining);
        }
        return result;
    };

    throttled.cancel = function () {
        clearTimeout(timeout);
        previous = 0;
        timeout = context = args = null;
    };

    return throttled;
}

使用很簡單:

btn.onclick = throttle(handle, 1000, {leading:true, trailing: true});

點(diǎn)擊查看更多

在開始說明JS上下文棧和作用域之前，我們先說明下JS上下文以及作用域的概念。

執(zhí)行上下文就是當(dāng)前 JavaScript 代碼被解析和執(zhí)行時所在環(huán)境的抽象概念， JavaScript 中運(yùn)行任何的代碼都是在執(zhí)行上下文中運(yùn)行。

執(zhí)行上下文類型分為：

全局執(zhí)行上下文

函數(shù)執(zhí)行上下文

eval函數(shù)執(zhí)行上下文(不被推薦)

執(zhí)行上下文創(chuàng)建過程中，需要做以下幾件事:

創(chuàng)建變量對象：首先初始化函數(shù)的參數(shù)arguments，提升函數(shù)聲明和變量聲明。

創(chuàng)建作用域鏈（Scope Chain）：在執(zhí)行期上下文的創(chuàng)建階段，作用域鏈?zhǔn)窃谧兞繉ο笾髣?chuàng)建的。

確定this的值，即 ResolveThisBinding

作用域負(fù)責(zé)收集和維護(hù)由所有聲明的標(biāo)識符（變量）組成的一系列查詢，并實(shí)施一套非常嚴(yán)格的規(guī)則，確定當(dāng)前執(zhí)行的代碼對這些標(biāo)識符的訪問權(quán)限?！?摘錄自《你不知道的JavaScript》(上卷)

作用域有兩種工作模型：詞法作用域和動態(tài)作用域，JS采用的是詞法作用域工作模型，詞法作用域意味著作用域是由書寫代碼時變量和函數(shù)聲明的位置決定的。(with 和 eval 能夠修改詞法作用域，但是不推薦使用，對此不做特別說明)

作用域分為：

全局作用域

函數(shù)作用域

塊級作用域

執(zhí)行棧，也叫做調(diào)用棧，具有 LIFO (后進(jìn)先出) 結(jié)構(gòu)，用于存儲在代碼執(zhí)行期間創(chuàng)建的所有執(zhí)行上下文。

規(guī)則如下：

首次運(yùn)行JavaScript代碼的時候,會創(chuàng)建一個全局執(zhí)行的上下文并Push到當(dāng)前的執(zhí)行棧中，每當(dāng)發(fā)生函數(shù)調(diào)用，引擎都會為該函數(shù)創(chuàng)建一個新的函數(shù)執(zhí)行上下文并Push當(dāng)前執(zhí)行棧的棧頂。

當(dāng)棧頂?shù)暮瘮?shù)運(yùn)行完成后，其對應(yīng)的函數(shù)執(zhí)行上下文將會從執(zhí)行棧中Pop出，上下文的控制權(quán)將移動到當(dāng)前執(zhí)行棧的下一個執(zhí)行上下文。

以一段代碼具體說明：

function fun3() {
    console.log("fun3")
}

function fun2() {
    fun3();
}

function fun1() {
    fun2();
}

fun1();

Global Execution Context (即全局執(zhí)行上下文)首先入棧，過程如下：

偽代碼:

//全局執(zhí)行上下文首先入棧
ECStack.push(globalContext);

//執(zhí)行fun1();
ECStack.push( functionContext);

//fun1中又調(diào)用了fun2;
ECStack.push( functionContext);

//fun2中又調(diào)用了fun3;
ECStack.push( functionContext);

//fun3執(zhí)行完畢
ECStack.pop();

//fun2執(zhí)行完畢
ECStack.pop();

//fun1執(zhí)行完畢
ECStack.pop();

//javascript繼續(xù)順序執(zhí)行下面的代碼，但ECStack底部始終有一個 全局上下文（globalContext）;

作用域鏈就是從當(dāng)前作用域開始一層一層向上尋找某個變量，直到找到全局作用域還是沒找到，就宣布放棄。這種一層一層的關(guān)系，就是作用域鏈。

如：

var a = 10;
function fn1() {
    var b = 20;
    console.log(fn2)
    function fn2() {
        a = 20
    }
    return fn2;
}
fn1()();

fn2作用域鏈 = [fn2作用域, fn1作用域，全局作用域]

BFC 是 Block Formatting Context 的縮寫，即塊格式化上下文。我們來看一下CSS2.1規(guī)范中對 BFC 的說明。

Floats, absolutely positioned elements, block containers (such as inline-blocks, table-cells, and table-captions) that are not block boxes, and block boxes with "overflow" other than "visible" (except when that value has been propagated to the viewport) establish new block formatting contexts for their contents.
浮動、絕對定位的元素、非塊級盒子的塊容器（如inline-blocks、table-cells 和 table-captions），以及overflow的值不為visible（該值已傳播到視區(qū)時除外）為其內(nèi)容建立新的塊格式上下文。

因此，如果想要深入的理解BFC，我們需要了解以下兩個概念：

1.Box
2.Formatting Context

Box 是 CSS 布局的對象和基本單位，頁面是由若干個Box組成的。

元素的類型 和 display 屬性，決定了這個 Box 的類型。不同類型的 Box 會參與不同的 Formatting Context。

Formatting Context 是頁面的一塊渲染區(qū)域，并且有一套渲染規(guī)則，決定了其子元素將如何定位，以及和其它元素的關(guān)系和相互作用。

Formatting Context 有 BFC (Block formatting context)，IFC (Inline formatting context)，F(xiàn)FC (Flex formatting context) 和 GFC (Grid formatting context)。FFC 和 GFC 為 CC3 中新增。

BFC內(nèi)，盒子依次垂直排列。

BFC內(nèi)，兩個盒子的垂直距離由 margin 屬性決定。屬于同一個BFC的兩個相鄰Box的margin會發(fā)生重疊【符合合并原則的margin合并后是使用大的margin】

BFC內(nèi)，每個盒子的左外邊緣接觸內(nèi)部盒子的左邊緣（對于從右到左的格式，右邊緣接觸）。即使在存在浮動的情況下也是如此。除非創(chuàng)建新的BFC。

BFC的區(qū)域不會與float box重疊。

BFC就是頁面上的一個隔離的獨(dú)立容器，容器里面的子元素不會影響到外面的元素。反之也如此。

計算BFC的高度時，浮動元素也參與計算。

根元素

浮動元素（float 屬性不為 none）

position 為 absolute 或 relative

overflow 不為 visible 的塊元素

display 為 inline-block, table-cell, table-caption

1.防止 margin 重疊

兩個div直接的 margin 是50px，發(fā)生了 margin 的重疊。

根據(jù)BFC規(guī)則，同一個BFC內(nèi)的兩個兩個相鄰Box的 margin 會發(fā)生重疊，因此我們可以在div外面再嵌套一層容器，并且觸發(fā)該容器生成一個 BFC，這樣 
 就會屬于兩個 BFC，自然也就不會再發(fā)生 margin 重疊

2.清除內(nèi)部浮動

container 的高度沒有被撐開，如果我們希望 container 的高度能夠包含浮動元素，那么可以創(chuàng)建一個新的 BFC，因?yàn)楦鶕?jù) BFC 的規(guī)則，計算 BFC 的高度時，浮動元素也參與計算。

3.自適應(yīng)多欄布局

根據(jù)規(guī)則，BFC的區(qū)域不會與float box重疊。因此，可以觸發(fā)生成一個新的BFC，如下：

a = 10;
var a; //正常

a = 10;
let a; //ReferenceError

let a = 10;
var a = 20;
//拋出異常：SyntaxError: Identifier "a" has already been declared

const a;//SyntaxError: Missing initializer in const declaration

這里有一個非常重要的點(diǎn)即是：復(fù)雜數(shù)據(jù)類型，存儲在棧中的是堆內(nèi)存的地址，存在棧中的這個地址是不變的，但是存在堆中的值是可以變得。有沒有相當(dāng)常量指針/指針常量~

const a = 20;
const b = {
    age: 18,
    star: 500
}

一圖勝萬言，如下圖所示，不變的是棧內(nèi)存中 a 存儲的 20，和 b 中存儲的 0x0012ff21（瞎編的一個數(shù)字）。而 {age: 18, star: 200} 是可變的。思考下如果想希望一個對象是不可變的，應(yīng)該用什么方法？

{
    let a = 10;
    const b = 20;
    var c = 30;
}
console.log(a); //ReferenceError
console.log(b); //ReferenceError
console.log(c); //30

在 let/const 之前，最早學(xué)習(xí)JS的時候，也曾被下面這個問題困擾：

期望： a[0]() 輸出 0 , a[1]() 輸出 1 , a[2]() 輸出 2 , ...

var a = [];
for (var i = 0; i < 10; i++) {
    a[i] = function () {
        console.log(i);
    };
}
a[6](); // 10

雖然后來知道了為什么，但是想要得到自己需要的結(jié)果，還得整個閉包，我...我做錯了什么，要這么對我...

var a = [];
for (var i = 0; i < 10; i++) {
    a[i] = (function(j){
        return function () {
            console.log(j);
        }
    })(i)
}
a[6](); // 6

有了 let 之后，終于不要這么麻煩了。

var a = [];
for (let i = 0; i < 10; i++) {
    a[i] = function () {
        console.log(i);
    };
}
a[6](); // 6

美滋滋，有沒有~

美是美了，但是總得問自己為什么吧~

var i 為什么輸出的是 10，這是因?yàn)?i 在全局范圍內(nèi)都是有效的，相當(dāng)于只有一個變量 i，等執(zhí)行到 a[6]() 的時候，這個 i 的值是什么？請大聲說出來。

再看 let , 我們說 let 聲明的變量僅在塊級作用域內(nèi)有效，變量i是let聲明的，當(dāng)前的 i 只在本輪循環(huán)有效，所以每一次循環(huán)的 i 其實(shí)都是一個新的變量。有興趣的小伙伴可以查看 babel 編譯后的代碼。

var a = 10;
console.log(window.a);//10

只要塊級作用域內(nèi)存在let命令，它所聲明的變量就“綁定”（binding）這個區(qū)域，不再受外部的影響。

var a = 10;
if (true) {
  a = 20; // ReferenceError
  let a;
}

在代碼塊內(nèi)，使用 let/const 命令聲明變量之前，該變量都是不可用的，也就意味著 typeof 不再是一個百分百安全的操作。

console.log(typeof b);//undefined

console.log(a); //ReferenceError
let a = 10;

深拷貝和淺拷貝是針對復(fù)雜數(shù)據(jù)類型來說的。

深拷貝復(fù)制變量值，對于非基本類型的變量，則遞歸至基本類型變量后，再復(fù)制。 深拷貝后的對象與原來的對象是完全隔離的，互不影響，對一個對象的修改并不會影響另一個對象。

淺拷貝是會將對象的每個屬性進(jìn)行依次復(fù)制，但是當(dāng)對象的屬性值是引用類型時，實(shí)質(zhì)復(fù)制的是其引用，當(dāng)引用指向的值改變時也會跟著變化。

可以使用 for in、 Object.assign、 擴(kuò)展運(yùn)算符 ... 、Array.prototype.slice()、Array.prototype.concat() 等，例如:

let obj = {
    name: "Yvette",
    age: 18,
    hobbies: ["reading", "photography"]
}
let obj2 = Object.assign({}, obj);
let obj3 = {...obj};

obj.name = "Jack";
obj.hobbies.push("coding");
console.log(obj);//{ name: "Jack", age: 18,hobbies: [ "reading", "photography", "coding" ] }
console.log(obj2);//{ name: "Yvette", age: 18,hobbies: [ "reading", "photography", "coding" ] }
console.log(obj3);//{ name: "Yvette", age: 18,hobbies: [ "reading", "photography", "coding" ] }

可以看出淺拷貝只最第一層屬性進(jìn)行了拷貝，當(dāng)?shù)谝粚拥膶傩灾凳腔緮?shù)據(jù)類型時，新的對象和原對象互不影響，但是如果第一層的屬性值是復(fù)雜數(shù)據(jù)類型，那么新對象和原對象的屬性值其指向的是同一塊內(nèi)存地址。來看一下使用 for in 實(shí)現(xiàn)淺拷貝。

let obj = {
    name: "Yvette",
    age: 18,
    hobbies: ["reading", "photography"]
}
let newObj = {};
for(let key in obj){
    newObj[key] = obj[key]; 
    //這一步不需要多說吧，復(fù)雜數(shù)據(jù)類型棧中存的是對應(yīng)的地址，因此賦值操作，相當(dāng)于兩個屬性值指向同一個內(nèi)存空間
}
console.log(newObj);
//{ name: "Yvette", age: 18, hobbies: [ "reading", "photography" ] }
obj.age = 20;
obj.hobbies.pop();
console.log(newObj);
//{ name: "Yvette", age: 18, hobbies: [ "reading" ] }

1.深拷貝最簡單的實(shí)現(xiàn)是: JSON.parse(JSON.stringify(obj))

let obj = {
    name: "Yvette",
    age: 18,
    hobbies: ["reading", "photography"]
}
let newObj = JSON.parse(JSON.stringify(obj));//newObj和obj互不影響
obj.hobbies.push("coding");
console.log(newObj);//{ name: "Yvette", age: 18, hobbies: [ "reading", "photography" ] }

JSON.parse(JSON.stringify(obj)) 是最簡單的實(shí)現(xiàn)方式，但是有一點(diǎn)缺陷：

1.對象的屬性值是函數(shù)時，無法拷貝。

let obj = {
    name: "Yvette",
    age: 18,
    hobbies: ["reading", "photography"],
    sayHi: function() {
        console.log(sayHi);
    }
}
let newObj = JSON.parse(JSON.stringify(obj));
console.log(newObj);//{ name: "Yvette", age: 18, hobbies: [ "reading", "photography" ] }

2.原型鏈上的屬性無法獲取

function Super() {

}
Super.prototype.location = "NanJing";
function Child(name, age, hobbies) {
    this.name = name;
    this.age = age;
}
Child.prototype = new Super();

let obj = new Child("Yvette", 18);
console.log(obj.location); //NanJing
let newObj = JSON.parse(JSON.stringify(obj));
console.log(newObj);//{ name: "Yvette", age: 18}
console.log(newObj.location);//undefined;原型鏈上的屬性無法獲取

3.不能正確的處理 Date 類型的數(shù)據(jù)

4.不能處理 RegExp

5.會忽略 symbol

6.會忽略 undefined

let obj = {
    time: new Date(),
    reg: /d{3}/,
    sym: Symbol(10),
    name: undefined
}

let obj2 = JSON.parse(JSON.stringify(obj));
console.log(obj2); //{ time: "2019-06-02T08:16:44.625Z", reg: {} }

2.實(shí)現(xiàn)一個 deepClone 函數(shù)

如果是基本數(shù)據(jù)類型，直接返回

如果是 RegExp 或者 Date 類型，返回對應(yīng)類型

如果是復(fù)雜數(shù)據(jù)類型，遞歸。

function deepClone(obj) { //遞歸拷貝
    if(obj instanceof RegExp) return new RegExp(obj);
    if(obj instanceof Date) return new Date(obj);
    if(obj === null || typeof obj !== "object") {
        //如果不是復(fù)雜數(shù)據(jù)類型，直接返回
        return obj;
    }
    /**
     * 如果obj是數(shù)組，那么 obj.constructor 是 [Function: Array]
     * 如果obj是對象，那么 obj.constructor 是 [Function: Object]
     */
    let t = new obj.constructor();
    for(let key in obj) {
        //如果 obj[key] 是復(fù)雜數(shù)據(jù)類型，遞歸
        if(obj.hasOwnProperty(key)){//是否是自身的屬性
            t[key] = deepClone(obj[key]);
        }
    }
    return t;
}

測試:

function Super() {

}
Super.prototype.location = "NanJing";
function Child(name, age, hobbies) {
    this.name = name;
    this.age = age;
    this.hobbies = hobbies;
}
Child.prototype = new Super();

let obj = new Child("Yvette", 18, ["reading", "photography"]);
obj.sayHi = function () {
    console.log("hi");
}
console.log(obj.location); //NanJing
let newObj = deepClone(obj);
console.log(newObj);//
console.log(newObj.location);//NanJing 可以獲取到原型鏈上的屬性
newObj.sayHi();//hi 函數(shù)屬性拷貝正常

[1] https://www.ecma-internationa...

[2] 【譯】理解 Javascript 執(zhí)行上下文和執(zhí)行棧

[3] https://css-tricks.com/deboun...

[4] https://github.com/mqyqingfen...

[5] https://www.cnblogs.com/coco1...

[6] https://www.cnblogs.com/wangf...

[7] https://www.w3.org/TR/2011/RE...

[8] https://github.com/mqyqingfen...

謝謝各位小伙伴愿意花費(fèi)寶貴的時間閱讀本文，如果本文給了您一點(diǎn)幫助或者是啟發(fā)，請不要吝嗇你的贊和Star，您的肯定是我前進(jìn)的最大動力。https://github.com/YvetteLau/...

關(guān)注公眾號，加入技術(shù)交流群。