我希望我知道的七個(gè)JavaScript技巧

如果你是一個(gè)JavaScript新手或僅僅最近才在你的開發(fā)工作中接觸它，你可能感到沮喪。所有的語言都有自己的怪癖（quirks）——但從基于強(qiáng)類型的服務(wù)器端語言轉(zhuǎn)移過來的開發(fā)人員可能會感到困惑。我就曾經(jīng)這樣，幾年前，當(dāng)我被推到了全職JavaScript開發(fā)者的時(shí)候，有很多事情我希望我一開始就知道。在這篇文章中，我將分享一些怪癖，希望我能分享給你一些曾經(jīng)令我頭痛不已的經(jīng)驗(yàn)。這不是一個(gè)完整列表——僅僅是一部分——但希望它讓你看清這門語言的強(qiáng)大之處，可能曾經(jīng)被你認(rèn)為是障礙的東西。

我們將看下列技巧：

• 相等
• 點(diǎn)號vs括號
• 函數(shù)上下文
• 函數(shù)聲明vs函數(shù)表達(dá)式
• 命名vs匿名函數(shù)
• 立即執(zhí)行函數(shù)表達(dá)式
• typeof vs Object.prototype.toString

1.) 相等

C#出身的我非常熟悉==比較運(yùn)算符。值類型（或字符串）當(dāng)有相同值是是相等的。引用類型相等需要有相同的引用。（我們假設(shè)你沒有重載==運(yùn)算符，或?qū)崿F(xiàn)你自己的等值運(yùn)算和GetHashCode方法）我很驚訝為什么JavaScript有兩個(gè)等值運(yùn)算符：==和===。最初我的大部分代碼都是用的==，所以我并不知道當(dāng)我運(yùn)行如下代碼的時(shí)候JavaScript為我做了什么：

var x = 1;

if(x == "1") {
    console.log("YAY! They're equal!");
}

這是黑暗魔法嗎？整數(shù)1是如何和字符串”1”相等的？

在JavaScript中，有相等（==）和嚴(yán)格相等（===）之說。相等運(yùn)算符將強(qiáng)制轉(zhuǎn)換兩邊的操作數(shù)為相同類型后執(zhí)行嚴(yán)格相等比較。所以在上面的例子中，字符串”1”會被轉(zhuǎn)換為整數(shù)1，這個(gè)過程在幕后進(jìn)行，然后與變量x進(jìn)行比較。

嚴(yán)格相等不進(jìn)行類型轉(zhuǎn)換。如果操作數(shù)類型不同（如整數(shù)和字符串），那么他們不全等（嚴(yán)格相等）。

var x = 1;

// 嚴(yán)格平等，類型必須相同
if(x === "1") {
    console.log("Sadly, I'll never write this to the console");
}

if(x === 1) {
    console.log("YES! Strict Equality FTW.")
}

你可能正在考慮可能發(fā)生強(qiáng)制類型轉(zhuǎn)換而引起的各種恐怖問題——假設(shè)你的引用中發(fā)生了這種轉(zhuǎn)換，可能導(dǎo)致你非常困難找到問題出在哪里。這并不奇怪，這也是為什么經(jīng)驗(yàn)豐富的JavaScript開發(fā)者總是建議使用嚴(yán)格相等。

2.) 點(diǎn)號 vs 括號

這取決于你來自其他什么語言，你可能見過或沒見過這種方式（這就是廢話）。

// 獲取person對象的firstName值
var name = person.firstName;

// 獲取數(shù)組的第三個(gè)元素
var theOneWeWant = myArray[2]; // remember, 0-based index不要忘了第一個(gè)元素的索引是0

然而，你知道它也可以使用括號引用對象的成員嗎？比如說：

var name = person["firstName"];

為什么會這樣有用嗎？而你會用點(diǎn)符號的大部分時(shí)間，有幾個(gè)實(shí)例的括號使某些方法可能無法這樣做。例如，我會經(jīng)常重構(gòu)大開關(guān)語句到一個(gè)調(diào)度表，所以這樣的事情：

為什么可以這樣用？你以前可能對使用點(diǎn)更熟悉，有幾個(gè)特例只能用括號表示法。例如，我經(jīng)常會將switch語句重構(gòu)為查找表（速度更快），其實(shí)就像這樣：

