~~~ // 注釋方式和C很像，這是單行注釋 /* 這是多行 注釋 */ // 語句可以以分號結束 doStuff(); // ... 但是分號也可以省略，每當遇到一個新行時，分號會自動插入（除了一些特殊情況）。 doStuff() // 因為這些特殊情況會導致意外的結果，所以我們在這里保留分號。 /////////////////////////////////// // 1. 數字、字符串與操作符 // Javascript 只有一種數字類型(即 64位 IEEE 754 雙精度浮點 double)。 // double 有 52 位表示尾數，足以精確存儲大到 9?101? 的整數。 3; // = 3 1.5; // = 1.5 // 所有基本的算數運算都如你預期。 1 + 1; // = 2 0.1 + 0.2; // = 0.30000000000000004 8 - 1; // = 7 10 * 2; // = 20 35 / 5; // = 7 // 包括無法整除的除法。 5 / 2; // = 2.5 // 位運算也和其他語言一樣；當你對浮點數進行位運算時， // 浮點數會轉換為*至多* 32 位的無符號整數。 1 << 2; // = 4 // 括號可以決定優先級。 (1 + 3) * 2; // = 8 // 有三種非數字的數字類型 Infinity; // 1/0 的結果 -Infinity; // -1/0 的結果 NaN; // 0/0 的結果 // 也有布爾值。 true; false; // 可以通過單引號或雙引號來構造字符串。 'abc'; "Hello, world"; // 用！來取非 !true; // = false !false; // = true // 相等 === 1 === 1; // = true 2 === 1; // = false // 不等 != 1 !== 1; // = false 2 !== 1; // = true // 更多的比較操作符 1 < 10; // = true 1 > 10; // = false 2 <= 2; // = true 2 >= 2; // = true // 字符串用+連接 "Hello " + "world!"; // = "Hello world!" // 字符串也可以用 < 、> 來比較 "a" < "b"; // = true // 使用“==”比較時會進行類型轉換... "5" == 5; // = true null == undefined; // = true // ...除非你是用 === "5" === 5; // = false null === undefined; // = false // ...但會導致奇怪的行為 13 + !0; // 14 "13" + !0; // '13true' // 你可以用`charAt`來得到字符串中的字符 "This is a string".charAt(0); // = 'T' // ...或使用 `substring` 來獲取更大的部分。 "Hello world".substring(0, 5); // = "Hello" // `length` 是一個屬性，所以不要使用 (). "Hello".length; // = 5 // 還有兩個特殊的值：`null`和`undefined` null; // 用來表示刻意設置的空值 undefined; // 用來表示還沒有設置的值(盡管`undefined`自身實際是一個值) // false, null, undefined, NaN, 0 和 "" 都是假的；其他的都視作邏輯真 // 注意 0 是邏輯假而 "0"是邏輯真，盡管 0 == "0"。 /////////////////////////////////// // 2. 變量、數組和對象 // 變量需要用`var`關鍵字聲明。Javascript是動態類型語言， // 所以你無需指定類型。 賦值需要用 `=` var someVar = 5; // 如果你在聲明時沒有加var關鍵字，你也不會得到錯誤... someOtherVar = 10; // ...但是此時這個變量就會在全局作用域被創建，而非你定義的當前作用域 // 沒有被賦值的變量都會被設置為undefined var someThirdVar; // = undefined // 對變量進行數學運算有一些簡寫法： someVar += 5; // 等價于 someVar = someVar + 5; someVar 現在是 10 someVar *= 10; // 現在 someVar 是 100 // 自增和自減也有簡寫 someVar++; // someVar 是 101 someVar--; // 回到 100 // 數組是任意類型組成的有序列表 var myArray = ["Hello", 45, true]; // 數組的元素可以用方括號下標來訪問。 // 數組的索引從0開始。 myArray[1]; // = 45 // 數組是可變的，并擁有變量 length。 myArray.push("World"); myArray.length; // = 4 // 在指定下標添加/修改 myArray[3] = "Hello"; // javascript中的對象相當于其他語言中的“字典”或“映射”：是鍵-值對的無序集合。 var myObj = {key1: "Hello", key2: "World"}; // 鍵是字符串，但如果鍵本身是合法的js標識符，則引號并非是必須的。 // 值可以是任意類型。 var myObj = {myKey: "myValue", "my other key": 4}; // 對象屬性的訪問可以通過下標 myObj["my other key"]; // = 4 // ... 或者也可以用 . ，如果屬性是合法的標識符 myObj.myKey; // = "myValue" // 對象是可變的；值也可以被更改或增加新的鍵 myObj.myThirdKey = true; // 如果你想要獲取一個還沒有被定義的值，那么會返回undefined myObj.myFourthKey; // = undefined /////////////////////////////////// // 3. 邏輯與控制結構 // 本節介紹的語法與Java的語法幾乎完全相同 // `if`語句和其他語言中一樣。 var count = 1; if (count == 3){ // count 是 3 時執行 } else if (count == 4){ // count 是 4 時執行 } else { // 其他情況下執行 } // while循環 while (true) { // 無限循環 } // Do-while 和 While 循環很像 ，但前者會至少執行一次 var input; do { input = getInput(); } while (!isValid(input)) // `for`循環和C、Java中的一樣： // 初始化; 繼續執行的條件; 迭代。 for (var i = 0; i < 5; i++){ // 遍歷5次 } // && 是邏輯與, || 是邏輯或 if (house.size == "big" && house.colour == "blue"){ house.contains = "bear"; } if (colour == "red" || colour == "blue"){ // colour是red或者blue時執行 } // && 和 || 是“短路”語句，它在設定初始化值時特別有用 var name = otherName || "default"; // `switch`語句使用`===`檢查相等性。 // 在每一個case結束時使用 'break' // 否則其后的case語句也將被執行。 grade = 'B'; switch (grade) { case 'A': console.log("Great job"); break; case 'B': console.log("OK job"); break; case 'C': console.log("You can do better"); break; default: console.log("Oy vey"); break; } /////////////////////////////////// // 4. 函數、作用域、閉包 // JavaScript 函數由`function`關鍵字定義 function myFunction(thing){ return thing.toUpperCase(); } myFunction("foo"); // = "FOO" // 注意被返回的值必須開始于`return`關鍵字的那一行， // 否則由于自動的分號補齊，你將返回`undefined`。 // 在使用Allman風格的時候要注意. function myFunction() { return // <- 分號自動插在這里 { thisIsAn: 'object literal' } } myFunction(); // = undefined // javascript中函數是一等對象，所以函數也能夠賦給一個變量， // 并且被作為參數傳遞 —— 比如一個事件處理函數： function myFunction(){ // 這段代碼將在5秒鐘后被調用 } setTimeout(myFunction, 5000); // 注意：setTimeout不是js語言的一部分，而是由瀏覽器和Node.js提供的。 // 函數對象甚至不需要聲明名稱 —— 你可以直接把一個函數定義寫到另一個函數的參數中 setTimeout(function(){ // 這段代碼將在5秒鐘后被調用 }, 5000); // JavaScript 有函數作用域；函數有其自己的作用域而其他的代碼塊則沒有。 if (true){ var i = 5; } i; // = 5 - 并非我們在其他語言中所期望得到的undefined // 這就導致了人們經常使用的“立即執行匿名函數”的模式， // 這樣可以避免一些臨時變量擴散到全局作用域去。 (function(){ var temporary = 5; // 我們可以訪問修改全局對象（"global object"）來訪問全局作用域， // 在web瀏覽器中是`window`這個對象。 // 在其他環境如Node.js中這個對象的名字可能會不同。 window.permanent = 10; })(); temporary; // 拋出引用異常ReferenceError permanent; // = 10 // javascript最強大的功能之一就是閉包。 // 如果一個函數在另一個函數中定義，那么這個內部函數就擁有外部函數的所有變量的訪問權， // 即使在外部函數結束之后。 function sayHelloInFiveSeconds(name){ var prompt = "Hello, " + name + "!"; // 內部函數默認是放在局部作用域的， // 就像是用`var`聲明的。 function inner(){ alert(prompt); } setTimeout(inner, 5000); // setTimeout是異步的，所以 sayHelloInFiveSeconds 函數會立即退出， // 而 setTimeout 會在后面調用inner // 然而，由于inner是由sayHelloInFiveSeconds“閉合包含”的， // 所以inner在其最終被調用時仍然能夠訪問`prompt`變量。 } sayHelloInFiveSeconds("Adam"); // 會在5秒后彈出 "Hello, Adam!" /////////////////////////////////// // 5. 對象、構造函數與原型 // 對象可以包含方法。 var myObj = { myFunc: function(){ return "Hello world!"; } }; myObj.myFunc(); // = "Hello world!" // 當對象中的函數被調用時，這個函數可以通過`this`關鍵字訪問其依附的這個對象。 myObj = { myString: "Hello world!", myFunc: function(){ return this.myString; } }; myObj.myFunc(); // = "Hello world!" // 但這個函數訪問的其實是其運行時環境，而非定義時環境，即取決于函數是如何調用的。 // 所以如果函數被調用時不在這個對象的上下文中，就不會運行成功了。 var myFunc = myObj.myFunc; myFunc(); // = undefined // 相應的，一個函數也可以被指定為一個對象的方法，并且可以通過`this`訪問 // 這個對象的成員，即使在函數被定義時并沒有依附在對象上。 var myOtherFunc = function(){ return this.myString.toUpperCase(); } myObj.myOtherFunc = myOtherFunc; myObj.myOtherFunc(); // = "HELLO WORLD!" // 當我們通過`call`或者`apply`調用函數的時候，也可以為其指定一個執行上下文。 var anotherFunc = function(s){ return this.myString + s; } anotherFunc.call(myObj, " And Hello Moon!"); // = "Hello World! And Hello Moon!" // `apply`函數幾乎完全一樣，只是要求一個array來傳遞參數列表。 anotherFunc.apply(myObj, [" And Hello Sun!"]); // = "Hello World! And Hello Sun!" // 當一個函數接受一系列參數，而你想傳入一個array時特別有用。 Math.min(42, 6, 27); // = 6 Math.min([42, 6, 27]); // = NaN (uh-oh!) Math.min.apply(Math, [42, 6, 27]); // = 6 // 但是`call`和`apply`只是臨時的。如果我們希望函數附著在對象上，可以使用`bind`。 var boundFunc = anotherFunc.bind(myObj); boundFunc(" And Hello Saturn!"); // = "Hello World! And Hello Saturn!" // `bind` 也可以用來部分應用一個函數（柯里化）。 var product = function(a, b){ return a * b; } var doubler = product.bind(this, 2); doubler(8); // = 16 // 當你通過`new`關鍵字調用一個函數時，就會創建一個對象， // 而且可以通過this關鍵字訪問該函數。 // 設計為這樣調用的函數就叫做構造函數。 var MyConstructor = function(){ this.myNumber = 5; } myNewObj = new MyConstructor(); // = {myNumber: 5} myNewObj.myNumber; // = 5 // 每一個js對象都有一個‘原型’。當你要訪問一個實際對象中沒有定義的一個屬性時， // 解釋器就回去找這個對象的原型。 // 一些JS實現會讓你通過`__proto__`屬性訪問一個對象的原型。 // 這雖然對理解原型很有用，但是它并不是標準的一部分； // 我們后面會介紹使用原型的標準方式。 var myObj = { myString: "Hello world!" }; var myPrototype = { meaningOfLife: 42, myFunc: function(){ return this.myString.toLowerCase() } }; myObj.__proto__ = myPrototype; myObj.meaningOfLife; // = 42 // 函數也可以工作。 myObj.myFunc() // = "hello world!" // 當然，如果你要訪問的成員在原型當中也沒有定義的話，解釋器就會去找原型的原型，以此類推。 myPrototype.__proto__ = { myBoolean: true }; myObj.myBoolean; // = true // 這其中并沒有對象的拷貝；每個對象實際上是持有原型對象的引用。 // 這意味著當我們改變對象的原型時，會影響到其他以這個原型為原型的對象。 myPrototype.meaningOfLife = 43; myObj.meaningOfLife; // = 43 // 我們知道 `__proto__` 并非標準規定，實際上也沒有標準辦法來修改一個已存在對象的原型。 // 然而，我們有兩種方式為指定原型創建一個新的對象。 // 第一種方式是 Object.create，這個方法是在最近才被添加到Js中的， // 因此并不是所有的JS實現都有這個方法 var myObj = Object.create(myPrototype); myObj.meaningOfLife; // = 43 // 第二種方式可以在任意版本中使用，不過必須通過構造函數。 // 構造函數有一個屬性prototype。但是它 *不是* 構造函數本身的原型；相反， // 是通過構造函數和new關鍵字創建的新對象的原型。 MyConstructor.prototype = { myNumber: 5, getMyNumber: function(){ return this.myNumber; } }; var myNewObj2 = new MyConstructor(); myNewObj2.getMyNumber(); // = 5 myNewObj2.myNumber = 6 myNewObj2.getMyNumber(); // = 6 // 字符串和數字等內置類型也有通過構造函數來創建的包裝類型 var myNumber = 12; var myNumberObj = new Number(12); myNumber == myNumberObj; // = true // 但是它們并非嚴格等價 typeof myNumber; // = 'number' typeof myNumberObj; // = 'object' myNumber === myNumberObj; // = false if (0){ // 這段代碼不會執行，因為0代表假 } // 不過，包裝類型和內置類型共享一個原型， // 所以你實際可以給內置類型也增加一些功能，例如對string： String.prototype.firstCharacter = function(){ return this.charAt(0); } "abc".firstCharacter(); // = "a" // 這個技巧經常用在“代碼填充”中，來為老版本的javascript子集增加新版本js的特性， // 這樣就可以在老的瀏覽器中使用新功能了。 // 比如，我們知道Object.create并沒有在所有的版本中都實現， // 但是我們仍然可以通過“代碼填充”來實現兼容： if (Object.create === undefined){ // 如果存在則不覆蓋 Object.create = function(proto){ // 用正確的原型來創建一個臨時構造函數 var Constructor = function(){}; Constructor.prototype = proto; // 之后用它來創建一個新的對象 return new Constructor(); } } ~~~