在網上找到一篇文章，裡面有一道面試題，考察了包括變數定義提升、this指標指向、運算子優先順序、原型、繼承、全域性變數汙染、物件屬性及原型屬性優先順序等許多知識點。
而就其中宣告提前相關的知識，我覺得也十分有參考價值：

function Foo() {
    getName = function () { alert (1); };
    return this;
}
Foo.getName = function () { alert (2);};
Foo.prototype.getName = function () { alert (3);};
var getName = function () { alert (4);};
function getName() { alert (5);}

// 請寫出以下輸出結果：
Foo.getName();
getName(); // 宣告提前
Foo().getName();
getName();
new Foo.getName();
new Foo().getName();
new new Foo().getName();
 

這道題的答案是：2、4、1、1、2、3、3。

這裡考察宣告提前的題目在程式碼中已經標出，這裡宣告getName方法的兩個語句：

var getName = function () { alert (4) };
function getName() { alert (5) }

實際上在解析的時候是這樣的順序：

function getName() { alert (5) }
var getName;
getName = function () { alert (4) };

如果我們在程式碼中間再加兩個斷點：
getName(); // 5
var getName = function () { alert (4) };
getName(); // 4
function getName() { alert (5) }
 

在第一次getName時，function的宣告和var的宣告都被提前到了第一次getName的前面，而getName的賦值操作並不會提前，單純使用var的宣告也不會覆蓋function所定義的變數，因此第一次getName輸出的是function宣告的5； 而第二次getName則是發生在賦值語句的後面，因此輸出的結果是4，所以實際程式碼的執行順序是這樣：

function getName() { alert (5) }
var getName;
getName(); // 5
getName = function () { alert (4) };
getName(); // 4

2、瀏覽器儲存

localStorage，sessionStorage和cookie的區別

共同點：都是儲存在瀏覽器端、僅同源可用的儲存方式
1.資料儲存方面
•cookie資料始終在同源的http請求中攜帶（即使不需要），即cookie在瀏覽器和伺服器間來回傳遞。cookie資料還有路徑（path）的概念，可以限制cookie只屬於某個路徑下
•sessionStorage和localStorage不會自動把資料傳送給伺服器，僅在本地儲存。
2.儲存資料大小
•儲存大小限制也不同，cookie資料不能超過4K，同時因為每次http請求都會攜帶cookie、所以cookie只適合儲存很小的資料，如會話標識。
•sessionStorage和localStorage雖然也有儲存大小的限制，但比cookie大得多，可以達到5M或更大
3.資料儲存有效期
•sessionStorage：僅在當前瀏覽器視窗關閉之前有效；
•localStorage：始終有效，視窗或瀏覽器關閉也一直儲存，本地儲存，因此用作持久資料；
•cookie：只在設定的cookie過期時間之前有效，即使視窗關閉或瀏覽器關閉
4.作用域不同
•sessionStorage不在不同的瀏覽器視窗中共享，即使是同一個頁面；
•localstorage在所有同源視窗中都是共享的；也就是說只要瀏覽器不關閉，資料仍然存在
•cookie: 也是在所有同源視窗中都是共享的.也就是說只要瀏覽器不關閉，資料仍然存在

3、跨域

不久我寫了一個帖子，對同源策略及各種跨域的方式進行了總結： 什麼是跨域，為什麼瀏覽器會禁止跨域，及其引起的發散性學習

4、Promise的使用及原理

Promise是ES6加入的新特性，用於更合理的解決非同步程式設計問題，關於用法阮一峰老師在ECMAScript 6 入門中作出了詳細的說明，在此就不重複了。

30分鐘，讓你徹底明白Promise原理

上面這篇文章則是對Promise的原理進行的詳細的說明，在這裡，我提取最簡單的Promise實現方式來對Promise的原理進行說明：

function Promise(fn) {
    var value = null,
        callbacks = [];  // callbacks為陣列，因為可能同時有很多個回撥

    this.then = function (onFulfilled) {
        callbacks.push(onFulfilled);
    };

    function resolve(value) {
        callbacks.forEach(function (callback) {
            callback(value);
        });
    }

    fn(resolve);
}

首先， then 裡面宣告的單個或多個函式，將被推入 callbacks 列表，在Promise例項呼叫 resolve 方法時遍歷呼叫，並傳入 resolve 方法中傳入的引數值。