var doSomething = function(doWhat) {
    switch(doWhat) {
        case "doThisThing":
            // more code...
        break;
        case "doThatThing":
            // more code...
        break;
        case "doThisOtherThing":
            // more code....
        break;
        // additional cases here, etc.
        default:
            // default behavior
        break;
    }
}

可以轉(zhuǎn)化為像下面這樣：

var thingsWeCanDo = {
    doThisThing      : function() { /* behavior */ },
    doThatThing      : function() { /* behavior */ },
    doThisOtherThing : function() { /* behavior */ },
    default          : function() { /* behavior */ }
};

var doSomething = function(doWhat) {
    var thingToDo = thingsWeCanDo.hasOwnProperty(doWhat) ? doWhat : "default"
    thingsWeCanDo[thingToDo]();
}

使用switch并沒有錯(cuò)誤（并且在許多情況下，如果被迭代多次并且非常關(guān)注性能，switch可能比查找表表現(xiàn)更好）。然而查找表提供了一個(gè)很好的方法來組織和擴(kuò)展代碼，并且括號允許你的屬性延時(shí)求值。

3.) 函數(shù)上下文

已經(jīng)有一些偉大的博客發(fā)表了文章，正確理解了JavaScript中的this上下文（在文章的結(jié)尾我會給出一些不錯(cuò)的鏈接），但它確實(shí)應(yīng)該加到“我希望我知道”的列表。它真的困難看懂代碼并且自信的知道在任何位置this的值——你僅需要學(xué)習(xí)一組規(guī)則。不幸的是，我早起讀到的許多解釋只是增加了我的困惑。因此我試圖簡明扼要的做出解釋。

第一——首先考慮全局情況（Global）

默認(rèn)情況下，直到某些原因改變了執(zhí)行上下文，否則this的值都指向全局對象。在瀏覽器中，那將會是window對象（或在node.js中為global）。

第二——方法中的this值

當(dāng)你有一個(gè)對象，其有一個(gè)函數(shù)成員，沖父對象調(diào)用這方法，this的值將指向父對象。例如：

var marty = {
    firstName: "Marty",
    lastName: "McFly",
    timeTravel: function(year) {
        console.log(this.firstName + " " + this.lastName + " is time traveling to " + year);
    }
}

marty.timeTravel(1955);
// Marty McFly is time traveling to 1955

你可能已經(jīng)知道你能引用marty對象的timeTravel方法并且創(chuàng)建一個(gè)其他對象的新引用。這實(shí)際上是JavaScript非常強(qiáng)大的特色——使我們能夠在不同的實(shí)例上引用行為（調(diào)用函數(shù)）。

var doc = {
    firstName: "Emmett",
    lastName: "Brown",
}

doc.timeTravel = marty.timeTravel;

所以——如果我們調(diào)用doc.timeTravel(1885)將會發(fā)生什么？

doc.timeTravel(1885);
// Emmett Brown is time traveling to 1885

再次——上演黑暗魔法。嗯，并不是真的。記住，當(dāng)你調(diào)用一個(gè)方法的時(shí)候，this上下文是被調(diào)用函數(shù)父的父對象。

當(dāng)我們保存marty.TimeTravel方法的引用然后調(diào)用我們保存的引用時(shí)發(fā)生了什么？讓我們看看：

var getBackInTime = marty.timeTravel;
getBackInTime(2014);
// undefined undefined is time traveling to 2014
為什么是“undefined undefined”？！而不是“Matry McFly”？

讓我們問一個(gè)關(guān)鍵的問題：當(dāng)我們調(diào)用我們的getBackInTime函數(shù)時(shí)父對象/容器對象是什么？當(dāng)getBackIntTime函數(shù)存在于window中時(shí)，我們調(diào)用它作為一個(gè)函數(shù)，而不是一個(gè)對象的方法。當(dāng)我們像這樣調(diào)用一個(gè)函數(shù)——沒有容器對象——this上下文將是全局對象。David Shariff有一個(gè)偉大的描述關(guān)于這：

