eval("alert(123)")

最后，函數體是因為函數在創建時，本質上是 new Function(...) 得到的，其中需要傳入一個文本形式的參數作為函數體。

function fn(x) {
    console.log(x + 5);
}

var fn = new Function("x", "console.log(x + 5)");

原文鏈接：http://www.cnblogs.com/wangfupeng1988/p/3987563.html)

理解執行上下文環境

知道什么是自由變量

上下文的準備工作及區別（全局與函數）

function fn(x) {
    console.log(arguments);  // [10]
    console.log(x);  // 10
}
fn(10);

在函數體的語句執行之前，arguments 變量和函數參數都已經被賦值。函數每調用一次都會產生一個新的執行上下文環境，因為不同的調用可能會有不同的參數。

自由變量：當前作用域內使用了外部作用域的變量（使用了不是在當前作用域內定義的變量）。

函數在定義的時候（不是調用的時候），就已經確定了函數體內部自由變量的作用域。

var a = 10;
function fn() {
    console.log(a); // a 是自由變量，函數創建時，就確定了 a 要取值的作用域
}

function bar(f) {
    var a = 20;
    f(); // 打印 10, 而不是 20
}
bar(fn);

全局代碼的上下文環境數據內容為：

如果代碼段是函數體，那么需要在此（全局準備內容）基礎上附加：

通俗執行上下文環境定義：在執行代碼之前，把將要用到的所有的變量都事先拿出來，有的直接賦值了，有的先用 undefined 占個空。

原文鏈接：http://www.cnblogs.com/wangfupeng1988/p/3988422.html)
新增參考：http://mp.weixin.qq.com/s/xML...

掌握 this 的幾種指向問題。

函數中 this 取值是在函數被調用的時候確定的，而不是在定義時。

所謂構造函數就是用來 new 對象的函數。嚴格來說，所有函數都可以 new 一個對象，但是有些函數的定義不是為了作為構造函數。另外注意，構造函數的函數名第一個字母大寫（規則約定）。例如：Object, Array, Function 等。

function Foo() {
    this.name = "tanya";
    this.year = 1975;

    console.log(this);  // Foo { name: "tanya", year: 1975 }
}

var f1 = new Foo();
console.log(f1.name);  // tanya
console.log(f1.year);  // 1975

以上代碼中，如果函數作為構造函數用，那么其中 this 就代表它即將 new 出來的對象， 這里 this 表示 f1。

如果函數作為對象的一個屬性時，并且作為對象的一個屬性被調用時，函數中的 this 指向該對象。

var obj = {
    x: 10,
    fn: function() {
        console.log(this);    //  Object { x: 10, fn: function }
        console.log(this.x);  // 10
    }
}

obj.fn();

如果 fn 函數不是作為 obj 的一個屬性被調用，會是什么結果？

var obj = {
    x: 10,
    fn: function() {
        console.log(this);    //  Window {top: Window, ...}
        console.log(this.x);  // undefined
    }
}

var fn1 = obj.fn;
fn1();

如上代碼，如果 fn 函數被賦值到了另一個變量中，并沒有作為 obj 的一個屬性被調用，那么 this 的值就是 window，this.x 為 undefined。

當一個函數被 call 或 apply 調用時，this 的值就取傳入的對象的值。

var obj = {
    x: 10
};

var fn = function() {
    console.log(this);  // Object {x: 10}
    console.log(this.x);
}

fn.call(obj);

在全局環境下，this 永遠是 window：

console.log(this === window);  // true

普通函數在調用時，其中 this 也是 window：

var x = 10;

var fn = function() {
    console.log(this);    // Window {top: Window ...}
    console.log(this.x);  // 10
}

fn();

注意下面的情況：

var obj = {
    x: 10,
    fn: function() {
        function f() {
            console.log(this);    // Window {top: Window ...}
            console.log(this.x);  // 10
        }
        f();
    }
};

