摘要：這個過程中發(fā)生了綁定，舉例如下小明小明，優(yōu)先級這里不再一一舉例對比優(yōu)先級，直接給出結論綁定顯示綁定隱式綁定默認綁定，有興趣的同學可以實際比對一下。

把知識串一串，連成線，形成體系，從此走上大神之路啦，道路可能會曲折一點，但是咸魚也要翻一翻身撒～

何為變量提升？

在JavaScript中，函數(shù)及變量的聲明都將被提升到函數(shù)的最頂部 (函數(shù)聲明的優(yōu)先級高于變量聲明的優(yōu)先級)

這樣就造成了一種不同于其他語言的現(xiàn)象，初看甚至覺得有些詭異：變量可以先使用再聲明。舉個栗子：

x = 1;
console.log(x);  // 1
var x;

var name = "World!";
(function () {
    if (typeof name === "undefined") {
        var name = "Jack";
        console.log("Goodbye " + name);
    } else {
        console.log("Hello " + name);
    }
})();

// 輸出為 Goodbye Jack

為什么會出現(xiàn)這樣情況呢？

在JavaScript中，變量聲明與賦值的分離，如 var a = 2 這個代碼是分兩步進行的，編譯階段之行變量聲明 var a，在執(zhí)行階段進行賦值 a = 2，于是便造成了了變量聲明提前情況的發(fā)生。

解析：對于第二個例子，由于存在變量提升，所以變量聲明先于if判斷，所以此時 name = undefined，于是便輸出了 Goodbye Jack

前段時間，前端各大博客被一道題刷屏了

++[[]][+[]]+[+[]]==10?

這道題怎么去解決呢，這就涉及到了JS的隱式轉換相關的知識了。

對于原始類型：Undefined、Null、Boolean、Number、String

1，加號運算符(+)：若后面的是數(shù)字，會直接相加得出結果，如 1 + 1 = 2；若后面的是字符類型，則會進行字符拼接，如 1 + "1" = "11"。
2，減號運算符(-)：若后面的是數(shù)字，會直接相減得出結果；若后面的字符，則會將其轉為數(shù)字類型，然后相減得出結果。
3，==運算負責：

undefined == null，結果為true

String == Boolean，需要將兩個操作數(shù)同時轉化為Number

String/Boolean == Number，需要將 String/Boolean 轉為 Number

對于對象類型：Object
當對象與一個非對象進行比較等操作時，需要先將其轉化為原始類型：首先調用 valueOf()，若結果是原始類型，則返回結果；若結果不是原始類型，則繼續(xù)調用toSring()，返回其結果，若結果依然不是原始類型，則會拋出一個類型錯誤。

這里有一道很火的面試題，就是利用對象的類型轉換原理：

a == 1 && a == 2 && a == 3

//答案：
var a = {num : 0};
a.valueOf = function() {
    return ++a.num;
}

以上大概為基礎的隱式轉換規(guī)則，可能不太完善，歡迎大家留言補充。好，有了這些準備后，讓我們再來看下一開始的題目，讓我們來逐步拆解：

1，根據(jù)運算符的優(yōu)先級，我們可以得到：(++[[]][+[]])+[+[]]
2，根據(jù)隱式轉換，我們得到：(++[[]][0])+[0]
3，再次簡化：(++[]) + [0]
4，這個時候就很明朗了，最終劃為字符拼接 "1" + "0" = "10";

簡單的講，閉包就是指有權訪問另一個函數(shù)作用域中的變量的函數(shù)。
MDN 上面這么說：閉包是一種特殊的對象，是函數(shù)和聲明該函數(shù)的詞法環(huán)境的組合。

function func() {
    var a = 1;
    return function fn() {
        console.log(a);
    }
}

func()();   // 1

這里函數(shù)func在調用后，其作用域并沒有被銷毀，依然可以被函數(shù)fn訪問，所以輸出為1。
這里有道很經典的面試題

