10個JavaScript難點

譯者按：能夠讀懂這篇部落格的JavaScript開發者，運氣不會太差...

原文: 10 JavaScript concepts every Node.js programmer must master
譯者: Fundebug

為了保證可讀性，本文采用意譯而非直譯，并且對示例代碼進行了大量修改。另外，本文版權歸原作者所有，翻譯僅用于學習。

1. 立即執行函數

立即執行函數，即Immediately Invoked Function Expression (IIFE)，正如它的名字，就是建立函數的同時立即執行。它沒有綁定任何事件，也無需等待任何異步操作：

(function() {
     // 代碼
     // ...
})();

function(){…}是一個匿名函數，包圍它的一對括号将其轉換為一個表達式，緊跟其後的一對括号調用了這個函數。立即執行函數也可以了解為立即調用一個匿名函數。立即執行函數最常見的應用場景就是：将var變量的作用域限制于你們函數内，這樣可以避免命名沖突。

2. 閉包

對于閉包(closure)，當外部函數傳回之後，内部函數依然可以通路外部函數的變量。

function f1()
{
    var N = 0; // N是f1函數的局部變量
    
    function f2() // f2是f1函數的内部函數，是閉包
    {
        N += 1; // 内部函數f2中使用了外部函數f1中的變量N
        console.log(N);
    }

    return f2;
}

var result = f1();

result(); // 輸出1
result(); // 輸出2
result(); // 輸出3

代碼中，外部函數f1隻執行了一次，變量N設為0，并将内部函數f2指派給了變量result。由于外部函數f1已經執行完畢，其内部變量N應該在記憶體中被清除，然而事實并不是這樣：我們每次調用result的時候，發現變量N一直在記憶體中，并且在累加。為什麼呢？這就是閉包的神奇之處了！

3. 使用閉包定義私有變量

通常，JavaScript開發者使用下劃線作為私有變量的字首。但是實際上，這些變量依然可以被通路和修改，并非真正的私有變量。這時，使用閉包可以定義真正的私有變量：

function Product() {

    var name;

    this.setName = function(value) {
        name = value;
    };

    this.getName = function() {
        return name;
    };
}

var p = new Product();
p.setName("Fundebug");

console.log(p.name); // 輸出undefined
console.log(p.getName()); // 輸出Fundebug

代碼中，對象p的的name屬性為私有屬性，使用p.name不能直接通路。

4. prototype

每個JavaScript構造函數都有一個prototype屬性，用于設定所有執行個體對象需要共享的屬性和方法。prototype屬性不能列舉。JavaScript僅支援通過prototype屬性進行繼承屬性和方法。

function Rectangle(x, y)
{
    this._length = x;
    this._breadth = y;
}

Rectangle.prototype.getDimensions = function()
{
    return {
        length: this._length,
        breadth: this._breadth
    };
};

var x = new Rectangle(3, 4);
var y = new Rectangle(4, 3);

console.log(x.getDimensions()); // { length: 3, breadth: 4 }
console.log(y.getDimensions()); // { length: 4, breadth: 3 }

代碼中，x和y都是構造函數Rectangle建立的對象執行個體，它們通過prototype繼承了getDimensions方法。

5. 子產品化

JavaScript并非子產品化程式設計語言，至少ES6落地之前都不是。然而對于一個複雜的Web應用，子產品化程式設計是一個最基本的要求。這時，可以使用立即執行函數來實作子產品化，正如很多JS庫比如

jQuery

以及我們

都是這樣實作的。

var module = (function() {
    var N = 5;

    function print(x) {
        console.log("The result is: " + x);
    }

    function add(a) {
        var x = a + N;
        print(x);
    }

    return {
        description: "This is description",
        add: add
    };
})();


console.log(module.description); // 輸出"this is description" 

module.add(5); // 輸出“The result is: 10”

所謂子產品化，就是根據需要控制子產品内屬性與方法的可通路性，即私有或者公開。在代碼中，module為一個獨立的子產品，N為其私有屬性，print為其私有方法，decription為其公有屬性，add為其共有方法。

6. 變量提升

