摘要：拋出的錯(cuò)誤對(duì)象會(huì)被方法回調(diào)函數(shù)接收到命令命令后面是一個(gè)對(duì)象，返回該對(duì)象的結(jié)果。有人將其稱之為宏任務(wù)微任務(wù)，定時(shí)器就屬于宏任務(wù)的范疇。

上一篇 前端面試題-JavaScript（一）, 感興趣的小伙伴也可以移步這里查看 完整版JavaScript面試題，面試題會(huì)不定期更新加進(jìn)去一些個(gè)人工作中遇到的或者認(rèn)為比較重要的東西，后面會(huì)涉及到前端的各個(gè)方面，感興趣的小伙伴可以關(guān)注哦！

如果文章中有出現(xiàn)紕漏、錯(cuò)誤之處，還請(qǐng)看到的小伙伴留言指正，先行謝過

以下 ↓

同步模式

同步模式，又稱阻塞模式。javascript 在默認(rèn)情況下是會(huì)阻塞加載的。當(dāng)前面的 javascript 請(qǐng)求沒有處理和執(zhí)行完時(shí)，會(huì)阻止瀏覽器的后續(xù)處理

異步模式

異步加載又叫非阻塞，瀏覽器在下載執(zhí)行 js 同時(shí)，還會(huì)繼續(xù)進(jìn)行后續(xù)頁面的處理

異步加載 JavaScript

動(dòng)態(tài)添加 script 標(biāo)簽

defer

async

defer屬性和async都是屬于 script 標(biāo)簽上面的屬性，兩者都能實(shí)現(xiàn) JavaScript 的異步加載。不同之處在于：async 在異步加載完成的時(shí)候就馬上開始執(zhí)行了，defer 會(huì)等到 html 加載完畢之后再執(zhí)行

由于瀏覽器的 同源策略，在出現(xiàn) 域名、端口、協(xié)議有一種不一致時(shí)，就會(huì)出現(xiàn)跨域，屬于瀏覽器的一種安全限制。

解決跨域問題有很多種方式，常用的就是以下幾種：

jsonp 跨域：動(dòng)態(tài)創(chuàng)建script，再請(qǐng)求一個(gè)帶參網(wǎng)址實(shí)現(xiàn)跨域通信.缺點(diǎn)就是只能實(shí)現(xiàn) get 一種請(qǐng)求

document.domain + iframe跨域：兩個(gè)頁面都通過js強(qiáng)制設(shè)置document.domain為基礎(chǔ)主域，就實(shí)現(xiàn)了同域.但是僅限主域相同，子域不同的跨域應(yīng)用場(chǎng)景

跨域資源共享（CORS）：只服務(wù)端設(shè)置Access-Control-Allow-Origin即可，前端無須設(shè)置，若要帶cookie請(qǐng)求：前后端都需要設(shè)置

nginx反向代理接口跨域：同源策略是瀏覽器的安全策略，不是HTTP協(xié)議的一部分。服務(wù)器端調(diào)用HTTP接口只是使用HTTP協(xié)議，不會(huì)執(zhí)行JS腳本，不需要同源策略，也就不存在跨越問題

WebSocket協(xié)議跨域

在 JavaScript 中，研究 this 一般都是 this 的指向問題，核心就是 this 永遠(yuǎn)指向最終調(diào)用它的那個(gè)對(duì)象，除非改變 this 指向或者箭頭函數(shù)那種特殊情況

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

test() // window

var obj = {
  foo: function () { console.log(this.bar) },
  bar: 1
};

var foo = obj.foo;
var bar = 2;

obj.foo() // 1
foo() // 2

// 函數(shù)調(diào)用的環(huán)境不同，所得到的結(jié)果也是不一樣的

相同點(diǎn)：三者都可以改變 this 的指向

不同點(diǎn)：

apply 方法傳入兩個(gè)參數(shù)：一個(gè)是作為函數(shù)上下文的對(duì)象，另外一個(gè)是作為函數(shù)參數(shù)所組成的數(shù)組