obj.fn();

雖然函數 f 是在 obj.fn 內部定義的，但它仍然是一個普通函數，this 指向 window。

Function.prototype.bind() 的作用是將當前函數與指定對象綁定，并返回一個新函數，這個函數無論以什么樣的方式調用，其 this 始終指向綁定的對象。

var obj = {};
function test() {
    console.log(this === obj);
}

var testObj = test.bind(obj);
test(); // false
testObj(); // true

箭頭函數沒有自己的 this 綁定。箭頭函數中使用的 this，指的是直接包含它的那個函數或函數表達式中的 this。

var obj = {
    test: function () {
        var arrow = () => {
            console.log(this === obj);
        }

        arrow();
    }
}

obj.test(); // true
// 這里 arrow 函數中的 this 指的是 test 函數中的 this，
// 而 test 函數中的 this 指的是 obj

另外需要注意的是，箭頭函數不能用 new 調用，不能 bind() 到某個對象(雖然 bind() 方法調用沒問題，但是不會產生預期效果)。不管在什么情況下使用箭頭函數，它本身是沒有綁定 this 的，它用的是直接外層函數(即包含它的最近的一層函數或函數表達式)綁定的 this。

原文鏈接：http://www.cnblogs.com/wangfupeng1988/p/3989357.html)

理解執行上下文棧概念

了解壓棧、出棧過程。

執行全局代碼時，會產生一個執行上下文環境，每次調用函數都又會產生執行上下文環境。當函數調用完成時，這個上下文環境以及其中的數據都會被清除，再重新回到全局上下文環境。處于活動狀態的執行上下文環境只有一個。

可以把這看成是一個壓棧出棧的過程，俗稱執行上下文棧。

藍色背景表示活動狀態
白色背景表示非活動狀態

var a = 10,                         // 1、進入全局上下文環境
    fn,
    bar = function(x) {
        var b = 5;
        fn(x+b);// 用 B 表示        // 3、進入 fn 函數上下文環境
    }

fn = function(y) {
    var c = 5;
    console.log(y + c);
}
// 用 A 表示
bar(10);                           // 2、進入 bar 函數上下文環境

第一步：在代碼執行之前，首先創建全局上下文環境：

全局上下文環境（全局代碼執行前）

然后是代碼執行，執行到 A 之前，全局上下文環境中的變量都在執行過程中被賦值：

全局上下文環境變為

第二步：執行到 A 之后，調用 bar 函數。

跳轉到 bar 函數內部，執行函數體語句之前，會創建一個新的執行上下文環境：

bar 函數執行上下文環境

并將這個執行上下文環境壓棧，設置為活動狀態：

第三步：執行到 B，又調用了 fn 函數，在執行函數體語句之前，會創建 fn 函數的執行上下文環境，并壓棧，設置為活動狀態：

第四步：待 B 執行完畢，即 fn 函數執行完畢后，此次調用 fn 所生成的上下文環境出棧，并且被銷毀（已經用完了，就要及時銷毀，釋放內存）。

第五步：同理，待 A 執行完畢，即 bar 函數執行完畢后，調用 bar 函數所生成的上下文環境出棧，并且被銷毀（已經用完了，就要及時銷毀，釋放內存）。

原文鏈接：http://www.cnblogs.com/wangfupeng1988/p/3991151.html)
參考：https://github.com/mqyqingfen...

理解作用域。

作用域是個很抽象的概念，類似于一個“地盤”。

上圖中，全局代碼和 fn 、bar 兩個函數都會形成一個作用域。

在作用域中存在上下級關系，上下級關系的確定就看函數是在哪個作用域下創建的。例如：fn 作用域下創建了 bar 函數，那么 “fn 作用域” 就是 “bar 作用域” 的上級。

作用域最大的用處就是隔離變量，不同作用域下同名變量不會有沖突。例如以上代碼中，三個作用域下都聲明了“a” 這個變量，但是他們不會有沖突。各自作用域下，用各自的“a”。