JavaScript會将所有變量和函數聲明移動到它的作用域的最前面，這就是所謂的變量提升(Hoisting)。也就是說，無論你在什麼地方聲明變量和函數，解釋器都會将它們移動到作用域的最前面。是以我們可以先使用變量和函數，而後聲明它們。

但是，僅僅是變量聲明被提升了，而變量指派不會被提升。如果你不明白這一點，有時則會出錯：

console.log(y);  // 輸出undefined

y = 2; // 初始化y

上面的代碼等價于下面的代碼：

var y;  // 聲明y

console.log(y);  // 輸出undefined

y = 2; // 初始化y

為了避免BUG，開發者應該在每個作用域開始時聲明變量和函數。

7. 柯裡化

柯裡化，即Currying，可以是函數變得更加靈活。我們可以一次性傳入多個參數調用它；也可以隻傳入一部分參數來調用它，讓它傳回一個函數去處理剩下的參數。

var add = function(x) {
    return function(y) {
        return x + y;
    };
};

console.log(add(1)(1)); // 輸出2

var add1 = add(1);
console.log(add1(1)); // 輸出2

var add10 = add(10);
console.log(add10(1)); // 輸出11

代碼中，我們可以一次性傳入2個1作為參數add(1)(1)，也可以傳入1個參數之後擷取add1與add10函數，這樣使用起來非常靈活。

8. apply, call與bind方法

JavaScript開發者有必要了解apply、call與bind方法的不同點。它們的共同點是第一個參數都是this，即函數運作時依賴的上下文。

三者之中，call方法是最簡單的，它等價于指定this值調用函數：

var user = {
    name: "Rahul Mhatre",
    whatIsYourName: function() {
        console.log(this.name);
    }
};

user.whatIsYourName(); // 輸出"Rahul Mhatre",

var user2 = {
    name: "Neha Sampat"
};

user.whatIsYourName.call(user2); // 輸出"Neha Sampat"

apply方法與call方法類似。兩者唯一的不同點在于，apply方法使用數組指定參數，而call方法每個參數單獨需要指定：

apply(thisArg, [argsArray])
call(thisArg, arg1, arg2, …)

var user = {
    greet: "Hello!",
    greetUser: function(userName) {
        console.log(this.greet + " " + userName);
    }
};

var greet1 = {
    greet: "Hola"
};

user.greetUser.call(greet1, "Rahul"); // 輸出"Hola Rahul"
user.greetUser.apply(greet1, ["Rahul"]); // 輸出"Hola Rahul"

使用bind方法，可以為函數綁定this值，然後作為一個新的函數傳回：

var user = {
     greet: "Hello!",
     greetUser: function(userName) {
     console.log(this.greet + " " + userName);
     }
};

var greetHola = user.greetUser.bind({greet: "Hola"});
var greetBonjour = user.greetUser.bind({greet: "Bonjour"});

greetHola("Rahul") // 輸出"Hola Rahul"
greetBonjour("Rahul") // 輸出"Bonjour Rahul"

9. Memoization

Memoization用于優化比較耗時的計算，通過将計算結果緩存到記憶體中，這樣對于同樣的輸入值，下次隻需要中記憶體中讀取結果。

function memoizeFunction(func)
{
    var cache = {};
    return function()
    {
        var key = arguments[0];
        if (cache[key])
        {
            return cache[key];
        }
        else
        {
            var val = func.apply(this, arguments);
            cache[key] = val;
            return val;
        }
    };
}


var fibonacci = memoizeFunction(function(n)
{
    return (n === 0 || n === 1) ? n : fibonacci(n - 1) + fibonacci(n - 2);
});

console.log(fibonacci(100)); // 輸出354224848179262000000
console.log(fibonacci(100)); // 輸出354224848179262000000

代碼中，第2次計算fibonacci(100)則隻需要在記憶體中直接讀取結果。

10. 函數重載

所謂函數重載(method overloading)，就是函數名稱一樣，但是輸入輸出不一樣。或者說，允許某個函數有各種不同輸入，根據不同的輸入，傳回不同的結果。憑直覺，函數重載可以通過if...else或者switch實作，這就不去管它了。jQuery之父John Resig提出了一個非常巧(bian)妙(tai)的方法，利用了閉包。