function fun(n,o){
  console.log(o);
  return {
    fun: function(m){
      return fun(m,n);
    }
  };
}

var a = fun(0);  // ?
a.fun(1);        // ?        
a.fun(2);        // ?
a.fun(3);        // ?

var b = fun(0).fun(1).fun(2).fun(3);  // ?

var c = fun(0).fun(1);  // ?
c.fun(2);        // ?
c.fun(3);        // ?

undefined
0
0
0
undefined, 0, 1, 2
undefined, 0
1
1

哈哈，有點繞，有興趣的同學可以簡單看下。

在實際開發(fā)或面試中，我們經常會碰到克隆的問題，這里我們簡單的總結下。

淺克隆就是復制對象的引用，復制后的對象指向的都是同一個對象的引用，彼此之間的操作會互相影響

var a = [1,2,3];
var b = a;
b[3] = 4;
console.log(a, b);

// [1,2,3,4] [1,2,3,4]

實際開發(fā)中，若需要同步對象的變化，往往用的就是淺克隆，直接復制對象引用即可。

開發(fā)過程中，我們往往需要斷開對象引用，不影響原對象，這個時候我們就用到深克隆了，有如下方法：

方法一

JSON.parse(JSON.stringify())，對于大多數(shù)情況都可以用這種方法解決，一步到位。但是若對象中存在正則表達式類型、函數(shù)類型等的話，會出現(xiàn)問題：會直接丟失相應的值，同時如果對象中存在循環(huán)引用的情況也無法正確處理

let a = {name: "小明"};
let b = JSON.parse(JSON.stringify(a));
b.age = 18;
console.log(a, b);

// {name: "小明"} {name: "小明", age: 18}

方法二

對于數(shù)組，我們可以利用Array的slice和concat方法來實現(xiàn)深克隆

let a = [1,2,3];
let b = a.slice();
b.push(4);
console.log(a, b);

// [1,2,3]  [1,2,3,4]
let a1 = [1,2,3];
let b1 = a.concat(4);
b1.push(5);
console.log(a, b);
// [1,2,3]  [1,2,3,4,5]

方法三

jQuery中的extend復制方法：$.extend(true, target, obj)

let a = {name: "小明"};
let b = {}
$.extend(true, b, a);
b.age = 18;
console.log(a, b);

// {name: "小明"} {name: "小明", age: 18}

關于this指向的問題，這里是有一定判斷方法的：

位置：this實際上是在函數(shù)被調用時發(fā)生的綁定，它指向什么完全取決于函數(shù)在哪里調用
規(guī)則：默認綁定、隱式綁定、顯式綁定、new綁定

我們在實際判斷的時候，需要將二者結合起來。

var name = "小明";
function print() {
    console.log(this.name);  // "小明"
    console.log(this);   //window對象
}
print(); 
// "小明"

解析：print()直接使用不帶任何修飾的函數(shù)引用進行的調用，這個時候只能使用默認綁定規(guī)則，即this指向全局對象，所以此題輸出為："小明"

function foo() {
    console.log(this.a)
}

var obj = {
    a:2,
    foo:foo
}
obj.foo()  // 2

解析：當函數(shù)引用有上下文對象時，隱式綁定規(guī)則會把函數(shù)調用中的this綁定到這個上下文對象。所以此題的this被綁定到obj，于是this.a和obj.a是一樣的。

這里有兩點點需要注意：
1，對象屬性引用鏈中只有上一層或者說最后一層在調用位置中起作用，舉例如下：

function foo() {
    console.log(this.a);
}

var obj2 = {
    a: 10,
    foo: foo
}

var obj1 = {
    a: 2,
    obj2: obj2
}

obj1.obj2.foo();  // 10

2，隱式丟失：被隱式綁定的函數(shù)會丟失綁定對象，也就是說它會應用默認綁定，從而把this綁定到全局對象或者undefined上。舉例如下：

var a = "hello world";

function foo(){
    console.log(this.a)
}

var obj = {
    a:1,
    foo:foo
}

var print = obj.foo;
print();    // hello world

