攻破javascript面試的完美指南【譯】

阿新 • • 發佈：2018-11-09

攻破javascript面試的完美指南(開發者視角)

0. 前言

本文適合有一定js基礎的前端開發人員閱讀。原文是我google時無意發現的，被一些知識點清晰的解析所打動，決定翻譯並記錄下來。這個過程斷續進行了兩個月，期間工作遇到的部分疑問也在文中找到了答案。這篇好的文章值得被推薦。

說明：因為外網的緣故，原文中的一些視訊連線並沒有貼出。部分採用意譯，示例程式碼有少許差別。由於英文水平有限，歡迎指出錯誤和批評。

為了向你說明js面試的複雜性，嘗試給出程式碼段的輸出。

console.log(2.0 == '2' == new Boolean(true) == '1')
// true

十有八九的會給出false，其實執行結果是true。

JavaScript是難的。如果太聰明面試問類似問題，我們也無可奈何。但是什麼是我們應該準備的呢？深入學習這十一個基本知識點，有助於你的JS面試。

1.熟悉js函式

function 是JavaScript的精髓。不同於其他語言，在js中，一個函式可以分配成一個變數，作為引數傳遞給其他函式也可以作為其他函式的返回值。

console.log(square1(5));
/* ... */
function square1(n) { return n * n; }
// 25

console.log(square2(5)); 
var square2 = function(n) { 
  return n * n; 
}
// square2 is not a function

JS中，如果你把函式定義為變數，變數的名字會被提升，但是JS執行到它的定義才能被訪問。

你可能在一些程式碼中頻繁的見到如下程式碼。

var simpleLibrary = function() {
   var simpleLibrary = {
        a: 0,
        b: 0,
        add: function(a, b) {
            return a + b;
        },
        subtract: function(a, b) {
            return a - b;   
        }
   }
  return simpleLibrary;
}();

一個函式變數中變數和函式被分裝，可以避免全域性變數汙染。從JQuery到Lodash的庫採用這用技術提供$、_等

2.熟悉bind、apply和call

你可能在所有常用庫中看到過這三個函式。它們允許區域性套用，我們可以把功能組合到不同的函式。一個優秀的js開發者可以隨時告訴你關於這三個函式。

首先，這些都是函式的原型方法去改變行為來實現一些功能。依據JS開發者Chad, 用途描述如下：

當你想要函式在特定上下文中呼叫，使用.bind()，很適用於事件。
當你期望立即呼叫函式並修改上下文，使用.call()或.apply()

一個應急呼叫例項

解釋一下上述描述。假設你的數學老師要求你建立一個庫並提交。你寫了一個可以計算圓周長和麵積的抽象庫。

var mathLib = {
    pi: 3.14,
    area: function(r) {
        return this.pi * r * r;
    },
    circumference: function(r) {
        return 2 * this.pi * r;
    },
}

你把函式庫提交給老師。現在是時間提交被稱為計算庫的程式碼。

mathLib.area(2) // 12.56

當你提交第二個程式碼例項時，你發現指南中老師要求你常量pi精確到小數點後5位數。你使用的是3.14，不是3.14159。現在由於最後期限已過你沒有機會提交庫。 JS call函式可以幫你。只需要呼叫你的程式碼如下。

mathLib.area.call({pi: 3.14159}, 2) //    12.56636

加入你注意到call函式具有兩個引數。

上下文
函式引數

在area函式中，上下文是物件被關鍵詞this代替。後面的引數作為函式引數被傳遞。如下：

var cylinder = {
    pi: 3.14,
    volume: function(r, h) {
        return this.pi * r * r * h;
    },
}

call 呼叫如下：

cylinder.volume.call({pi: 3.14159}, 2, 6); //    75.39815999999999

你看到這些函式的引數在上下文物件後被傳遞了嗎？

Apply 是相似的，除了函式引數以列表的方式被傳遞。

cylinder.volume.apply({ pi: 3.14159 }, [2, 6]); //    75.39815999999999

你知道call的用法， apply用法反之亦然。那麼， bind的用法呢？

Bind函式的用途呢？它允許我們將上下文注入一個函式，該函式返回一個帶有更新上下文的新函式。這意味著，這個變數將是使用者提供的變數。當和JS事件一起執行時這是非常有用的。

你應該熟悉在JS中使用這三個函式去組合功能

3.熟悉js作用域(閉包)

JS作用域是一個潘多拉魔盒。數以百計的面試難題有這個概念構成。有三種作用域：