var obj = {
    name : "sss"
}

function func(firstName, lastName){
    console.log(firstName + " " + this.name + " " + lastName);
}

func.apply(obj, ["A", "B"]);    // A sss B

call 方法第一個(gè)參數(shù)也是作為函數(shù)上下文的對(duì)象，但是后面?zhèn)魅氲氖且粋€(gè)參數(shù)列表，而不是單個(gè)數(shù)組

var obj = {
    name: "sss"
}

function func(firstName, lastName) {
    console.log(firstName + " " + this.name + " " + lastName);
}

func.call(obj, "C", "D");       // C sss D

bind 接受的參數(shù)有兩部分，第一個(gè)參數(shù)是是作為函數(shù)上下文的對(duì)象，第二部分參數(shù)是個(gè)列表，可以接受多個(gè)參數(shù)

var obj = {
    name: "sss"
}

function func() {
    console.log(this.name);
}

var func1 = func.bind(null, "xixi");
func1();

apply、call 方法都會(huì)使函數(shù)立即執(zhí)行，因此它們也可以用來調(diào)用函數(shù)
bind 方法不會(huì)立即執(zhí)行，而是返回一個(gè)改變了上下文 this 后的函數(shù)。而原函數(shù) func 中的 this 并沒有被改變，依舊指向全局對(duì)象 window
bind 在傳遞參數(shù)的時(shí)候會(huì)將自己帶過去的參數(shù)排在原函數(shù)參數(shù)之前

function func(a, b, c) {
    console.log(a, b, c);
}
var func1 = func.bind(this, "xixi");
func1(1,2) // xixi 1 2

內(nèi)存泄漏：是指一塊被分配的內(nèi)存既不能使用，又不能回收，直到瀏覽器進(jìn)程結(jié)束

可能造成內(nèi)存泄漏的操作：

意外的全局變量

閉包

循環(huán)引用

被遺忘的定時(shí)器或者回調(diào)函數(shù)

你可能還需要知道 垃圾回收機(jī)制 此外，高程上面對(duì)垃圾回收機(jī)制的介紹也很全面，有興趣的小伙伴可以看看

事件代理：通俗來說就是將元素的事件委托給它的父級(jí)或者更外級(jí)元素處理
原理：利用事件冒泡機(jī)制實(shí)現(xiàn)的
優(yōu)點(diǎn)：只需要將同類元素的事件委托給父級(jí)或者更外級(jí)的元素，不需要給所有元素都綁定事件，減少內(nèi)存空間占用，提升性能; 動(dòng)態(tài)新增的元素?zé)o需重新綁定事件

AMD和CMD都是為了解決瀏覽器端模塊化問題而產(chǎn)生的，AMD規(guī)范對(duì)應(yīng)的庫函數(shù)有 Require.js，CMD規(guī)范是在國內(nèi)發(fā)展起來的，對(duì)應(yīng)的庫函數(shù)有Sea.js

AMD和CMD最大的區(qū)別是對(duì)依賴模塊的執(zhí)行時(shí)機(jī)處理不同

1、AMD推崇依賴前置，在定義模塊的時(shí)候就要聲明其依賴的模塊 
2、CMD推崇就近依賴，只有在用到某個(gè)模塊的時(shí)候再去require

參考：AMD-中文版 CMD-規(guī)范

ECMAScript 6.0 是 JavaScript 語言的下一代標(biāo)準(zhǔn)

新增的特性：

聲明變量的方式 let const

變量解構(gòu)賦值

字符串新增方法 includes() startsWith() endsWith() 等

數(shù)組新增方法 Array.from() Array.of() entries() keys() values() 等

對(duì)象簡潔寫法以及新增方法 Object.is() Object.assign() entries() keys() values()等

箭頭函數(shù)、rest 參數(shù)、函數(shù)參數(shù)默認(rèn)值等

新的數(shù)據(jù)結(jié)構(gòu)： Set 和 Map

Proxy

Promise對(duì)象