無論何時(shí)調(diào)用一個(gè)函數(shù)，我們必須立刻查看括號的左邊。如果在括號的左邊存在一個(gè)引用，那么被傳遞個(gè)調(diào)用函數(shù)的this值確定為引用所屬的對象，否則是全絕對象。

由于getBackInTime的this上下文是window——沒有firstName和lastName屬性——這解釋了為什么我們看見“undefined undefined”。

因此我們知道直接調(diào)用一個(gè)函數(shù)——沒有容器對象——this上下文的結(jié)果是全局對象。然而我也說我早就知道我們的getBackInTime函數(shù)存在于window上。我是如何知道的？好的，不像上面我包裹getBackInTime在不同的上下文（我們探討立即執(zhí)行函數(shù)表達(dá)式的時(shí)候），我聲明的任何變量都被添加的window。來自Chrome控制臺的驗(yàn)證：

是時(shí)候討論下this的主要用武之地之一了：訂閱事件處理。

第三（僅僅是#2的擴(kuò)展）——異步調(diào)用方法中的this值

所以，讓我們假裝我們想調(diào)用我們的marty.timeTravel方法當(dāng)有人點(diǎn)擊一個(gè)按鈕時(shí)：

var flux = document.getElementById("flux-capacitor");
flux.addEventListener("click", marty.timeTravel);

在上面的代碼中，當(dāng)用戶點(diǎn)擊按鈕是，我們會看見“undefined undefined is time traveling to [object MouseEvent]”。什么？好——首先，非常明顯的問題是我們沒有給我們的timeTravel方法提供year參數(shù)。反而，我們直接訂閱這方法作為事件處理程序，并且MouseEvent參數(shù)被作為第一個(gè)參數(shù)傳遞個(gè)事件處理程序。這是很容易修復(fù)的，但真正的問題是我們再次見到“undefined undefined”。不要無望——你已經(jīng)知道為什么會發(fā)生這種情況（即使你還沒意識到）。讓我們修改我們的timeTravel函數(shù)，輸出this，從而幫助我們搞清事實(shí)：

marty.timeTravel = function(year) {
    console.log(this.firstName + " " + this.lastName + " is time traveling to " + year);
    console.log(this);
};

現(xiàn)在——當(dāng)我們點(diǎn)擊這按鈕，我們將類似下面的輸出 在你的瀏覽器控制臺：

當(dāng)方法被調(diào)用時(shí)，第二個(gè)console.log輸出出this上下文——它實(shí)際上是我們訂閱事件的按鈕元素。你感到吃驚嗎？就像之前——當(dāng)我們將marty.timeTravel賦值給getBackInTime變量時(shí)——對marty.timeTravel的引用被保存到事件處理程序，并被調(diào)用，但容器對象不再是marty對象。在這種情況下，它將在按鈕實(shí)例的點(diǎn)擊事件中異步調(diào)用。

所以——有可能將this設(shè)置為我們想要的結(jié)果嗎？絕對可以！在這個(gè)例子里，解決方法非常簡單。不在事件處理程序中直接訂閱marty.timeTravel，而是使用匿名函數(shù)作為事件處理程序，并在匿名函數(shù)中調(diào)用marty.timeTravel。這也能修復(fù)year參數(shù)丟失的問題。

flux.addEventListener("click", function(e) {
    marty.timeTravel(someYearValue); 
});

點(diǎn)擊按鈕將會在控制臺輸出類似下面的信息：

成功了！但為什么這樣可以？思考我們是如何調(diào)用timeTravel方法的。在我們按鈕點(diǎn)擊的第一個(gè)例子中，我們在事件處理程序中訂閱方法自身的引用，所以它沒有從父對象marty上調(diào)用。在第二個(gè)例子中，通過this為按鈕元素的匿名函數(shù)，并且當(dāng)我們調(diào)用marty.timeTravel時(shí)，我們從其父對象marty上調(diào)用，所以this為marty。

第四——構(gòu)造函數(shù)中的this值

當(dāng)你用構(gòu)造函數(shù)創(chuàng)建對象實(shí)例時(shí)，函數(shù)內(nèi)部的this值就是新創(chuàng)建的對象。例如：

