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

把知識(shí)串一串，連成線，形成體系，從此走上大神之路啦，道路可能會(huì)曲折一點(diǎn)，但是咸魚(yú)也要翻一翻身撒～

何為變量提升？

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

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

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

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

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

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

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

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

這道題怎么去解決呢，這就涉及到了JS的隱式轉(zhuǎn)換相關(guān)的知識(shí)了。

對(duì)于原始類型：Undefined、Null、Boolean、Number、String

1，加號(hào)運(yùn)算符(+)：若后面的是數(shù)字，會(huì)直接相加得出結(jié)果，如 1 + 1 = 2；若后面的是字符類型，則會(huì)進(jìn)行字符拼接，如 1 + "1" = "11"。
2，減號(hào)運(yùn)算符(-)：若后面的是數(shù)字，會(huì)直接相減得出結(jié)果；若后面的字符，則會(huì)將其轉(zhuǎn)為數(shù)字類型，然后相減得出結(jié)果。
3，==運(yùn)算負(fù)責(zé)：

undefined == null，結(jié)果為true

String == Boolean，需要將兩個(gè)操作數(shù)同時(shí)轉(zhuǎn)化為Number

String/Boolean == Number，需要將 String/Boolean 轉(zhuǎn)為 Number

對(duì)于對(duì)象類型：Object
當(dāng)對(duì)象與一個(gè)非對(duì)象進(jìn)行比較等操作時(shí)，需要先將其轉(zhuǎn)化為原始類型：首先調(diào)用 valueOf()，若結(jié)果是原始類型，則返回結(jié)果；若結(jié)果不是原始類型，則繼續(xù)調(diào)用toSring()，返回其結(jié)果，若結(jié)果依然不是原始類型，則會(huì)拋出一個(gè)類型錯(cuò)誤。

這里有一道很火的面試題，就是利用對(duì)象的類型轉(zhuǎn)換原理：

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

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

以上大概為基礎(chǔ)的隱式轉(zhuǎn)換規(guī)則，可能不太完善，歡迎大家留言補(bǔ)充。好，有了這些準(zhǔn)備后，讓我們?cè)賮?lái)看下一開(kāi)始的題目，讓我們來(lái)逐步拆解：

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

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

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

func()();   // 1

這里函數(shù)func在調(diào)用后，其作用域并沒(méi)有被銷毀，依然可以被函數(shù)fn訪問(wèn)，所以輸出為1。
這里有道很經(jīng)典的面試題

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

哈哈，有點(diǎn)繞，有興趣的同學(xué)可以簡(jiǎn)單看下。

在實(shí)際開(kāi)發(fā)或面試中，我們經(jīng)常會(huì)碰到克隆的問(wèn)題，這里我們簡(jiǎn)單的總結(jié)下。

淺克隆就是復(fù)制對(duì)象的引用，復(fù)制后的對(duì)象指向的都是同一個(gè)對(duì)象的引用，彼此之間的操作會(huì)互相影響

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

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

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

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

方法一

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

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

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

方法二

對(duì)于數(shù)組，我們可以利用Array的slice和concat方法來(lái)實(shí)現(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復(fù)制方法：$.extend(true, target, obj)

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

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

關(guān)于this指向的問(wèn)題，這里是有一定判斷方法的：

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

我們?cè)趯?shí)際判斷的時(shí)候，需要將二者結(jié)合起來(lái)。

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

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

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

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

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

這里有兩點(diǎn)點(diǎn)需要注意：
1，對(duì)象屬性引用鏈中只有上一層或者說(shuō)最后一層在調(diào)用位置中起作用，舉例如下：

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

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

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

obj1.obj2.foo();  // 10

2，隱式丟失：被隱式綁定的函數(shù)會(huì)丟失綁定對(duì)象，也就是說(shuō)它會(huì)應(yīng)用默認(rèn)綁定，從而把this綁定到全局對(duì)象或者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的一個(gè)引用，但是實(shí)際上，它引用的是foo函數(shù)本身，所以此時(shí)print()其實(shí)是一個(gè)不帶任何修飾的函數(shù)調(diào)用，應(yīng)用了隱式綁定。

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

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

var obj = {
    a:1
}

foo.call(obj);  // 1

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

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

這里有關(guān)call、apply、bind的具體用法就不再一一闡述了，后面的部分會(huì)詳細(xì)講解。

這是最后一條this的綁定規(guī)則，使用new來(lái)調(diào)用函數(shù)，或者說(shuō)發(fā)生構(gòu)造函數(shù)調(diào)用時(shí)，會(huì)執(zhí)行下面的操作：

創(chuàng)建(或者說(shuō)構(gòu)造)一個(gè)全新的對(duì)象