async函數(shù) await命令

Class類

Module 體系 模塊的加載和輸出方式

了解更多，參考 ES6入門-阮一峰

ES6 允許使用“箭頭”（=>）定義函數(shù)

var f = v => v;

// 等同于
var f = function (v) {
  return v;
}

注意點(diǎn)：

函數(shù)體內(nèi)的 this 對(duì)象，就是定義時(shí)所在的對(duì)象，而不是使用時(shí)所在的對(duì)象

不可以當(dāng)作構(gòu)造函數(shù)，也就是說，不可以使用 new 命令，否則會(huì)拋出一個(gè)錯(cuò)誤

不可以使用 arguments 對(duì)象，該對(duì)象在函數(shù)體內(nèi)不存在。如果要用，可以用 rest 參數(shù)代替

Promise 是異步編程的一種解決方案，比傳統(tǒng)的解決方案——回調(diào)函數(shù)和事件——更合理和更強(qiáng)大.所謂Promise，簡單說就是一個(gè)容器，里面保存著某個(gè)未來才會(huì)結(jié)束的事件（通常是一個(gè)異步操作）的結(jié)果 --ES6入門-阮一峰
Promise 對(duì)象代表一個(gè)異步操作，有三種狀態(tài)：pending（進(jìn)行中）、fulfilled（已成功）和 rejected（已失敗）。只有異步操作的結(jié)果，可以決定當(dāng)前是哪一種狀態(tài)，任何其他操作都無法改變這個(gè)狀態(tài)

特點(diǎn)：

對(duì)象的狀態(tài)不受外界影響

一旦狀態(tài)改變，就不會(huì)再變，任何時(shí)候都可以得到這個(gè)結(jié)果

Promise 新建后就會(huì)立即執(zhí)行

const promise = new Promise(function(resolve, reject) {
  // ... some code

  if (/* 異步操作成功 */){
    resolve(value);
  } else {
    reject(error);
  }
})

Promise實(shí)例生成以后，可以用then方法分別指定resolved狀態(tài)和rejected狀態(tài)的回調(diào)函數(shù)

promise.then(function(value) {
  // success
}, function(error) {
  // failure
})

then 方法返回的是一個(gè)新的Promise實(shí)例
Promise.prototype.catch 用于指定發(fā)生錯(cuò)誤時(shí)的回調(diào)函數(shù),具有“冒泡”性質(zhì)，會(huì)一直向后傳遞，直到被捕獲為止。也就是說，錯(cuò)誤總是會(huì)被下一個(gè)catch語句捕獲

getJSON("/post/1.json").then(function(post) {
  return getJSON(post.commentURL);
}).then(function(comments) {
  // some code
}).catch(function(error) {
  // 處理前面三個(gè)Promise產(chǎn)生的錯(cuò)誤
});

catch 方法返回的還是一個(gè) Promise 對(duì)象，因此后面還可以接著調(diào)用 then 方法

出去上述方法，Promise還有其他用法，小伙伴們可以在這里查看大佬寫的文章 ES6入門-阮一峰

async 函數(shù)是什么？一句話，它就是 Generator 函數(shù)的語法糖

了解Generator函數(shù)的小伙伴，這里 傳送門

async 特點(diǎn)：

async 函數(shù)返回一個(gè) Promise 對(duì)象，可以使用 then  方法添加回調(diào)函數(shù)。當(dāng)函數(shù)執(zhí)行的時(shí)候，一旦遇到 await 就會(huì)先返回，等到異步操作完成，再接著執(zhí)行函數(shù)體內(nèi)后面的語句
async 函數(shù)內(nèi)部 return 語句返回的值，會(huì)成為 then 方法回調(diào)函數(shù)的參數(shù)
async 函數(shù)返回的 Promise 對(duì)象，必須等到內(nèi)部所有 await 命令后面的 Promise 對(duì)象執(zhí)行完，才會(huì)發(fā)生狀態(tài)改變，除非遇到 return 語句或者拋出錯(cuò)誤
async 函數(shù)內(nèi)部拋出錯(cuò)誤，會(huì)導(dǎo)致返回的 Promise 對(duì)象變?yōu)?reject 狀態(tài)。拋出的錯(cuò)誤對(duì)象會(huì)被 catch 方法回調(diào)函數(shù)接收到