解析：雖然print是obj.foo的一個引用，但是實際上，它引用的是foo函數(shù)本身，所以此時print()其實是一個不帶任何修飾的函數(shù)調用，應用了隱式綁定。

利用call(),apply(),bind()強制綁定this指向的我們稱之為顯示綁定，舉例如下：

function foo() {
    console.log(this.a);
}

var obj = {
    a:1
}

foo.call(obj);  // 1

這里有一點需要注意：顯示綁定依然無法解決上面提到的丟失綁定問題。舉例如下：

var a = "hello world";

function foo(){
    console.log(this.a)
}

var obj = {
    a:1,
    foo:foo
}

var print = obj.foo;
print.bind(obj)
print();    // hello world

這里有關call、apply、bind的具體用法就不再一一闡述了，后面的部分會詳細講解。

這是最后一條this的綁定規(guī)則，使用new來調用函數(shù)，或者說發(fā)生構造函數(shù)調用時，會執(zhí)行下面的操作：

創(chuàng)建(或者說構造)一個全新的對象

這個新對象會被執(zhí)行[[Prototype]]連接

這個新對象會綁定到函數(shù)調用的this

如果函數(shù)沒有返回其他對象，那么new表達式中的函數(shù)調用會自動返回這個新對象。

這個過程中發(fā)生了this綁定，舉例如下：

function Person(name) {
    this.name = name;
}
var p = new Person("小明");
console.log(p.name);    // 小明

這里不再一一舉例對比優(yōu)先級，直接給出結論：new綁定 > 顯示綁定 > 隱式綁定 > 默認綁定，有興趣的同學可以實際比對一下。
常規(guī)this指向判斷流程：

函數(shù)是否在new中調用(new綁定) ？ 如果是的話this綁定的就是新創(chuàng)建的對象

函數(shù)是否通過call、apply、bind(顯示綁定) ? 如果是的話，this綁定的是指定的對象

函數(shù)是否在某個上下文對象中被調用(隱時綁定) ? 如果是的話，this綁定的是那個上下文對象

如果都不是的話，使用默認綁定

定義：

使用一個指定的this值和多帶帶給出的一個或多個參數(shù)來調用一個函數(shù)

語法：

fun.call(thisArg, arg1, arg2, ...)

參數(shù)：

thisArg：(1) 不傳，或者傳null，undefined， 函數(shù)中的this指向window對象
 (2) 傳遞另一個函數(shù)的函數(shù)名，函數(shù)中的this指向這個函數(shù)的引用，并不一定是該函數(shù)執(zhí)行時真正的this值 
(3) 值為原始值(數(shù)字，字符串，布爾值)的this會指向該原始值的自動包裝對象，如 String、Number、Boolean（4）傳遞一個對象，函數(shù)中的this指向這個對象
arg1, arg2, ...：指定的參數(shù)列表

舉例如下：

var obj = {a: "小明"};

function print() {
    console.log(this);
}

print.call(obj);  // {a: "小明"}

實現(xiàn)call方法：

Function.prototype.selfCall = function(context, ...args) {
    let fn = this;
    context || (context = window);
    if (typeof fn !== "function") throw new TypeError("this is not function");
    let caller = Symbol("caller");
    context[caller] = fn;
    let res = context[caller](...args);
    delete context[caller];
    return res;
}

apply()方法與call()方法相似，區(qū)別在于：call 方法接受的是若干個參數(shù)列表，而 apply 接收的是一個包含多個參數(shù)的數(shù)組。

舉例如下：

var arr = [34,5,3,6,54,6,-67,5,7,6,-8,687];

Math.max.apply(Math, arr);  // 687
Math.min.call(Math, ...arr);   // -67

定義：

bind()方法創(chuàng)建一個新的函數(shù)，在調用時設置this關鍵字為提供的值。并在調用新函數(shù)時，將給定參數(shù)列表作為原函數(shù)的參數(shù)序列的前若干項。

語法：