全域性作用域
本地/函式作用域
塊級作用域(ES6引進)

全域性作用域是我們通常做的那樣：

x = 10;
function Foo() {
  console.log(x); // Prints 10
}
Foo()

函式作用域生效當你定義一個區域性變數時：

pi = 3.14;
function circumference(radius) {    
     pi = 3.14159;
     console.log(2 * pi * radius); // Prints "12.56636" not "12.56"
}
circumference(2);

ES16標準介紹過新塊級作用域，限制一個變數作用域帶給定的括號塊。

var a = 10;
function Foo() {
    if (true) {
        let a = 4;
    }
    console.log(a);
}
Foo() //    10, 因為關鍵詞key

函式和條件都被視為塊。以上例子應該給出4，因為條件宣告已經生效。但是ES6銷燬了塊級變數的作用域，作用域進入全域性。

現在來自神奇的作用域。它可以通過閉包實現。JS閉包是一個返回另一個函式的函式。

如果有人要求你，實現輸入一個字串並逐次返回字元。如果給出一個新的字串，需要替換舊字串。他被簡單成為生成器。

function generator(input) {
    var index = 0;
    return {
        next: function() {
            if (index < input.length) {
                index += 1;
                return input[index - 1];
            }
            return "";
        }
    }
}
var mygenerator = generator('hello');
mygenerator.next(); //    "h"
mygenerator.next(); //    "e"
mygenerator = generator('word');
mygenerator.next(); //    "w"

此時，作用域扮演一個重要的角色。一個閉包是返回另一個函式和包裹資料的一個函式。以上字串生成器便是一個閉包。index的值在多個函式呼叫中被儲存。內部函式可以訪問父級函式中定義的變數。這是一個不同的作用域。假設你在二級函式中定義了一個函式，它可以訪問所有父級變數。

JS作用域會給你帶來很多問題，徹底理解它。

4.熟悉this(全域性域、函式域、物件域)

JS中，我們經常把函式和物件組合。假設在瀏覽器中，在全域性上下文中它涉及window物件。我的意思是，如果你現在開啟瀏覽器控制檯輸入this，改製為true

this === window //    true

當程式的上下文和作用域改變時， this隨之發生改變。現在觀察this在一個區域性上下文中：

function Foo() {
    console.log(this.a);
}
Foo() //    undefined
var food = { a: 'hello--' };
Foo.call(food); //    hello--

你可以嘗試預測一下輸出：

function Roo(){
    console.log(this); // prints {}?
}
Roo() //    Window {postMessage: ƒ, blur: ƒ, focus: ƒ, close: ƒ, frames: Window, …}

不，你還沒有獲勝。因為this此時是一個全域性物件。記住，無論父級作用域是什麼，它都講被它的孩子繼承。因此，它打印出了window物件。我們討論的三個方法實際上用於設定this物件。

現在，this的最後一個型別。在物件中的this, 如下：

var person = {
    name: 'Tom',
    age: 26,
    get identity() {
        return { 
            who: this.name,
            howOld: this.age
        }
    }
}

我僅僅使用getter語法，它是一個可以作為變數呼叫的函式。

person.identity; //    {who: "Tom", howOld: 26}

因此，這實際是物件自己。this正如我們前面所提到的不同地方的表現不同。

5.熟悉物件(freeze、seal屬性)

可以通過以下方式建立物件：

var marks = {}
var marks = new Object();

我們大多是熟悉的物件如下：

var marks  = { physics: 98, maths: 95, chemistry: 91 };

它是一個鍵值對儲存鍵、值。JS 物件具備的一個特殊屬性，把任何東西可以視為value。這意味著，我們可以把一個數組、物件、函式作為value來儲存。有何不可呢？

你藉助JSON的stringify、parse防範可以輕鬆的把物件轉成一個JSON，相應的可以再轉成物件。

JSON.stringify(marks); //    "{"physics":98,"maths":95,"chemistry":91}"
JSON.parse('{"physics":98,"maths":95,"chemistry":91}'); //    {physics: 98, maths: 95, chemistry: 91}

因此，對於物件你有了解一些什麼呢。使用Object.keys很容易迭代物件

var highScore = 0;
for (k of Object.keys(marks)) {
    if (marks[k] > highScore) {
        highScore = marks[k];
    }
}
console.log(highScore); //    98

Object.values 以陣列的方式返回物件的值。

其他重要的物件函式：

Object.prototype(object)
Object.freeze(function)
Object.seal(function)

Object.prototype提供更多可以應用的重要函式。如下：