function timeout(ms) {
  return new Promise((resolve) => {
    setTimeout(resolve, ms);
  });
}

async function asyncPrint(value, ms) {
  await timeout(ms);
  console.log(value);
}

asyncPrint("hello world", 50);

await 命令: await 命令后面是一個(gè) Promise 對(duì)象，返回該對(duì)象的結(jié)果。如果不是 Promise 對(duì)象，就直接返回對(duì)應(yīng)的值

async function f() {
  // 等同于
  // return 123;
  return await 123;
}

f().then(v => console.log(v))
// 123

await 命令后面是一個(gè)thenable對(duì)象（即定義then方法的對(duì)象），那么await會(huì)將其等同于 Promise 對(duì)象.也就是說就算一個(gè)對(duì)象不是Promise對(duì)象，但是只要它有then這個(gè)方法， await 也會(huì)將它等同于Promise對(duì)象

使用注意點(diǎn)：

await 命令后面的 Promise 對(duì)象，運(yùn)行結(jié)果可能是 rejected，所以最好把 await 命令放在 try...catch 代碼塊中

多個(gè) await 命令后面的異步操作，如果不存在繼發(fā)關(guān)系，最好讓它們同時(shí)觸發(fā)

await 命令只能用在 async 函數(shù)之中，如果用在普通函數(shù)，就會(huì)報(bào)錯(cuò)

了解更多，請(qǐng)點(diǎn)擊 這里

export 與 export default 均可用于導(dǎo)出常量、函數(shù)、文件、模塊等
在一個(gè)文件或模塊中，export、import 可以有多個(gè)，export default 僅有一個(gè)
通過 export 方式導(dǎo)出，在導(dǎo)入時(shí)要加 { }，export default 則不需要
使用 export default命令，為模塊指定默認(rèn)輸出，這樣就不需要知道所要加載模塊的變量名; export 加載的時(shí)候需要知道加載模塊的變量名
export default 命令的本質(zhì)是將后面的值，賦給 default 變量，所以可以直接將一個(gè)值寫在 export default 之后

參見 雅虎14條前端性能優(yōu)化

首選明確兩點(diǎn)：

JavaScript 是單線程語言
JavaScript 的 Event Loop 是 JS 的執(zhí)行機(jī)制, 也就是事件循環(huán)

console.log(1)
    
setTimeout(function(){
    console.log(2)
},0)

console.log(3)

// 1 3 2

JavaScript 將任務(wù)分為同步任務(wù)和異步任務(wù)，執(zhí)行機(jī)制就是先執(zhí)行同步任務(wù)，將同步任務(wù)加入到主線程，遇到異步任務(wù)就先加入到 event table ，當(dāng)所有的同步任務(wù)執(zhí)行完畢，如果有可執(zhí)行的異步任務(wù)，再將其加入到主線程中執(zhí)行

視頻詳解，移步 這里

setTimeout(function(){console.log(1);},0);
new Promise(function(resolve){
     console.log(2);
     for(var i = 0; i < 10000; i++){
         i == 99 && resolve();
     }
 }).then(function(){
     console.log(3)
 });
 
 console.log(4);
 
 // 2 4 3 1

在異步任務(wù)中，定時(shí)器也屬于特殊的存在。有人將其稱之為 宏任務(wù)、微任務(wù)，定時(shí)器就屬于宏任務(wù)的范疇。

參考 JS引擎的執(zhí)行機(jī)制

總結(jié)的過程，自己確實(shí)也獲益頗多，感謝前行的小伙伴。

GitHub完整版面試題，歡迎小伙伴們star關(guān)注

預(yù)祝大家都能找到自己滿意的工作

以上