var TimeTraveler = function(fName, lName) {
    this.firstName = fName;
    this.lastName = lName;
    // Constructor functions return the
    // newly created object for us unless
    // we specifically return something else
};

var marty = new TimeTraveler("Marty", "McFly");
console.log(marty.firstName + " " + marty.lastName);
// Marty McFly

Call，Apply和BindCall

你可能開始疑惑，上面的例子中，沒有語言級別的特性允許我們在運(yùn)行時(shí)指定調(diào)用函數(shù)的this值嗎？你是對的。存在于函數(shù)原型上的call和apply方法允許我們調(diào)用函數(shù)并傳遞this值。

call方法的第一個(gè)參數(shù)是this，后面是被調(diào)用函數(shù)的參數(shù)序列：

someFn.call(this, arg1, arg2, arg3);

apply的第一個(gè)參數(shù)也是this，后面是其余參數(shù)組成的數(shù)組：

someFn.apply(this, [arg1, arg2, arg3]);

我們的doc和marty實(shí)例他們自己能時(shí)間旅行，但einstein（愛因斯坦）需要他們的幫助才能完成時(shí)間旅行。所以讓我們給我們的doc實(shí)例添加一個(gè)方法，以至于doc能幫助einstein完成時(shí)間旅行。

doc.timeTravelFor = function(instance, year) {
    this.timeTravel.call(instance, year);
    // 如果你使用apply使用下面的語法
    // this.timeTravel.apply(instance, [year]);
};

現(xiàn)在它可以傳送Einstein 了：

var einstein = {
    firstName: "Einstein", 
    lastName: "(the dog)"
};
doc.timeTravelFor(einstein, 1985);
// Einstein (the dog) is time traveling to 1985

我知道這個(gè)例子有些牽強(qiáng)，但它足以讓你看到應(yīng)用函數(shù)到其他對象的強(qiáng)大之處。

這種方法還有我們沒有發(fā)現(xiàn)的另一種用處。讓我們給我們的marty實(shí)例添加一個(gè)goHome方法，作為this.timeTravel(1985)的快捷方式。

marty.goHome = function() {
    this.timeTravel(1985);
}

然而，我們知道如果我們訂閱marty.goHome作為按鈕的點(diǎn)擊事件處理程序，this的值將是按鈕——并且不幸的是按鈕沒有timeTravel方法。我們能用上面的方法解決——用個(gè)一匿名函數(shù)作為事件處理程序，并在其內(nèi)部調(diào)用上述方法——但我們有另一個(gè)選擇——bind函數(shù)：

flux.addEventListener("click", marty.goHome.bind(marty));

bind函數(shù)實(shí)際上會返回一個(gè)新函數(shù)，新函數(shù)的this值根據(jù)你提供的參數(shù)設(shè)置。如果你需要支持低版本瀏覽器（例如：ie9以下版本），你可能需要bind函數(shù)的shim（或者，如果你使用jQuery你可以用$.proxy代替，underscore和lodash都提供_.bind方法）。

記住重要一點(diǎn)，如果你直接使用原型上的bind方法，它將創(chuàng)建一個(gè)實(shí)例方法，這將繞過原型方法的優(yōu)點(diǎn)。這不是錯(cuò)誤，做到心里清楚就行了。我寫了關(guān)于這個(gè)問題得更多信息在這里。

4.) 函數(shù)表達(dá)式vs函數(shù)聲明

函數(shù)聲明不需要var關(guān)鍵字。事實(shí)上，如Angus Croll所說：“把他們想象成變量聲明的兄弟有助于理解”。例如：

function timeTravel(year) {
    console.log(this.firstName + " " + this.lastName + " is time traveling to " + year);
} 上面例子里的函數(shù)名字timeTravel不僅在它聲明的在作用域可見，同時(shí)在函數(shù)本身內(nèi)部也是可見的（這對遞歸函數(shù)調(diào)用非常有用）。函數(shù)聲明，本質(zhì)上說其實(shí)就是命名函數(shù)。換句話說，上面函數(shù)的名稱屬性是timeTravel。

函數(shù)表達(dá)式定義一個(gè)函數(shù)并指派給一個(gè)變量。典型應(yīng)用如下：