原文鏈接：http://www.cnblogs.com/wangfupeng1988/p/3991995.html)

理解作用域和上下文環境。

除了全局作用域外，每個函數都會創建自己的作用域，作用域在函數定義時就已經確定了，而不是在函數調用時確定的。

下面按照程序執行的順序，一步一步加上上下文環境：

第一步，在加載程序時，就已經確定了全局上下文環境，并隨著程序的執行而對變量賦值：

第二步，程序執行到 A ，調用 fn(10) ，此時生成此次調用 fn 函數時的上下文環境，壓棧，并將此上下文環境設置為活動狀態。

第三步，執行到 B 時，調用 bar(100) ，生成此次調用的上下文環境，壓棧，并設置為活動狀態。

第四步，執行完 B ，bar(100) 調用完成。則 bar(100) 上下文環境被銷毀。接著執行 C，調用 bar(200)，則又生成 bar(200 )的上下文環境，壓棧，設置為活動狀態。

第五步，執行完 C ，則 bar(200) 調用結束，其上下文環境被銷毀。此時會回到 fn(10) 上下文環境，變為活動狀態。

第六步，執行完 A，fn(10) 執行完成之后，fn(10) 上下文環境被銷毀，全局上下文環境又回到活動狀態。

最后把以上過程連起來看看：

作用域只是一個“地盤”，一個抽象的概念，其中沒有變量，要通過作用域對應的執行上下文環境來獲取變量的值。同一個作用域下，不同的調用會產生不同的執行上下文環境，繼而產生不同變量的值。所以，作用域中變量的值是在執行過程中產生的確定的，而作用域卻是在函數創建時就確定了。

所以，如果要找一個作用域下某個變量的值，就需要找到這個作用域對應的執行上下文環境，再在其中尋找變量的值。

原文鏈接：http://www.cnblogs.com/wangfupeng1988/p/3992795.html)

理解作用域鏈。

什么是自由變量？

在 A 作用域中使用變量 x，卻沒有在 A 作用域中聲明（在其他作用域中聲明的），對于 A 作用域來說，x就是一個自由變量。

如下：

var x = 10;

function fn() {
    var b = 20;
    console.log(x + b); // x 在這里就是一個自由變量
}

那么，在 fn 函數中，取自由變量 x 的值時，要到哪個作用域中去取？——要到創建 fn 函數的那個作用域中取。無論 fn 函數在哪里調用。

作用域鏈：在當前作用域中進行查找，如果沒有，就在創建函數作用域中查找自由變量，如果沒有，就去創建該作用域的函數所在作用域查找，直到全局作用域為止。這個在作用域中查找的路線，稱之為作用域鏈。

我們拿文字總結一下取自由變量時的這個“作用域鏈”過程：（假設a是自由量）

第一步，現在當前作用域查找a，如果有則獲取并結束。如果沒有則繼續；

第二步，如果當前作用域是全局作用域，則證明a未定義，結束；否則繼續；

第三步，（不是全局作用域，那就是函數作用域）將創建該函數的作用域作為當前作用域；

第四步，跳轉到第一步。

示例代碼：

以上代碼中：fn() 返回的是 bar 函數 ，賦值給 x 。執行 x()，即執行 bar 函數代碼。取 b 的值時，直接在 fn 作用域取出。取 a 的值時，試圖在 fn 作用域取，但是取不到，只能轉向創建 fn 的那個作用域中去查找，結果找到了。

原文鏈接：http://www.cnblogs.com/wangfupeng1988/p/3992795.html)
參考：https://stackoverflow.com/que...

知道閉包產生的條件及常見用法

理解閉包是什么

函數嵌套

內部函數引用了外部函數的數據（可以是變量或者函數）

換句話說：簡單地訪問函數的詞法作用域（靜態作用域）以外的自由變量會創建一個閉包。