以下，使用一個簡單的例子來對Promise的執行流程進行分析：
fu

nctionm func () {
	return new Promise(function (resolve) {
		setTimeout(function () {
			resolve('complete')
		}, 3000);
	})
}

func().then(function (res) {
	console.log(res); // complete
})

func 函式的定義是返回了一個Promise例項，宣告例項時傳入的回撥函式加入了一個 resolve 引數（這個 resolve 引數在Promise中的 fn(resolve) 定義中獲取 resolve 的函式實體），回撥中執行了一個非同步操作，在非同步操作完成的回撥中執行了 resolve 函式。

再看執行步驟， func 函式返回了一個Promise例項，例項則可以執行Promise建構函式中定義的 then 方法， then 方法中傳入的回撥則會在 resolve （即非同步操作完成後）執行，由此實現了通過 then 方法執行非同步操作完成後回撥的功能。

5、JavaScript事件迴圈機制

原文中貼出的文章具有很大參考價值，先貼個連結： 詳解JavaScript中的Event Loop（事件迴圈）機制 。

JavaScript是一種單執行緒、非阻塞的語言，這是由於它當初的設計就是用於和瀏覽器互動的：
• 單執行緒： JavaScript 設計為單執行緒的原因是，最開始它最大的作用就是和 DOM 進行互動，試想一下，如果 JavaScript 是多執行緒的，那麼當兩個執行緒同時對 DOM 進行一項操作，例如一個向其新增事件，而另一個刪除了這個 DOM ，此時該如何處理呢？因此，為了保證不會 發生類似於這個例子中的情景， JavaScript 選擇只用一個主執行緒來執行程式碼，這樣就保證了程式執行的一致性。
• 非阻塞：當代碼需要進行一項非同步任務（無法立刻返回結果，需要花一定時間才能返回的任務，如I/O事件）的時候，主執行緒會掛起（ pending ）這個任務，然後在非同步任務返回結果的時候再根據一定規則去執行相應的回撥。而 JavaScript 實現非同步操作的方法就是使用Event Loop。

setTimeout(function () {
    console.log(1);
});

new Promise(function(resolve,reject){
    console.log(2)
    resolve(3)
}).then(function(val){
    console.log(val);
})

下面通過一段程式碼來分析這個問題，首先 setTimeout 和 Promise 中的 then 回撥都是非同步方法，而 new Promise 則是一個同步操作，所以這段程式碼應該首先會立即輸出 2 ； JavaScript 將非同步方法分為了 marco task （巨集任務：包括 setTimeout 和 setInterval 等）和 micro task （微任務：包括 new Promise 等），在 JavaScript 的執行棧中，如果同時存在到期的巨集任務和微任務，則會將微任務先全部執行，再執行第一個巨集任務，因此，兩個非同步操作中 then 的回撥會率先執行，然後才執行 setTimeout 的回撥，因此會依次輸出3、1，所以最終輸出的結果就是2、3、1。

6、ES6作用域及let和var的區別

這個問題阮一峰老師在ECMAScript 6 入門中的 let 和 const 命令 章節對這個問題作出了詳細的說明，下面提取一些我認為關鍵的點進行講解。

ES6引入了使用 {} 包裹的程式碼區域作為塊級作用域的宣告方式，其效果與ES5中 function 宣告的函式所生成的函式作用域具有相同的效果，作用域外部不能訪問作用域內部宣告的函式或變數，這樣的宣告在ES6中對於包括 for () {} 、 if () {} 等大括號包裹的程式碼塊中都會生效，生成一個單獨的作用域。

ES6新增的 let 宣告變數的方式相比 var 具有以下幾個重要特點：
• let 宣告的變數只在作用域內有效，如下方程式碼， if 宣告生成了一個塊級作用域，在這個作用域內宣告的變數在作用域外部無法訪問，假如訪問會產生錯誤：

if (true) {
	let me = 'handsome boy';
}
console.log(me); // ReferenceError
• let 宣告的變數與 var 不同，不會產生變數提升，如下方程式碼，在宣告之前輸出程式碼，會產生錯誤： 
// var 的情況
console.log(foo); // 輸出undefined
var foo = 2;

