js必須知道的編程技巧總結(jié)

我們將看下列技巧：

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

1. var x = 1;
   

3. if(x == "1") {
   

4. console.log("YAY! They're equal!");
   

5. }

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

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

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

1. var x = 1;
   

3. // 嚴格平等，類型必須相同
   

4. if(x === "1") {
   

5. console.log("Sadly, I'll never write this to the console");
   

6. }
   

8. if(x === 1) {
   

9. console.log("YES! Strict Equality FTW.")
   

10. }

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

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

1. // 獲取person對象的firstName值
   

2. var name = person.firstName;
   

4. // 獲取數(shù)組的第三個元素
   

5. var theOneWeWant = myArray[2]; // remember, 0-based index不要忘了第一個元素的索引是0

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

1. var name = person["firstName"];

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

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

1. var doSomething = function(doWhat) {
   

2. switch(doWhat) {
   

3. case "doThisThing":
   

4. // more code...
   

5. break;
   

6. case "doThatThing":
   

7. // more code...
   

8. break;
   

9. case "doThisOtherThing":
   

10. // more code....
    

11. break;
    

12. // additional cases here, etc.
    

13. default:
    

14. // default behavior
    

15. break;
    

16. }
    

17. }

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

1. var thingsWeCanDo = {
   

2. doThisThing : function() { /* behavior */ },
   

3. doThatThing : function() { /* behavior */ },
   

4. doThisOtherThing : function() { /* behavior */ },
   

5. default : function() { /* behavior */ }
   

6. };
   

8. var doSomething = function(doWhat) {
   

9. var thingToDo = thingsWeCanDo.hasOwnProperty(doWhat) ? doWhat : "default"
   

10. thingsWeCanDo[thingToDo]();
    

11. }

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

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

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

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

1. var marty = {
   

2. firstName: "Marty",
   

3. lastName: "McFly",
   

4. timeTravel: function(year) {
   

5. console.log(this.firstName + " " + this.lastName + " is time traveling to " + year);
   

6. }
   

7. }
   

9. marty.timeTravel(1955);
   

10. // Marty McFly is time traveling to 1955

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

1. var doc = {
   

2. firstName: "Emmett",
   

3. lastName: "Brown",
   

4. }
   

6. doc.timeTravel = marty.timeTravel;

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

1. doc.timeTravel(1885);
   

2. // Emmett Brown is time traveling to 1885

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

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

1. var getBackInTime = marty.timeTravel;
   

2. getBackInTime(2014);
   

3. // undefined undefined is time traveling to 2014
   

4. 為什么是“undefined undefined”？！而不是“Matry McFly”？

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

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

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

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

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

第三（僅僅是#2的擴展）——異步調(diào)用方法中的this值
所以，讓我們假裝我們想調(diào)用我們的marty.timeTravel方法當有人點擊一個按鈕時：

1. var flux = document.getElementById("flux-capacitor");
   

2. flux.addEventListener("click", marty.timeTravel);

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

1. marty.timeTravel = function(year) {
   

2. console.log(this.firstName + " " + this.lastName + " is time traveling to " + year);
   

3. console.log(this);
   

4. };

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

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

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

1. flux.addEventListener("click", function(e) {
   

2. marty.timeTravel(someYearValue);
   

3. });

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

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

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

1. var TimeTraveler = function(fName, lName) {
   

2. this.firstName = fName;
   

3. this.lastName = lName;
   

4. // Constructor functions return the
   

5. // newly created object for us unless
   

6. // we specifically return something else
   

7. };
   

9. var marty = new TimeTraveler("Marty", "McFly");
   

10. console.log(marty.firstName + " " + marty.lastName);
    

11. // Marty McFly

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

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

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

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

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

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

1. doc.timeTravelFor = function(instance, year) {
   

2. this.timeTravel.call(instance, year);
   

3. // 如果你使用apply使用下面的語法
   

4. // this.timeTravel.apply(instance, [year]);
   

5. };

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

1. var einstein = {
   

2. firstName: "Einstein",
   

3. lastName: "(the dog)"
   

4. };
   

5. doc.timeTravelFor(einstein, 1985);
   

6. // Einstein (the dog) is time traveling to 1985

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

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

1. marty.goHome = function() {
   

2. this.timeTravel(1985);
   

3. }

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

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

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

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

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

1. function timeTravel(year) {
   

2. console.log(this.firstName + " " + this.lastName + " is time traveling to " + year);
   

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

函數(shù)表達式定義一個函數(shù)并指派給一個變量。典型應用如下：

1. var someFn = function() {
    console.log("I like to express myself...");
   }; 也可以對函數(shù)表達式命名——然而，不像函數(shù)聲明，命名函數(shù)表達式的名字僅在它自身函數(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ù)表達式和函數(shù)聲明不能不提“hoisting（提升）”——函數(shù)和變量聲明被編譯器移到作用域的頂部。在這里我們無法詳細解釋hoisting，但你可以讀Ben Cherry和Angus Croll兩個人的偉大解釋。

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

1. someElement.addEventListener("click", function(e) {
   

2. // I'm anonymous!
   

3. });

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

1. var marty = {
   

2. firstName: "Marty",
   

3. lastName: "McFly",
   

4. timeTravel: function(year) {
   

5. console.log(this.firstName + " " + this.lastName + " is time traveling to " + year);
   

6. }
   

7. }

因為函數(shù)聲明必須有一個唯一的名字，只有函數(shù)表達式可以沒有名字。

6.) 立即執(zhí)行函數(shù)表達式
因為我們正在談論函數(shù)表達式，有一個東西我希望我早知道：立即執(zhí)行函數(shù)表達式（IIFE）。有很多關(guān)于IIFE的好文章（我將在文章結(jié)尾出列出），但用一句話來形容，函數(shù)表達式不是通過將函數(shù)表達式賦值給一個標量，稍后再執(zhí)行，而是理解執(zhí)行?？梢栽跒g覽器控制臺看這一過程。

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

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

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

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

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

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

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

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

哎呀！

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

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

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

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

為什么我們要使用Object.prototype上的toString方法？因為第三方庫或你自己的代碼可能重寫實例的toString方法。通過Object.prototype，我們可以強制實現(xiàn)實例原來的toString行為。

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

聲明：本網(wǎng)頁內(nèi)容旨在傳播知識，若有侵權(quán)等問題請及時與本網(wǎng)聯(lián)系，我們將在第一時間刪除處理。TEL:177 7030 7066 E-MAIL:11247931@qq.com