Object.prototype.hasOwnProperty 用於發現一個物件是否存在一個原型或鍵。

marks.hasOwnProperty('physics'); //    true
marks.hasOwnProperty('greek'); //    false

Object.prototype.instanceof 評估一個物件是否是特定原型的型別。

function Car(make, model, year) {
    this.make = make;
    this.model = model;
    this.year = year;
}
var newCar = new Car('Jack', 'City', '2008');
console.log(newCar instanceof Car) //    true

現在介紹其它兩個函式。Object.freeze 允許我們凍結一個物件，使得存在的屬性不能被改變。

var marks = {physics: 98, math: 95, chemisty: 91}
finalizedMarks = Object.freeze(marks); //    {physics: 98, maths: 95, chemistry: 91}
finalizedMarks['physics'] = 86; 
console.log(marks); //    {physics: 98, maths: 95, chemistry: 91}

程式碼中， physics屬相併未被改變。我們可以使用Object.isFrozen來判斷，給定物件是否被凍結

Object.isFrozen(finalizedMarks); //    true

Object.seal 與freeze有細微差別。前者允許配置屬性，但是不允許新增或刪除屬性。

var marks = {physics: 98, math: 95, chemisty: 91}
Object.seal(marks); //    {physics: 98, math: 95, chemisty: 91}
delete marks.chemisty //    false
marks.physics = 95;
console.log(marks); //    {physics: 95, math: 95, chemisty: 91}
marks.greek = 86;
console.log(marks); //    {physics: 95, math: 95, chemisty: 91}

同樣，可以藉助Object.isSealed判斷物件是否被密封。

Object.isSealed(marks) //    true

6.熟悉原型繼承

在傳統的js中隱藏著繼承的概念，使用原型技術。你在ES5、ES6中看到的所有new class語法僅僅是底層原型OOP的表層。使用js函式建立一個class.

var animalGroups = {
    MAMMAL: 1,
    REPTILE: 2,
    AMPHIBIAN: 3,
    INVERTEBRATE: 4,
};
function Animal(name, type) {
    this.name = name;
    this.type = type;
}
var dog = new Animal("dog", animalGroups.MAMMAL);
console.log(dog); //    Animal { name: 'dog', type: 1 }
var crocodile = new Animal("crocodile", animalGroups.REPTILE);
console.log(crocodile); //    Animal { name: 'crocodile', type: 2 }

此時，我們建立一個類（使用關鍵詞new）。可以使用如下方式對class追加方法。

Animal.prototype.shout = function() {
  console.log(this.name+'is'+this.sound+'ing...');
}

你可能有疑問。現在class中沒有sound屬性。是的。定義一個sound屬性幾乎沒有可能，可以由繼承它的子類進行傳遞。

js中，如下實現繼承。

function Dog(name, type) {
  Animal.call(this, name, type);
  this.sound = 'bow';
}
// console.log(Dog); // [Function: Dog]

定義一個特殊的函式Dog。為了繼承Animal，需要call傳遞this和其他引數。如下方式例項化一個Jack。

var pet = new Dog('Jack', animalGroups.MAMMAL);
console.log(pet);   // Dog { name: 'Jack', type: 1, sound: 'bow' }
console.log(pet instanceof Dog); // true
console.log(pet instanceof Animal); // false

我們不能在子函式中分配name和type，但是可以呼叫超級函式Animal並設定屬性。。pet擁有其父的（name, type）屬性。是否也繼承了方法。

pet.shout(); // is not a function

為什麼沒有繼承呢？因為不能繼承父class的方法。如何補救？

Dog.prototype = Object.create(Animal.prototype);
var pig = new Dog('Jack', animalGroups.MAMMAL);
pig.shout(); // Jackisbowing...

現在shout方法是有效的。Object.constructor函式檢查物件的class.

console.log(pig.constructor); // [Function: Animal]

檢查pig的結果。Animal是父類。這是因為Dog的類

console.log(Dog.prototype.constructor); // [Function: Animal]

輸出是Aimal。我們應該設定Dog為其本身，這樣類的所有例項(物件)都應該在類所屬的地方給出正確的類名。

Dog.prototype.constructor = Dog;
console.log(Dog.prototype.constructor); // [Function: Dog]

關於原型繼承，我們應該記住以下幾條：

class 屬性使用this繫結
class 方法使用prototype物件來繫結
為了繼承原型，使用call函式傳遞this
為了繼承方法, 使用Object.create連線父和子的原型
通設定子class建構函式本身為獲取正確的標識。