var someFn = function() {
    console.log("I like to express myself...");
}; 也可以對函數(shù)表達(dá)式命名——然而，不像函數(shù)聲明，命名函數(shù)表達(dá)式的名字僅在它自身函數(shù)體內(nèi)可訪問：

var someFn = function iHazName() {
    console.log("I like to express myself...");
    if(needsMoreExpressing) {
        iHazName(); // 函數(shù)的名字在這里可以訪問
    }
};

// 你可以在這里調(diào)用someFn()，但不能調(diào)用iHazName()
someFn();

討論函數(shù)表達(dá)式和函數(shù)聲明不能不提“hoisting（提升）”——函數(shù)和變量聲明被編譯器移到作用域的頂部。在這里我們無法詳細(xì)解釋hoisting，但你可以讀Ben Cherry和Angus Croll兩個(gè)人的偉大解釋。

5.) 命名vs匿名函數(shù)

基于我們剛才的討論，你可能一進(jìn)猜到“匿名”函數(shù)其實(shí)就是一個(gè)沒有名字的函數(shù)。大多數(shù)JavaScript開發(fā)者能迅速識別瞎買年第一個(gè)參數(shù)為匿名函數(shù)：

someElement.addEventListener("click", function(e) {
    // I'm anonymous!
});

然而，同樣的我們的marty.timeTravvel方法也是一個(gè)匿名函數(shù)：

var marty = {
    firstName: "Marty",
    lastName: "McFly",
    timeTravel: function(year) {
        console.log(this.firstName + " " + this.lastName + " is time traveling to " + year);
    }
}

因?yàn)楹瘮?shù)聲明必須有一個(gè)唯一的名字，只有函數(shù)表達(dá)式可以沒有名字。

6.) 立即執(zhí)行函數(shù)表達(dá)式

因?yàn)槲覀冋谡務(wù)摵瘮?shù)表達(dá)式，有一個(gè)東西我希望我早知道：立即執(zhí)行函數(shù)表達(dá)式（IIFE）。有很多關(guān)于IIFE的好文章（我將在文章結(jié)尾出列出），但用一句話來形容，函數(shù)表達(dá)式不是通過將函數(shù)表達(dá)式賦值給一個(gè)標(biāo)量，稍后再執(zhí)行，而是理解執(zhí)行?？梢栽跒g覽器控制臺看這一過程。

首先——讓我們先敲入一個(gè)函數(shù)表達(dá)式——但不給它指派變量——看看會發(fā)什么：

語法錯(cuò)誤——這被認(rèn)為是函數(shù)聲明，缺少函數(shù)名字。然而，為了使其變?yōu)楸磉_(dá)式，我們僅需將其包裹在括號內(nèi)：

讓其變?yōu)楸磉_(dá)式后控制臺返回給我們一個(gè)匿名函數(shù)（記住，我們沒有為其指派值，但表達(dá)式會有返回值）。所以——我們知道“函數(shù)表達(dá)式”是“立即調(diào)用函數(shù)表達(dá)式”的一部分。為了等到“立即執(zhí)行”的特性，我們通過在表達(dá)式后面添加另一個(gè)括號來調(diào)用返回的表達(dá)式（就像我們調(diào)用其他函數(shù)一樣）：

“但是等一下，Jim！(指作者)我想我以前見過這種調(diào)用方式”。 事實(shí)上你可能見過——這是合法的語法（眾所周知的是Douglas Crockford的首選語法）

這兩種方法都起作用，但是我強(qiáng)烈建議你讀一讀這里。

OK，非常棒——現(xiàn)在我們已經(jīng)知道了IIFE是什么——以及為什么要用它？

它幫助我們控制作用域——任何JavaScript教程中非常重要的部分！前面我們看到的許多實(shí)例都創(chuàng)建在全局作用域。這意味著window（假設(shè)環(huán)境是瀏覽器）對象將有很多屬性。如果我們?nèi)堪凑者@種方式寫我們的JavaScript代碼，我們會迅速在全局作用域積累一噸（夸張）變量聲明，window代碼會被污染。即使在最好的情況下，在全局變量暴漏許多細(xì)節(jié)是糟糕的建議，但當(dāng)變量的名字和已經(jīng)存在的window屬性名字相同時(shí)會發(fā)生什么呢？window屬性會被重寫！