從效果上來說，people對象的find方法允許3種不同的輸入: 0個參數時，傳回所有人名；1個參數時，根據firstName查找人名并傳回；2個參數時，根據完整的名稱查找人名并傳回。

難點在于，people.find隻能綁定一個函數，那它為何可以處理3種不同的輸入呢？它不可能同時綁定3個函數find0,find1與find2啊！這裡的關鍵在于old屬性。

由addMethod函數的調用順序可知，people.find最終綁定的是find2函數。然而，在綁定find2時，old為find1；同理，綁定find1時，old為find0。3個函數find0,find1與find2就這樣通過閉包連結起來了。

根據addMethod的邏輯，當f.length與arguments.length不比對時，就會去調用old，直到比對為止。

function addMethod(object, name, f)
{　　
    var old = object[name];　　
    object[name] = function()
    {
        // f.length為函數定義時的參數個數
        // arguments.length為函數調用時的參數個數　　　　
        if (f.length === arguments.length)
        {　　
            return f.apply(this, arguments);　　　　
        }
        else if (typeof old === "function")
        {
            return old.apply(this, arguments);　　　　
        }　　
    };
}


// 不傳參數時，傳回所有name
function find0()
{　　
    return this.names;
}


// 傳一個參數時，傳回firstName比對的name
function find1(firstName)
{　　
    var result = [];　　
    for (var i = 0; i < this.names.length; i++)
    {　　　　
        if (this.names[i].indexOf(firstName) === 0)
        {　　　　　　
            result.push(this.names[i]);　　　　
        }　　
    }　　
    return result;
}


// 傳兩個參數時，傳回firstName和lastName都比對的name
function find2(firstName, lastName)
{　
    var result = [];　　
    for (var i = 0; i < this.names.length; i++)
    {　　　　
        if (this.names[i] === (firstName + " " + lastName))
        {　　　　　　
            result.push(this.names[i]);　　　　
        }　　
    }　　
    return result;
}


var people = {　　
    names: ["Dean Edwards", "Alex Russell", "Dean Tom"]
};


addMethod(people, "find", find0);
addMethod(people, "find", find1);
addMethod(people, "find", find2);


console.log(people.find()); // 輸出["Dean Edwards", "Alex Russell", "Dean Tom"]
console.log(people.find("Dean")); // 輸出["Dean Edwards", "Dean Tom"]
console.log(people.find("Dean", "Edwards")); // 輸出["Dean Edwards"]

參考連結

關于Fundebug

專注于JavaScript、微信小程式、微信小遊戲、支付寶小程式、React Native、Node.js和Java實時BUG監控。自從2016年雙十一正式上線，Fundebug累計處理了6億+錯誤事件，得到了Google、360、金山軟體等衆多知名使用者的認可。歡迎免費試用！

版權聲明

轉載時請注明作者

以及本文位址：

https://blog.fundebug.com/2017/07/17/10-javascript-difficulties/

10個JavaScript難點

1. 立即執行函數

2. 閉包

3. 使用閉包定義私有變量

4. prototype

5. 子產品化

6. 變量提升

7. 柯裡化

8. apply, call與bind方法

9. Memoization

10. 函數重載

參考連結

關于Fundebug

版權聲明

繼續閱讀

主流浏覽器四大綜合性能測試

JavaScript自學筆記【4】函數的聲明與調用目錄二、函數的聲明三、函數的調用

請求逾時VUE axios重新再次請求

nodejs微信開發---授權登入+擷取使用者資訊微信網頁授權

debian9更新4.9.0核心到4.19.2核心過程

Javascript建構Bingo卡片遊戲

JavaScript的那些坑之事件代理事件代理事件階段

javascript的for (var i in data)慎用javascript中的for (var i in data)謹慎用

tab滑鼠經過菜單切換

vue （vue2.0）使用總結(從大體結構總結)

vue搭建過程及出現問題

/\B(?=(?:\d{3})+$)/g 一條令人費解的正規表達式

适用于JavaScript的ECMAScript 2020規範向前發展

JS生成uuid的四種方法

layui多任務上傳添加進度條