這個(gè)新對(duì)象會(huì)被執(zhí)行[[Prototype]]連接

這個(gè)新對(duì)象會(huì)綁定到函數(shù)調(diào)用的this

如果函數(shù)沒(méi)有返回其他對(duì)象，那么new表達(dá)式中的函數(shù)調(diào)用會(huì)自動(dòng)返回這個(gè)新對(duì)象。

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

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

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

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

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

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

如果都不是的話，使用默認(rèn)綁定

定義：

使用一個(gè)指定的this值和多帶帶給出的一個(gè)或多個(gè)參數(shù)來(lái)調(diào)用一個(gè)函數(shù)

語(yǔ)法：

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

參數(shù)：

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

舉例如下：

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

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

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

實(shí)現(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 方法接受的是若干個(gè)參數(shù)列表，而 apply 接收的是一個(gè)包含多個(gè)參數(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)建一個(gè)新的函數(shù)，在調(diào)用時(shí)設(shè)置this關(guān)鍵字為提供的值。并在調(diào)用新函數(shù)時(shí)，將給定參數(shù)列表作為原函數(shù)的參數(shù)序列的前若干項(xiàng)。

語(yǔ)法：

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

參數(shù)：

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

舉例如下：

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

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

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

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

方法一：new Promise

// 聲明Promise后會(huì)立即執(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相當(dāng)于一個(gè)狀態(tài)機(jī)，具有三種狀態(tài)：

pending

fulfilled

rejected

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

(2) 當(dāng)調(diào)用resolve(成功)，會(huì)由pending => fulfilled

(3) 當(dāng)調(diào)用reject(失敗)，會(huì)由pending => rejected

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

1，Promise.prototype.then()

then() 方法返回一個(gè)  Promise 。它最多需要有兩個(gè)參數(shù)：Promise 的成功 (onFulfilled) 和 失敗情況 (onRejected) 的回調(diào)函數(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)方法返回一個(gè)以給定值解析后的Promise 對(duì)象。但如果這個(gè)值是個(gè)thenable（即帶有then方法），返回的promise會(huì)“跟隨”這個(gè)thenable的對(duì)象，采用它的最終狀態(tài)（指resolved/rejected/pending/settled）；如果傳入的value本身就是promise對(duì)象，則該對(duì)象作為Promise.resolve方法的返回值返回；否則以該值為成功狀態(tài)返回promise對(duì)象。

舉例如下：

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

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

// hello
// Promise?{: undefined}

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

3，Promise.reject()

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

舉例如下：

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) 方法返回一個(gè) promise，一旦迭代器中的某個(gè)promise解決或拒絕，返回的 promise就會(huì)解決或拒絕。

舉例如下：

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) 方法返回一個(gè) Promise 實(shí)例，此實(shí)例在 iterable 參數(shù)內(nèi)所有的 promise 都“完成（resolved）”或參數(shù)中不包含 promise 時(shí)回調(diào)完成（resolve）；如果參數(shù)中  promise 有一個(gè)失敗（rejected），此實(shí)例回調(diào)失敗（reject），失敗原因的是第一個(gè)失敗 promise 的結(jié)果。

舉例如下：

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() 方法返回一個(gè)Promise。在promise結(jié)束時(shí)，無(wú)論結(jié)果是fulfilled或者是rejected，都會(huì)執(zhí)行指定的回調(diào)函數(shù)。這為在Promise是否成功完成后都需要執(zhí)行的代碼提供了一種方式。
這避免了同樣的語(yǔ)句需要在then()和catch()中各寫(xiě)一次的情況。

舉例如下：

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

7，Promise.prototype.catch()

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

只要Promsie狀態(tài)更改為reject或者拋出異常，都會(huì)進(jìn)入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單線程運(yùn)行時(shí)不會(huì)阻塞的一種機(jī)制，也就是我們經(jīng)常使用異步的原理。

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

宏任務(wù)：

script全部代碼

setTimeout

setInterval

setImmediate (Node獨(dú)有)

I/O

UI rendering (瀏覽器獨(dú)有)

微任務(wù)：

process.nextTick (Node獨(dú)有)

Promise

Object.observe

MutationObserver

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

過(guò)程如下：

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

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

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

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

舉例如下：

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: []

打印結(jié)果：1

step2

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

setTimeout屬于宏任務(wù)，所以：

Stack Queue: [setTimeout]

Macrotask Queue: [callback1]

Microtask Queue: []

step3

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

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

Macrotask Queue: [callback1]

Microtask Queue: [callback2]

step4

console.log("script end");

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

打印結(jié)果：script end

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

打印順序依次為：promise1、promise2

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

打印結(jié)果：setTimeout

所以最終結(jié)果為：script start、script end、promise1、promise2、setTimeout

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

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