注意：即使使用新的class語法，這些事情也會發生。瞭解這些對你熟悉js有幫助。

js中， call函式和原型物件提供繼承

7.熟悉callback和promise

callback 是一個I/O執行完畢後執行的函式。一個耗時的I/O操作會阻塞程式碼，因此在Python/Ruby不被允許。但是js中，由於允許非同步執行，我們可以提供非同步函式來回調。這個例子是由瀏覽器到伺服器的AJAX(XMLHettpRequest)呼叫，由滑鼠、鍵盤事件生成。如下：

function reqListener() {
    console.log(this.responseText);
}
var req = new XMLHttpRequest();
req.addEventListener('load', reqListenter);
req.open('GET', 'http://www.example.org/example.txt');
req.send();

其中， reqListenter是GET請求成功後的回撥函式。

Promise 是回撥函式的優雅的封裝，使得我們優雅的實現非同步程式碼。此時，不再過多討論promise, 雖然對於熟悉Js及其重要。

8.熟悉正則表達

建立正則表示式，有如下兩種方式：

var re = /ar/;
var re = new RegExp('ar');

以上正則用於匹配字串。一旦正則已經定義，可以使用exec函式匹配字串。

re.exec('car')
re.exec('cab')

存在複雜的符號，來實現複雜的正則表示式。

字元正則：\w-字母數字， \d-數字， \D-沒有數字
字元正則：[x-y]x-y區間， [^x]沒有x
數量正則：+至少一個、?沒或多個、*多個
邊界正則，^開始、$結尾

例子如下：

// 1
/\d/.exec('qwe') // null
/\d/.exec('2344') // ["2", index: 0, input: "2344", groups: undefined]
/\d/.exec('2cc4') // ["2", index: 0, input: "2cc4", groups: undefined]

// 2
/e+/.exec('qwe') // ["e", index: 2, input: "qwe", groups: undefined]

// 3
[^x]/.exec('xcc4')  // ["c", index: 1, input: "xcc4", groups: undefined]

// 4
/^q/.exec('qwe') //["q", index: 0, input: "qwe", groups: undefined]
/e$/.exec('qwe') // ["e", index: 2, input: "qwe", groups: undefined]

除了exec，還有match、search，以及replace可以返回一個字串使用正則表示式。但是主體是一個字串。

'hello 12345'.match(/\d/) // ["1", index: 6, input: "hello 12345", groups: undefined]
'hello 12345'.replace(/1/, 'c') // "hello c2345"

正則是個重要的話題，對於想要簡單解決複雜問題的開發人員來說。

正則不單單屬於js，你也可以經常在其他語言中見到

9.熟悉map、reduce和filter

函數語言程式設計是最近討論的話題。許多程式語言的新版本開始包括lambdas等概念(如：java>7)。 js中，支援函式式結構已經有很長一段時間。此處，有三個函式需要我們深入學習。數學函式獲取輸出並給出返回。一個純正的函式總是依據輸入給出返回，如下討論的函式屬於此類函式。

9.1 map

map函式在js陣列中可用。使用這個函式，我們通過對每一個元素進行轉換來獲取一個新的陣列。一般的js陣列map操作如下：

arr.map((elem){
    process(elem);
    return processedValue;
}); // return a new array

假設，我們最近工作的序列鍵不需要字元。我們需要移除。可以使用map去執行相同的操作從而獲取結果數字，而不是通過迭代和發現的方式移除字元。

var data = ['2345-34r', '2e345-211', '543-67i4', '346-598'];
var re = /[a-z A-Z]/;
var cleanedData = data.map((elem) => {
    return elem.replace(re, '');
});
console.log(cleanedData); // ["2345-34", "2345-211", "543-674", "346-598"]

注意：使用es6的箭頭函式語法來定義函式

map接受一個作為引數的函式，此函式接受一個來自陣列的引數。我們需要返回一個處理過的元素，並應用於陣列中的所有元素。

9.2 reduce

reduce函式將一個給定的列表歸納出一個返回。我們通過迭代陣列執行相同的操作，並儲存中間結果到一個變數中。此處是一個更簡潔的方式進行處理。js的reduce一般使用語法如下：

arr.reduce((accumulator, value, index) => {
    process(accumulator, value);
    return accumulator;
}, initAccumulator);

initAccumulator, 累加器的初始值
accumulator，累加器用於儲存中間值和結果值
value，對組對應的元素
index，陣列對應的索引號

reduce 的一個實際應用是將一個數組扁平化，將內部陣列轉化為單個數組，如下：