例如，如果你最喜歡的“Amelia Earhart”網(wǎng)站在全局作用域聲明了一個(gè)navigator變量，下面是設(shè)置之前和之后的結(jié)果：

哎呀！

顯而易見——全局變量被污染是糟糕的。JavaScript使用函數(shù)作用域（而不是塊作用域，如果你來自C#或Java，這點(diǎn)非常重要?。员３治覀兊拇a和全局作用域分離的辦法是創(chuàng)建一個(gè)新作用域，我們可以使用IIFE來實(shí)現(xiàn)，因?yàn)樗膬?nèi)容在它自己的函數(shù)作用域內(nèi)。在下面的例子中，我將在控制臺向你顯示window.navigator的值，然后我常見一個(gè)IIFE（立即執(zhí)行函數(shù)表達(dá)式）去包裹Amelia Earhart的行為和數(shù)據(jù)。IIFE結(jié)束后返回一個(gè)作為我們的“程序命名空間”的對象。我在IIFE內(nèi)聲明的navigator變量將不會重寫window.navigator的值。

作為額外好處，我們上面創(chuàng)建的IIFE是JavaScript中模塊模式的啟蒙。我將在結(jié)尾處包括一些我瀏覽的模塊模式的鏈接。

7.) ‘typeof’操作符和’Object.prototype.toString’

最終，可能發(fā)現(xiàn)在某些情況下，你需要檢查傳遞給函數(shù)參數(shù)的類型，或其他類似的東西。typeof運(yùn)算符會是顯而易見的選擇，但是，這并不是萬能的。例如，當(dāng)我們對一個(gè)對象，數(shù)組，字符串或正則表達(dá)式，調(diào)用typeof運(yùn)算符時(shí)會發(fā)生什么？

還好——至少我們可以將字符串和對象，數(shù)組，正則表達(dá)式區(qū)分開，對嗎？幸運(yùn)的是，我們可以得到更準(zhǔn)確的類型信息，我們有其他不同的方法。我們將使用Object.prototype.toString方法，并且應(yīng)用我們前面提到的call方法：

為什么我們要使用Object.prototype上的toString方法？因?yàn)榈谌綆旎蚰阕约旱拇a可能重寫實(shí)例的toString方法。通過Object.prototype，我們可以強(qiáng)制實(shí)現(xiàn)實(shí)例原來的toString行為。

如果你知道typeof將會返回什么那么你不需要進(jìn)行多余的檢查（例如，你僅需要知道是或不是一個(gè)字符串），此時(shí)用typeof非常好。然而，如果你需要區(qū)分?jǐn)?shù)組和對象，正則表達(dá)式和對象，等等，那么使用Object.prototype.toString吧。

接下來呢

我已經(jīng)從其他JavaScript開發(fā)者的見解中收益頗多，所以請看看下面的這些鏈接，并給這些人一些鼓勵(lì)，他們給予了我們諄諄教誨。

• Axel Rauschmayer’s 非常棒的文章 在JavaScript中什么時(shí)候使用==是正確的？ (提示：從不)
• Fixing the typeof Operator by Angus Croll
• Airbnb Github Issue comment that’s the single best explanation on IIFE parens placement
• Function Declarations vs. Function Expressions – by Angus Croll
• Getting Into Context Binds by yours truly
• Immediately-Invoked Function Expression (IIFE) by Ben Alman
• Learning JavaScript Design Patterns by Addy Osmani
• Understanding the “this” keyword in JavaScript by Nicholas Bergson-Shilcock
• MDN – Function.prototype.bind
• MDN – Function.prototype.apply
• MDN – Function.prototype.call
• Named function expressions demystified by Juriy “kangax” Zaytsev
• Basic JavaScript for the impatient programmer by Axel Rauschmayer
• JavaScript Scoping and Hoisting by Ben Cherry
• JavaScript’s ‘this’ Keyword by David Shariff
• What is the Execution Context & Stack in JavaScript? by David Shariff

注

英文：http://developer.telerik.com/featured/seven-javascript-quirks-i-wish-id-known-about/