function.bind(thisArg[, arg1[, arg2[, ...]]])

參數(shù)：

thisArg：調用綁定函數(shù)時作為this參數(shù)傳遞給目標函數(shù)的值
  arg1, arg2, ...：當目標函數(shù)被調用時，預先添加到綁定函數(shù)的參數(shù)列表中的參數(shù)。

舉例如下：

function print() {
    console.log(this);
}

let obj = {name: "小明"};
let fn = print.bind(obj);

fn();    // {name: "小明"}

Promise是JS異步編程中的重要概念，異步抽象處理對象，是目前比較流行Javascript異步編程解決方案之一

方法一：new Promise

// 聲明Promise后會立即執(zhí)行
var promise = new Promise(function(resolve, reject) {
    resolve("Hello");
})
console.log(promise);   // Promise{: "Hello"}

方法二：直接創(chuàng)建

var promise = Promise.resolve("Hello");
console.log(promise);   // Promise{: "Hello"}

promise相當于一個狀態(tài)機，具有三種狀態(tài)：

pending

fulfilled

rejected

(1) promise 對象初始化狀態(tài)為 pending

(2) 當調用resolve(成功)，會由pending => fulfilled

(3) 當調用reject(失敗)，會由pending => rejected

注：promsie狀態(tài) 只能由 pending => fulfilled/rejected, 一旦修改就不能再變

1，Promise.prototype.then()

then() 方法返回一個  Promise 。它最多需要有兩個參數(shù)：Promise 的成功 (onFulfilled) 和 失敗情況 (onRejected) 的回調函數(shù)。

舉例如下：

var promise = new Promise((resolve, reject) => {
    // 成功
    resolve("hello");
});

promise.then((res) => {
    console.log(res);    // hello
    return Promise.reject("error");
}).then((success) => {
    console.log("success", success);
}, (err) => {
    console.log("error", err);    // error error
});

2，Promise.resolve()

Promise.resolve(value)方法返回一個以給定值解析后的Promise 對象。但如果這個值是個thenable（即帶有then方法），返回的promise會“跟隨”這個thenable的對象，采用它的最終狀態(tài)（指resolved/rejected/pending/settled）；如果傳入的value本身就是promise對象，則該對象作為Promise.resolve方法的返回值返回；否則以該值為成功狀態(tài)返回promise對象。

舉例如下：

var promise = Promise.resolve("hello");

promise.then((res) => {
    console.log(res);
});

// hello
// Promise?{: undefined}

此時promise的狀態(tài)為題fulfilled

3，Promise.reject()

Promise.reject(reason)方法返回一個帶有拒絕原因reason參數(shù)的Promise對象。

舉例如下：

var promise = Promise.reject("error");

promise.then((res) => {
    console.log("success", res);
}, (res) => {
    console.log("error", res);    // error error
});

4，Promise.race()

Promise.race(iterable) 方法返回一個 promise，一旦迭代器中的某個promise解決或拒絕，返回的 promise就會解決或拒絕。

舉例如下：

var promise1 = new Promise(function(resolve, reject) {
    setTimeout(resolve, 500, "one");
});

var promise2 = new Promise(function(resolve, reject) {
    setTimeout(resolve, 100, "two");
});

Promise.race([promise1, promise2]).then(function(value) {
  console.log(value);    // two
});

5，Promise.all()

Promise.all(iterable) 方法返回一個 Promise 實例，此實例在 iterable 參數(shù)內所有的 promise 都“完成（resolved）”或參數(shù)中不包含 promise 時回調完成（resolve）；如果參數(shù)中  promise 有一個失敗（rejected），此實例回調失敗（reject），失敗原因的是第一個失敗 promise 的結果。

舉例如下：

var promise1 = Promise.resolve(3);
var promise2 = 42;
var promise3 = new Promise(function(resolve, reject) {
  setTimeout(resolve, 100, "foo");
});

Promise.all([promise1, promise2, promise3]).then(function(values) {
  console.log(values);    // [3, 42, "foo"]
});