var arr = [[1, 2], [3, 4], [5, 6]]
var flattenedArray = [1, 2, 3, 4, 5, 6]

我們可以通過正常的迭代實現，神奇的是，使用reduce會更加簡潔。

var arr = [[1, 2], [3, 4], [5, 6]]
var flattenedArray = arr.reduce((a, v) => {
    return a.concat(v)
}, [])
flattenedArray // (6) [1, 2, 3, 4, 5, 6]

9.3 filter

filter與map更為接近，對陣列的每個元素進行操作並返回另外一個數組（不同於reduce返回的值）。過濾後的陣列可能比原陣列長度更短。因為，我們通過的可能排除輸出陣列中更少/零的輸入。
filter執行如下：

arr.filter((v) => {
    return Boolean;
})

v是陣列中的元素，通過true/false表示過濾元素包括/排除。假設，我們過濾出以t開始以r結束的元素。

var words = ["tiger", "toast", "boat", "tumor", "track", "bridge"]
var newData = words.filter((str) => {
    return str.startsWith('t') && str.endsWith('r');
})
newData // (2) ["tiger", "tumor"]

當你被問到js方面的問題時，這三個函式應該信手拈來。如你所看到的，所有三個函式例子並沒有改變原陣列，這也證明了這些函式的純淨性。

10. 熟悉錯誤(異常)處理模式

這部分是許多開發者最不關係的js部分。我瞭解到很少開發人員討論錯誤處理。好的開發方法是小心的將js程式碼包裹在try/catch周圍。

Nicholas C. Zakas，雅虎的UI工程師， 2018 說過： “經常假設你的程式碼會失敗。事件處理可能不當。記錄到伺服器。丟擲你自己的問題。”

js中，我們隨意碼的程式碼，可能失敗，如下：

$('button').click(function() {
    $.ajax({
        url: 'user.json',
        success: function(res) {
            updateUI(res['posts']);
        }
    });
});

此時，我們落入ajax結果總是JSON物件的陷阱。有時，伺服器會崩潰並返回null。這種情況下， null["posts"]會丟擲錯誤。正確的處理方式如下：

$('button').click(function() {
    $.ajax({
        url: 'user.json',
        success: function(res) {
            try {
                updateUI(res['posts']);
            }
            catch(e) {
                logError();
                flashInfoMessage();
            }
        }
    });
});

logError函式打算向伺服器報告錯誤。
flashInfoMessage函式使用“當前伺服器不可用”等使用者友好型方式展示錯誤資訊。

Nicholas說過，當你感到不可預期的事情發生時手動丟擲錯誤。區分致命和非致命錯誤。上面的錯誤與後臺伺服器掛機相關，是致命的。因此，我們應該通知客戶伺服器因為一些原因掛機。這種情況下，不是致命的，但是最好通知伺服器。為了建立這樣的程式碼，首先丟擲錯誤，從window層級捕捉錯誤事件，隨後記錄資訊到伺服器。

reportErrorToServer = function(error) {
    $.ajax({
        type: "POST",
        url: "http://api.xyz.com/report",
        data: error,
        success: function(res) {}
    });
}

// window error evnet
window.addEvnetListener('error', function(e) {
    reportErrorToServer({
        message: e.message
    });
});

function mainLogic() {
    throw new Error("error tip");
}

這個程式碼需要做如下三件事：

監聽window層級錯誤
出現錯誤時， API記錄
在伺服器中記錄

你也可以使用新的Boolean函式（es5，es6）在程式之前監測變數的有效性並且不為null、undefined

if (Boolean()) {
    // block code
} else {
    throw new Error("Custom message");
}

始終考慮錯誤處理是你自己，而不是瀏覽器。

11. 其他(提升機制和事件冒泡)

對於一個js開發者，以上都是主要概念。瞭解少數內部細節可是非常有用的。js在瀏覽器中的工作機制。什麼是提升機制和事件冒泡？

11.1 提升機制

提升是在程式碼執行過程中將宣告的變數推送到程式頂部的一個過程。

function doSomething(v) {
    //
}
doSomething(foo);
var foo;

使用指令碼語言類似Python執行以上程式，會丟擲錯誤。你需要先定義再使用。雖然js是指令碼語言，但是它有提升機制。在這種機制中，一個js VM在執行程式是做了以下兩件事：

首先，掃描程式收集所有變數和函式的宣告和分配記憶體空間。
通過填充分配的變數來執行程式，沒有分配則填充undefined

