JSNinja-《Eloquent Javascript》讀書筆記

朋友推薦的一本書(http://eloquentjavascript.net/)，趁最近不忙看了下。

總的來說這本書一般吧，不大適合JS入門讀者，因為裡面的例子比較敗筆，比較學術性不夠生動和切符實際工作應用。

對於JS的書，個人還是推薦《head first javascript》～事實上據說head first那系列的書都還不錯。

每本書總有其可取之處的，如果你計劃也看這本書，或許你直接過一下我的筆記好了。。。

註：英文為原文，中文為我的注釋。沒有英文的中文是我直接翻譯過來的。

 

1，There are six basic types of values: Numbers, strings, booleans, objects, functions, and undefined values.

　　6種值的基本類型

 

2，Don't forget the special unary operator (typeof)

　　容易被遺忘的一元操作符typeof

 

3，js裡面，語句結束處一般帶分號，有時可以忽略，有時是必須的。強烈建議保留分號。

　　（讀者註：習慣性保留分號，在使用yui壓縮器壓縮Js時不容易出錯）

 

4，undefined和null。

　　變數值為null可以認為該變數定義了但是沒值;undefined則壓根兒沒定義。但是null==undefined返回true。所以在js裡面，如果變數要和null或者undefined比較，最好還是用===或!==

 

5，JS裡面其他比較詭異的現象。

　　var x=false == 0;var y="" == 0;var z="5" == 5;xyz全部為true

　　讀者註：其實有很多詭異的現象

 

6，精確等於以及精確不等於 === and !==

　　利用==和!=進行比較時，JS解譯器會嘗試進行類型轉換（例如5中的一些怪異現象），如果在JS裡面比較時你看不慣它自動的類型轉換，那就用=== 和 !==

 

7，猜猜NaN== NaN等於啥？false...

 

8，||和&&操作符的妙用。true||x，x將永遠不會被執行;同理false&&y，y也永遠不會被執行

　　||經常用，&&的這種用法還真沒親自試過
 

 

9，沒有return語句的方法返回什嗎？

　　undefined

 

10，Functions are the only things that create a new scope

　　範圍～這句話的意思是，在block型的語句內（例如if，while)生命變數時，變數的範圍其實是block語句所屬的函數。這點和c#差異比較大，據說新版的javascript會改變這點。

 

11，In JavaScript, running through a simple loop is a lot cheaper than calling a function multiple times.
    簡單的for或者while迴圈，效能要比函數的遞迴調用好不少。但是如果邏輯複雜該用遞迴還是得用，效能要考慮但不用過分擔憂效能，除非你的程式真的慢的不行。

 

12，the computer must remember the context from which the function was called, so that it knows where to continue afterwards.

The place where this context is stored is called the stack.

    堆棧是儲存函數運行時的內容相關的地方。每當一個函數被調用時，和它相關的上下文將位於堆棧的頭部，函數調用結束後，上下文將從堆棧上撤掉，同時繼續執行處理堆棧中剩餘的函數的上下文。
    堆棧的物理性表現在電腦記憶體的佔用上。如果堆棧過大，電腦便會拋出“堆疊溢位out of stack space”或者“過多遞迴too much recursion”的資訊。所以，一旦碰到這兩提示，記得檢查程式中哪個地方有遞迴調用導致死迴圈。
    jQuery中的animate方法結合stop方法使用時容易導致死迴圈。如果你對元素$x調用了有回呼函數的animate如$x.animate({xxx},400,callback)，然後在程式的另外一個地方調用了$x.stop(true,true)，這時候得注意你的callback函數。

 

13，Numbers, booleans, the value null, and the value undefined do not have any properties

數字、布爾值、null和undefined沒有任何屬性

 

14，The keyword delete cuts off properties

delete關鍵字用來刪除對象的屬性

 

15，The operator in can be used to test whether an object has a certain property. It produces a boolean

in關鍵字可用來檢測某個對象是否具有指定屬性。
如var levin={name:'levin'};
alert("name" in levin);

 

16，string.split(x).join(x) always produces the original value, but array.join(x).split(x) does not.

 

17，charAt will return "" when there is no character at the given position, and slice will simply leave out the part of the new string that does not exist.

 

18，the properties of Math are hidden

for (var name in Math)
  print(name);
啥也沒發生

 

19，The simple objects we have used so far are based on the most basic prototype, which is associated with the Object constructor. In fact, typing {} is equivalent to typing new Object()

原型對象與字面對象-原型對象的constructor屬性指向建立該對象的類的建構函式；字面對象的constructor屬性指向Object類的建構函式

讀者註：可以參考我的例子：http://www.vivasky.com/labs/jqfocus/js_PrototypeBasedObject_vs_LiteralObject.html

 

20，Every function automatically gets a prototype property, whose constructor property points back at the function

任何類(Class)都有一個原型(prototype)屬性，該屬性的構造器(constructor)屬性指向聲明該類的函數自身!

 

21，The properties of the prototype influence the object based on it, but the properties of this object never change the prototype

    類的原型的屬性影響該類的實體，但是類實體的屬性是不會改變類原型的。
    var Baby=function(name){this.name=name;};
    Baby.prototype.age=1;

 

    var baby1=new Baby("cocoa");
    baby1.age=2;

    alert(Baby.prototype.age); /* still shows 1 */

 

22，if your program has to run on the same web-page as another program (either written by you or by someone else) which uses for/in naively ― the way we have been using it so far ― then adding things to prototypes, especially the Object and Array prototype, will definitely break something, because these loops will suddenly start seeing those new properties. For this reason, some people prefer not to touch these prototypes at all. Of course, if you are careful, and you do not expect your code to have to coexist with badly-written code, adding methods to standard prototypes is a perfectly good technique.

盡量避免對JS本地類如Object、Array等進行原型擴充。

讀者註：在工作中遇到過此類問題。

 

23，Modularity
When structuring a program, we do two things. We separate it into smaller parts, called modules, each of which has a specific role, and we specify the relations between these parts.

JS編程的組織-模組化開發
按功能分模組，每個模組負責制定的角色（功能）。模組之間的通訊方式是關鍵的地方，這個可以借鑒java或者c#裡面的事件機制。如果你在用jquery的話比較好處理，因為它提供了一套完善的事件處理機制。

 

在組織一個程式的各個模組時，要盡量避免模組間循環相依性，比如a依賴b，b反過來也依賴a的話容易導致邏輯混亂。
JQuery從1.4.3版本開始也採用模組化開發，比如處理效果的功能放到effects.js模組，處理dom遍曆的放在core.js等等，由於模組間盡量保持獨立，使用者就可以根據需要構建自己專用的jquery版本。

 

模組化開發時，建議將各模組物理分離到不同的js檔案中，部署時再使用yui壓縮公用程式合并成一個js檔案。