6，Promise.prototype.finally()

finally() 方法返回一個Promise。在promise結束時，無論結果是fulfilled或者是rejected，都會執(zhí)行指定的回調函數(shù)。這為在Promise是否成功完成后都需要執(zhí)行的代碼提供了一種方式。
這避免了同樣的語句需要在then()和catch()中各寫一次的情況。

舉例如下：

var promise = Promise.resolve("Hello");
promise.then((res) => {
    console.log(res);   // Hello
}).finally((res) => {
    console.log("finally");     // finally
}) 

7，Promise.prototype.catch()

catch() 方法返回一個Promise，并且處理拒絕的情況，捕獲前面then中發(fā)送的異常

只要Promsie狀態(tài)更改為reject或者拋出異常，都會進入catch方法。舉例如下：

var promise1 = Promise.reject("Hello");
promise1.then((res) => {
    console.log("success" + res);
}).catch((res) => {
    console.log("catch " + res);     // catch Hello
})

Event Loop即事件循環(huán)，是指瀏覽器或Node的一種解決javaScript單線程運行時不會阻塞的一種機制，也就是我們經常使用異步的原理。

在JavaScript中，任務被分為兩種，一種宏任務（MacroTask）也叫Task，一種叫微任務（MicroTask）。

宏任務：

script全部代碼

setTimeout

setInterval

setImmediate (Node獨有)

I/O

UI rendering (瀏覽器獨有)

微任務：

process.nextTick (Node獨有)

Promise

Object.observe

MutationObserver

瀏覽器中的事件循環(huán)機制是什么樣子呢？不廢話，直接上圖：

過程如下：

執(zhí)行全局Script同步代碼，這些同步代碼有一些是同步語句，有一些是異步語句（比如setTimeout等）；

全局Script代碼執(zhí)行完畢后，調用棧Stack會清空；

檢查微任務隊列是否為空，若不為空，則取出位于隊首的回調任務，放入調用棧Stack中執(zhí)行，隊列長度減1。如此循環(huán)往復，直至微任務隊列為空

微任務隊列為空后，檢查宏任務隊列是否為空，若不為空，則取出宏隊列中位于隊首的任務，放入Stack中執(zhí)行，隊列長度減1。如此循環(huán)往復，直至宏任務隊列為空

舉例如下：

console.log("script start");

setTimeout(function() {
  console.log("setTimeout");
}, 0);

Promise.resolve().then(function() {
  console.log("promise1");
}).then(function() {
  console.log("promise2");
});
console.log("script end");

答案如下：

script start、script end、promise1、promise2、setTimeout

解析：
step1

console.log("script start");

Stack Queue: [console]

Macrotask Queue: []

Microtask Queue: []

打印結果：1

step2

setTimeout(function() {
  console.log("setTimeout");
}, 0);

setTimeout屬于宏任務，所以：

Stack Queue: [setTimeout]

Macrotask Queue: [callback1]

Microtask Queue: []

step3

Promise.resolve().then(function() {
  console.log("promise1");
}).then(function() {
  console.log("promise2");
});

promise屬于微任務，所以有：
Stack Queue: [promise]

Macrotask Queue: [callback1]

Microtask Queue: [callback2]

step4

console.log("script end");

同步任務，直接執(zhí)行

打印結果：script end

step5
遍歷微任務隊列：Microtask Queue: [callback2]，執(zhí)行其函數(shù)

打印順序依次為：promise1、promise2

step6
微任務隊列為空后，遍歷宏任務隊列：Macrotask Queue: [callback1]，執(zhí)行其回調函數(shù)

打印結果：setTimeout

所以最終結果為：script start、script end、promise1、promise2、setTimeout

由于時間比較倉促，本次總結還存在著許多遺漏，如JS原型，node環(huán)境下的Event Loop，函數(shù)柯里化等，也有許多理解不到位的情況，日后會逐漸完善與補充。

注：如果文章中有不準確的地方，歡迎大家留言交流。