以上程式碼片段中列印“undefined”，因為最初的掃描中已經收集了變數foo。VM查詢所有foo的值。

在一些地方回丟擲錯誤和另外地方使用undefined js環境下的提升機制。學習一些例子來搞清楚提升。

author: 宣告可以被提升，賦值不會。

11.2 事件冒泡

關於事件冒泡，依據Arun P（一個高階軟體工程）所描述：

“事件冒泡和捕獲在HTML DOM API中事件傳播的兩種方式，當同時註冊事件的父子元素中子元素觸發事件時。事件的傳播方式決定接受事件的元素順序 ”

關於冒泡，事件最先由內部元素捕獲和處理，隨後傳遞給父級元素。關於捕獲，順序相反。我們通常使用addEventListener函式來捆綁事件和事件處理函式

addEventListener('click', handler, useCapture=false);

useCapture是第三個引數的關鍵詞，預設為false。因此，冒泡模式是事件由底部向上傳遞。反之，這是捕獲模式。

冒泡模式：

<div onClick="divHandler()">
    <ul onClick="ulHandler()">
        <li id="foo"></li>
    </ul>
</div>
<script>
function handler() {}
function divHandler() {}
function ulHandler() {}

documnet.getElementById("foo").addEventListener("click", handler)
</script>

點選li元素，事件順序：handler() => ulHandler() => divHandler()

捕獲模式：

document.getElementById("foo").addEventListener("click", handler, true)

點選li元素，事件順序divHandler => ulHandler() => handler()

以上都是基礎的js知識。正如我最初提及的，除了這些，工作經歷和知識、準備對你攻克面試都有幫助。保持學習的習慣，學習最新得技術(es6)，深入js各個方面的學習(如V6、測試等)。一些視訊也可以教會你一些知識。最後，資料結構和演算法的準備也必不可少。Oleksii Trekhleb 的演算法倉庫值得學習

閱讀原文

其他blog;

攻破javascript面試的完美指南【譯】

攻破javascript面試的完美指南(開發者視角)

0. 前言

1.熟悉js函式

2.熟悉bind、apply和call

一個應急呼叫例項

3.熟悉js作用域(閉包)

4.熟悉this(全域性域、函式域、物件域)

5.熟悉物件(freeze、seal屬性)

6.熟悉原型繼承

7.熟悉callback和promise

8.熟悉正則表達

9.熟悉map、reduce和filter

9.1 map

9.2 reduce

9.3 filter

10. 熟悉錯誤(異常)處理模式

11. 其他(提升機制和事件冒泡)

11.1 提升機制

11.2 事件冒泡

攻破javascript面試的完美指南【譯】

【譯】理解JavaScript閉包——新手指南

【譯】理解 Javascript 執行上下文和執行棧

【譯】JavaScript的工作原理：引擎，執行時和呼叫堆疊的概述

【譯】Javascript: call()、apply() 和 bind()

【譯】理解 JavaScript 中的 undefined

【譯】用JavaScript寫一個區塊鏈

【譯】PWA泛指南

【譯】JavaScript async / await：好的部分，陷阱和如何使用

【譯】寫好JavaScript條件語句的5個技巧

【譯】JavaScript的工作原理：記憶體管理和4種常見的記憶體洩漏

【譯】理解JavaScript中的柯里化

【譯】理解Javascript函式執行—呼叫棧、事件迴圈、任務等

【譯】終極指南：變數提升、作用域和閉包

【譯】iOS藍芽程式設計指南 -- 核心藍芽概述

【譯】理解非同步 JavaScript-學習JavaScript是怎麼工作的

【譯】GraphQL 初學者指南

【譯】Spring官方教程：使用STS的入門指南

【譯】JavaScript的工作原理：事件迴圈及非同步程式設計的出現和 5 種更好的 async/await 程式設計方式

【譯】OpenResty C 編碼風格指南

攻破javascript面試的完美指南【譯】

攻破javascript面試的完美指南(開發者視角)

0. 前言

1.熟悉js函式

2.熟悉bind、apply和call

一個應急呼叫例項

3.熟悉js作用域(閉包)

4.熟悉this(全域性域、函式域、物件域)

5.熟悉物件(freeze、seal屬性)

6.熟悉原型繼承

7.熟悉callback和promise

8.熟悉正則表達

9.熟悉map、reduce和filter

9.1 map

9.2 reduce

9.3 filter

10. 熟悉錯誤(異常)處理模式

11. 其他(提升機制和事件冒泡)

11.1 提升機制

11.2 事件冒泡

相關推薦