// let 的情況
console.log(bar); // ReferenceError
let bar = 2;
• let 的宣告方式不允許重複宣告，如重複宣告會報錯，而 var 宣告變數時，後宣告的語句會對先宣告的語句進行覆蓋： 
// 報錯
function func() {
  let a = 10;
  var a = 1;
}

// 報錯
function func() {
  let a = 10;
  let a = 1;
}
• 只要塊級作用域記憶體在 let 命令，它所宣告的變數就“繫結”（ binding ）這個區域，不再受外部的影響，這個特性稱為 暫時性死區 。 
var tmp = 123;

if (true) {
  tmp = 'abc'; // ReferenceError
  let tmp;
}

7、閉包

待補充

8、原型及原型鏈

待補充

9、瀏覽器的迴流與重繪 (Reflow & Repaint)

待補充

10、JS物件的深複製

一般的思路就是遞迴解決，對不同的資料型別做不同的處理：

function deepCopy (obj) {
  let result = {}
  for (let key in obj) {
    if (obj[key] instanceof Object || obj[key] instanceof Array) {
      result[key] = deepCopy(result[key])
    } else {
      result[key] = obj[key]
    }
  }
  return result
}

這個只能複製內部有陣列、物件或其他基礎資料型別的物件，假如有一些像 RegExp 、 Date 這樣的複雜物件複製的結果就是一個 {} ，無法正確進行復制，因為沒有對這些特殊物件進行單獨的處理。若

如果要複製的物件資料結構較為簡單，沒有複雜物件的資料，那麼可以用最簡便的方法：
let cloneResult = JSON.parse(JSON.stringify(targetObj))

瀏覽器相關

1、瀏覽器從載入到渲染的過程，比如輸入一個網址到顯示頁面的過程

載入過程：
•瀏覽器根據 DNS 伺服器解析得到域名的 IP 地址
•向這個 IP 的機器傳送 HTTP 請求
•伺服器收到、處理並返回 HTTP 請求
•瀏覽器得到返回內容

2、效能優化

待補充

Vue

1、元件間通訊方式

Vue的官方文件對元件間的通訊方式做了詳細的說明：cn.vuejs.org

父元件向子元件傳輸
• 最常用的方式是在子元件標籤上傳入資料，在子元件內部用 props 接收：

// 父元件
<template>
  <children name="boy"></children>
</template>

// 子元件：children
export default {
  props: {
    name: String
  }
}

• 還可以在子元件中用 this.$parent 訪問父元件的例項，不過官方文件有這樣一段文字，很好的說明了 $parent 的意義：節制地使用 $parent 和 $children —— 它們的主要目的是作為訪問元件的應急方法。更推薦用 props 和 events 實現父子元件通訊。

子元件向父元件傳輸
• 一般在子元件中使用 this.$emit(‘eventName’, ‘data’) ，然後在父元件中的子元件標籤上監聽 eventName 事件，並在引數中獲取傳過來的值。

// 子元件
export default {
  mounted () {
    this.$emit('mounted', 'Children is mounted.')
  }
}

// 父元件
<template>
  <children @mounted="mountedHandle"></children>
</template>

<script>
export default {
  methods: {
    mountedHandle (data) {
      console.log(data) // Children is mounted.
    }
  }
}
</script>

• 與 $parent 一樣，在父元件中可以通過訪問 this.$children 來訪問元件的所有子元件例項。

總結
以上就是我要說的內容，希望以上的內容可以幫助到正在默默艱辛的大家，希望大家在往後的工作與面試中一切順利。
那如何學習才能快速入門並精通呢？
當真正開始學習的時候難免不知道從哪入手，導致效率低下影響繼續學習的信心。
但最重要的是不知道哪些技術需要重點掌握，學習時頻繁踩坑，最終浪費大量時間，所以有一套實用的視訊課程用來跟著學習是非常有必要的。
本次給大家推薦一個免費的學習群，裡面概括移動應用網站開發，css，html，webpack，vue node angular以及面試資源等。
對web開發技術感興趣的同學，歡迎加入Q群：866109386，不管你是小白還是大牛我都歡迎，還有大牛整理的一套高效率學習路線和教程與您免費分享，同時每天更新視訊資料。
最後，祝大家早日學有所成，拿到滿意offer，快速升職加薪，走上人生巔峰。