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

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

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

__

本周面試題一覽:

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

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

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

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

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

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

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

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

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

2.拖拽事件

3.onScoll

4.計(jì)算鼠標(biāo)移動(dòng)的距離(mousemove)

利用時(shí)間戳實(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ù)最終返回的是一個(gè)函數(shù)
    return throttled; 
}

利用定時(shí)器實(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;
}

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

組合實(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è)置了定時(shí)器和 trailing
            timeout = setTimeout(later, remaining);
        }
        return result;
    };

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

    return throttled;
}

使用很簡(jiǎn)單:

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

點(diǎn)擊查看更多

在開(kāi)始說(shuō)明JS上下文棧和作用域之前，我們先說(shuō)明下JS上下文以及作用域的概念。

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

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

全局執(zhí)行上下文

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

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

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

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

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

確定this的值，即 ResolveThisBinding

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

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

作用域分為：

全局作用域

函數(shù)作用域

塊級(jí)作用域

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

規(guī)則如下：

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

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

以一段代碼具體說(shuō)明：

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

function fun2() {
    fun3();
}

function fun1() {
    fun2();
}

fun1();

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

偽代碼:

//全局執(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底部始終有一個(gè) 全局上下文（globalContext）;

作用域鏈就是從當(dāng)前作用域開(kāi)始一層一層向上尋找某個(gè)變量，直到找到全局作用域還是沒(méi)找到，就宣布放棄。這種一層一層的關(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 的縮寫(xiě)，即塊格式化上下文。我們來(lái)看一下CSS2.1規(guī)范中對(duì) BFC 的說(shuō)明。

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.
浮動(dòng)、絕對(duì)定位的元素、非塊級(jí)盒子的塊容器（如inline-blocks、table-cells 和 table-captions），以及overflow的值不為visible（該值已傳播到視區(qū)時(shí)除外）為其內(nèi)容建立新的塊格式上下文。

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

1.Box
2.Formatting Context

Box 是 CSS 布局的對(duì)象和基本單位，頁(yè)面是由若干個(gè)Box組成的。

元素的類(lèi)型 和 display 屬性，決定了這個(gè) Box 的類(lèi)型。不同類(lèi)型的 Box 會(huì)參與不同的 Formatting Context。

Formatting Context 是頁(yè)面的一塊渲染區(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)，兩個(gè)盒子的垂直距離由 margin 屬性決定。屬于同一個(gè)BFC的兩個(gè)相鄰Box的margin會(huì)發(fā)生重疊【符合合并原則的margin合并后是使用大的margin】

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

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

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

計(jì)算BFC的高度時(shí)，浮動(dòng)元素也參與計(jì)算。

根元素

浮動(dòng)元素（float 屬性不為 none）

position 為 absolute 或 relative

overflow 不為 visible 的塊元素

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

1.防止 margin 重疊

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

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

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

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

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

根據(jù)規(guī)則，BFC的區(qū)域不會(huì)與float box重疊。因此，可以觸發(fā)生成一個(gè)新的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

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

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

一圖勝萬(wàn)言，如下圖所示，不變的是棧內(nèi)存中 a 存儲(chǔ)的 20，和 b 中存儲(chǔ)的 0x0012ff21（瞎編的一個(gè)數(shù)字）。而 {age: 18, star: 200} 是可變的。思考下如果想希望一個(gè)對(duì)象是不可變的，應(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的時(shí)候，也曾被下面這個(gè)問(wèn)題困擾：

期望： 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

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

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

美滋滋，有沒(méi)有~

美是美了，但是總得問(wèn)自己為什么吧~

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

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

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

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

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

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

console.log(typeof b);//undefined

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

深拷貝和淺拷貝是針對(duì)復(fù)雜數(shù)據(jù)類(lèi)型來(lái)說(shuō)的。

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

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

可以使用 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ù)類(lèi)型時(shí)，新的對(duì)象和原對(duì)象互不影響，但是如果第一層的屬性值是復(fù)雜數(shù)據(jù)類(lèi)型，那么新對(duì)象和原對(duì)象的屬性值其指向的是同一塊內(nèi)存地址。來(lá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]; 
    //這一步不需要多說(shuō)吧，復(fù)雜數(shù)據(jù)類(lèi)型棧中存的是對(duì)應(yīng)的地址，因此賦值操作，相當(dāng)于兩個(gè)屬性值指向同一個(gè)內(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.深拷貝最簡(jiǎn)單的實(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)) 是最簡(jiǎn)單的實(shí)現(xiàn)方式，但是有一點(diǎn)缺陷：

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

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.原型鏈上的屬性無(wú)法獲取

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;原型鏈上的屬性無(wú)法獲取

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

4.不能處理 RegExp

5.會(huì)忽略 symbol

6.會(huì)忽略 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)一個(gè) deepClone 函數(shù)

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

如果是 RegExp 或者 Date 類(lèi)型，返回對(duì)應(yīng)類(lèi)型

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

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ù)類(lèi)型，直接返回
        return obj;
    }
    /**
     * 如果obj是數(shù)組，那么 obj.constructor 是 [Function: Array]
     * 如果obj是對(duì)象，那么 obj.constructor 是 [Function: Object]
     */
    let t = new obj.constructor();
    for(let key in obj) {
        //如果 obj[key] 是復(fù)雜數(shù)據(jù)類(lèi)型，遞歸
        if(obj.hasOwnProperty(key)){//是否是自身的屬性
            t[key] = deepClone(obj[key]);
        }
    }
    return t;
}

測(cè)試:

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)寶貴的時(shí)間閱讀本文，如果本文給了您一點(diǎn)幫助或者是啟發(fā)，請(qǐng)不要吝嗇你的贊和Star，您的肯定是我前進(jìn)的最大動(dòng)力。https://github.com/YvetteLau/...

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