function fn () { // 外部函數
    var max = 10;

    function bar (x) { // 內部函數
        if (x > max) { // 引用了外部函數變量 max
            console.log(x)
        }
    }
}

fn()

說明：紅色框中，收起部分為 object: { max: undefined }

那么，閉包到底是什么？

閉包是包含被內部函數引用的在外部函數中定義的數據的對象（可以是變量或者函數）。簡單點說是：包含被引用變量（函數）的對象

將函數作為另一個函數的返回值（函數不必為了被稱為閉包而返回，看看閉包產生的條件）

將函數作為實參傳遞給另一個函數調用

將函數作為另一個函數的返回值

function fn () {
    var max = 10;

    function bar () {
        return max++;
    }

    return bar; // 作為另一個函數的返回值
}

var bar = fn();
console.log(bar()); // 10
console.log(bar()); // 11
console.log(bar()); // 12

從中我們可以看出閉包的作用：

使函數內部的變量 max 在函數 fn 執行完后，讓然存活在內存中（其他變量已經釋放）

讓函數 fn 外部可以讀取到函數內部的數據 max（變量或者函數）

也可以看出閉包的缺點：

內存泄漏（Memory Leak）是指程序中己動態分配的堆內存由于某種原因程序未釋放或無法釋放，造成系統內存的浪費，導致程序運行速度減慢甚至系統崩潰等嚴重后果。
——百度百科

函數 fn 執行完之后，被函數 bar 引用的變量沒有釋放，占用內存時間會變長

可能造成內存泄漏（memory leaks）

那對應的解決方案是：

只需要在不使用函數時，置空就行了 bar = null;

將函數作為實參傳遞給另一個函數調用

function fn () {
    var max = 1;
    var interval;
    interval = setInterval(function () { // 將匿名函數作為 setInterval 函數的參數調用
        if (max > 100) clearInterval(interval)
        console.log(max++);
    }, 1000)
}

fn();

注意圖中 Closure (fn)，fn 指的是查找引用變量時的作用域。

代碼一

function fn () { // Closure (fn) { x: 1 }
    var x = 1;
    function foo () { // Closure (foo) { y: 2 }
        var y = 2;
        console.log(x + y)
        return function bar () {
            var z = 3;
            console.log(x + y + z)
        }
    }
}

var foo = fn();
var bar = foo();
bar();

從上圖中可以看到，閉包所在作用域平行于引用變量（x, y）所在的作用域。

代碼二（繼續說明閉包所在作用域）

function fn () {
    var x = 1;
    function foo () {
        console.log(x++);
    }

    function bar () {
        console.log(x++);
    }

    return {
        foo: foo,
        bar: bar
    }
}

var o = fn();
var foo = o.foo;
var bar = o.bar;

foo(); // x: 1
bar(); // x: 2

從代碼輸出可以看到，閉包并不是屬于某一個內部函數，也恰好印證了上面說的。

感謝王福朋

內容絕大部分來自王福朋 - 博客園 —— 《 深入理解javascript原型和閉包
》，我只是重畫了大部分的圖和對少量內容進行了補充（比如：this 章節的“新增”、閉包部分）

希望在一篇文章中進行概括說明這些內容（并不是說分開不好），只是這樣讀起來更加順暢，找起來比較方便（離線也可以哦，已上傳到 Github上，歡迎 star、fork）；

自己也可以針對相關內容進行擴充（不用看到一些額外的相關知識就收藏一個網址^_^，你也可以把這篇文章轉到你的賬號下，進行擴充，說明來源即可）；

如有錯誤，歡迎指出；

如有疑問，歡迎討論；

如果看到相關的新的知識，會添加到對應主題下面（以“新增”標明）；

如果你看到這里沒有提到的相關內容，也可以給我鏈接，我會進行補充，并貼上你的大名；

撒花，待續，期待你們的加入……