javascript

X分鐘速成Y

其中 X=javascript

源代碼下載： javascript-zh.js

Javascript 于 1995 年由網(wǎng)景公司的 Brendan Eich 發(fā)明。最初它作為一種簡單的，用于開發(fā)網(wǎng)站的腳本語言而被發(fā)明出來，是用于開發(fā)復(fù)雜網(wǎng)站的 Java 的補充。但由于它與網(wǎng)頁結(jié)合度很高并且在瀏覽器中得到內(nèi)置的支持，所以在網(wǎng)頁前端領(lǐng)域 Javascript 變得比 Java 更流行了。

不過，Javascript 不僅用于網(wǎng)頁瀏覽器，一個名為 Node.js 的項目提供了面向 Google Chrome V8 引擎的獨立運行時環(huán)境，它正在變得越來越流行。

// 注釋方式和C很像，這是單行注釋
/* 這是多行
   注釋 */

// 語句可以以分號結(jié)束
doStuff();

// ... 但是分號也可以省略，每當(dāng)遇到一個新行時，分號會自動插入（除了一些特殊情況）。
doStuff()

// 因為這些特殊情況會導(dǎo)致意外的結(jié)果，所以我們在這里保留分號。

///////////////////////////////////
// 1. 數(shù)字、字符串與操作符

// Javascript 只有一種數(shù)字類型(即 64位 IEEE 754 雙精度浮點 double)。
// double 有 52 位表示尾數(shù)，足以精確存儲大到 9?101? 的整數(shù)。
3; // = 3
1.5; // = 1.5

// 所有基本的算數(shù)運算都如你預(yù)期。
1 + 1; // = 2
0.1 + 0.2; // = 0.30000000000000004
8 - 1; // = 7
10 * 2; // = 20
35 / 5; // = 7

// 包括無法整除的除法。
5 / 2; // = 2.5

// 位運算也和其他語言一樣；當(dāng)你對浮點數(shù)進行位運算時，
// 浮點數(shù)會轉(zhuǎn)換為*至多* 32 位的無符號整數(shù)。
1 << 2; // = 4

// 括號可以決定優(yōu)先級。
(1 + 3) * 2; // = 8

// 有三種非數(shù)字的數(shù)字類型
Infinity; // 1/0 的結(jié)果
-Infinity; // -1/0 的結(jié)果
NaN; // 0/0 的結(jié)果

// 也有布爾值。
true;
false;

// 可以通過單引號或雙引號來構(gòu)造字符串。
'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

// 使用“==”比較時會進行類型轉(zhuǎn)換...
"5" == 5; // = true
null == undefined; // = true

// ...除非你是用 ===
"5" === 5; // = false
null === undefined; // = false 

// ...但會導(dǎo)致奇怪的行為
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;      // 用來表示刻意設(shè)置的空值
undefined; // 用來表示還沒有設(shè)置的值(盡管`undefined`自身實際是一個值)

// false, null, undefined, NaN, 0 和 "" 都是假的；其他的都視作邏輯真
// 注意 0 是邏輯假而  "0"是邏輯真，盡管 0 == "0"。

///////////////////////////////////
// 2. 變量、數(shù)組和對象

// 變量需要用`var`關(guān)鍵字聲明。Javascript是動態(tài)類型語言，
// 所以你無需指定類型。 賦值需要用 `=` 
var someVar = 5;

// 如果你在聲明時沒有加var關(guān)鍵字，你也不會得到錯誤...
someOtherVar = 10;

// ...但是此時這個變量就會在全局作用域被創(chuàng)建，而非你定義的當(dāng)前作用域

// 沒有被賦值的變量都會被設(shè)置為undefined
var someThirdVar; // = undefined

// 對變量進行數(shù)學(xué)運算有一些簡寫法：
someVar += 5; // 等價于 someVar = someVar + 5; someVar 現(xiàn)在是 10 
someVar *= 10; // 現(xiàn)在 someVar 是 100

// 自增和自減也有簡寫
someVar++; // someVar 是 101
someVar--; // 回到 100

// 數(shù)組是任意類型組成的有序列表
var myArray = ["Hello", 45, true];

// 數(shù)組的元素可以用方括號下標(biāo)來訪問。
// 數(shù)組的索引從0開始。
myArray[1]; // = 45

// 數(shù)組是可變的，并擁有變量 length。
myArray.push("World");
myArray.length; // = 4

// 在指定下標(biāo)添加/修改
myArray[3] = "Hello";

// javascript中的對象相當(dāng)于其他語言中的“字典”或“映射”：是鍵-值對的無序集合。
var myObj = {key1: "Hello", key2: "World"};

// 鍵是字符串，但如果鍵本身是合法的js標(biāo)識符，則引號并非是必須的。
// 值可以是任意類型。
var myObj = {myKey: "myValue", "my other key": 4};

// 對象屬性的訪問可以通過下標(biāo)
myObj["my other key"]; // = 4

// ... 或者也可以用 . ，如果屬性是合法的標(biāo)識符
myObj.myKey; // = "myValue"

// 對象是可變的；值也可以被更改或增加新的鍵
myObj.myThirdKey = true;

// 如果你想要獲取一個還沒有被定義的值，那么會返回undefined
myObj.myFourthKey; // = undefined

///////////////////////////////////
// 3. 邏輯與控制結(jié)構(gòu)

// 本節(jié)介紹的語法與Java的語法幾乎完全相同

// `if`語句和其他語言中一樣。
var count = 1;
if (count == 3){
    // count 是 3 時執(zhí)行
} else if (count == 4){
    // count 是 4 時執(zhí)行
} else {
    // 其他情況下執(zhí)行 
}

// while循環(huán)
while (true) {
    // 無限循環(huán)
}

// Do-while 和 While 循環(huán)很像 ，但前者會至少執(zhí)行一次
var input;
do {
    input = getInput();
} while (!isValid(input))

// `for`循環(huán)和C、Java中的一樣：
// 初始化; 繼續(xù)執(zhí)行的條件; 迭代。
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時執(zhí)行
}

// && 和 || 是“短路”語句，它在設(shè)定初始化值時特別有用 
var name = otherName || "default";

// `switch`語句使用`===`檢查相等性。
// 在每一個case結(jié)束時使用 'break'
// 否則其后的case語句也將被執(zhí)行。 
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. 函數(shù)、作用域、閉包

// JavaScript 函數(shù)由`function`關(guān)鍵字定義
function myFunction(thing){
    return thing.toUpperCase();
}
myFunction("foo"); // = "FOO"

// 注意被返回的值必須開始于`return`關(guān)鍵字的那一行，
// 否則由于自動的分號補齊，你將返回`undefined`。
// 在使用Allman風(fēng)格的時候要注意.
function myFunction()
{
    return // <- 分號自動插在這里
    {
        thisIsAn: 'object literal'
    }
}
myFunction(); // = undefined

// javascript中函數(shù)是一等對象，所以函數(shù)也能夠賦給一個變量，
// 并且被作為參數(shù)傳遞 —— 比如一個事件處理函數(shù)：
function myFunction(){
    // 這段代碼將在5秒鐘后被調(diào)用
}
setTimeout(myFunction, 5000);
// 注意：setTimeout不是js語言的一部分，而是由瀏覽器和Node.js提供的。

// 函數(shù)對象甚至不需要聲明名稱 —— 你可以直接把一個函數(shù)定義寫到另一個函數(shù)的參數(shù)中
setTimeout(function(){
    // 這段代碼將在5秒鐘后被調(diào)用
}, 5000);

// JavaScript 有函數(shù)作用域；函數(shù)有其自己的作用域而其他的代碼塊則沒有。
if (true){
    var i = 5;
}
i; // = 5 - 并非我們在其他語言中所期望得到的undefined

// 這就導(dǎo)致了人們經(jīng)常使用的“立即執(zhí)行匿名函數(shù)”的模式，
// 這樣可以避免一些臨時變量擴散到全局作用域去。
(function(){
    var temporary = 5;
    // 我們可以訪問修改全局對象（"global object"）來訪問全局作用域，
    // 在web瀏覽器中是`window`這個對象。 
    // 在其他環(huán)境如Node.js中這個對象的名字可能會不同。
    window.permanent = 10;
})();
temporary; // 拋出引用異常ReferenceError
permanent; // = 10

// javascript最強大的功能之一就是閉包。
// 如果一個函數(shù)在另一個函數(shù)中定義，那么這個內(nèi)部函數(shù)就擁有外部函數(shù)的所有變量的訪問權(quán)，
// 即使在外部函數(shù)結(jié)束之后。
function sayHelloInFiveSeconds(name){
    var prompt = "Hello, " + name + "!";
    // 內(nèi)部函數(shù)默認(rèn)是放在局部作用域的，
    // 就像是用`var`聲明的。
    function inner(){
        alert(prompt);
    }
    setTimeout(inner, 5000);
    // setTimeout是異步的，所以 sayHelloInFiveSeconds 函數(shù)會立即退出，
    // 而 setTimeout 會在后面調(diào)用inner
    // 然而，由于inner是由sayHelloInFiveSeconds“閉合包含”的，
    // 所以inner在其最終被調(diào)用時仍然能夠訪問`prompt`變量。
}
sayHelloInFiveSeconds("Adam"); // 會在5秒后彈出 "Hello, Adam!"


///////////////////////////////////
// 5. 對象、構(gòu)造函數(shù)與原型

//  對象可以包含方法。
var myObj = {
    myFunc: function(){
        return "Hello world!";
    }
};
myObj.myFunc(); // = "Hello world!"

// 當(dāng)對象中的函數(shù)被調(diào)用時，這個函數(shù)可以通過`this`關(guān)鍵字訪問其依附的這個對象。
myObj = {
    myString: "Hello world!",
    myFunc: function(){
        return this.myString;
    }
};
myObj.myFunc(); // = "Hello world!"

// 但這個函數(shù)訪問的其實是其運行時環(huán)境，而非定義時環(huán)境，即取決于函數(shù)是如何調(diào)用的。
// 所以如果函數(shù)被調(diào)用時不在這個對象的上下文中，就不會運行成功了。
var myFunc = myObj.myFunc;
myFunc(); // = undefined

// 相應(yīng)的，一個函數(shù)也可以被指定為一個對象的方法，并且可以通過`this`訪問
// 這個對象的成員，即使在函數(shù)被定義時并沒有依附在對象上。
var myOtherFunc = function(){
    return this.myString.toUpperCase();
}
myObj.myOtherFunc = myOtherFunc;
myObj.myOtherFunc(); // = "HELLO WORLD!"

// 當(dāng)我們通過`call`或者`apply`調(diào)用函數(shù)的時候，也可以為其指定一個執(zhí)行上下文。
var anotherFunc = function(s){
    return this.myString + s;
}
anotherFunc.call(myObj, " And Hello Moon!"); // = "Hello World! And Hello Moon!"

// `apply`函數(shù)幾乎完全一樣，只是要求一個array來傳遞參數(shù)列表。
anotherFunc.apply(myObj, [" And Hello Sun!"]); // = "Hello World! And Hello Sun!"

// 當(dāng)一個函數(shù)接受一系列參數(shù)，而你想傳入一個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`只是臨時的。如果我們希望函數(shù)附著在對象上，可以使用`bind`。
var boundFunc = anotherFunc.bind(myObj);
boundFunc(" And Hello Saturn!"); // = "Hello World! And Hello Saturn!"

// `bind` 也可以用來部分應(yīng)用一個函數(shù)（柯里化）。
var product = function(a, b){ return a * b; }
var doubler = product.bind(this, 2);
doubler(8); // = 16

// 當(dāng)你通過`new`關(guān)鍵字調(diào)用一個函數(shù)時，就會創(chuàng)建一個對象，
// 而且可以通過this關(guān)鍵字訪問該函數(shù)。
// 設(shè)計為這樣調(diào)用的函數(shù)就叫做構(gòu)造函數(shù)。
var MyConstructor = function(){
    this.myNumber = 5;
}
myNewObj = new MyConstructor(); // = {myNumber: 5}
myNewObj.myNumber; // = 5

// 每一個js對象都有一個‘原型’。當(dāng)你要訪問一個實際對象中沒有定義的一個屬性時，
// 解釋器就回去找這個對象的原型。

// 一些JS實現(xiàn)會讓你通過`__proto__`屬性訪問一個對象的原型。
// 這雖然對理解原型很有用，但是它并不是標(biāo)準(zhǔn)的一部分；
// 我們后面會介紹使用原型的標(biāo)準(zhǔn)方式。
var myObj = {
    myString: "Hello world!"
};
var myPrototype = {
    meaningOfLife: 42,
    myFunc: function(){
        return this.myString.toLowerCase()
    }
};

myObj.__proto__ = myPrototype;
myObj.meaningOfLife; // = 42

// 函數(shù)也可以工作。
myObj.myFunc() // = "hello world!"

// 當(dāng)然，如果你要訪問的成員在原型當(dāng)中也沒有定義的話，解釋器就會去找原型的原型，以此類推。
myPrototype.__proto__ = {
    myBoolean: true
};
myObj.myBoolean; // = true

// 這其中并沒有對象的拷貝；每個對象實際上是持有原型對象的引用。
// 這意味著當(dāng)我們改變對象的原型時，會影響到其他以這個原型為原型的對象。
myPrototype.meaningOfLife = 43;
myObj.meaningOfLife; // = 43

// 我們知道 `__proto__` 并非標(biāo)準(zhǔn)規(guī)定，實際上也沒有標(biāo)準(zhǔn)辦法來修改一個已存在對象的原型。
// 然而，我們有兩種方式為指定原型創(chuàng)建一個新的對象。

// 第一種方式是 Object.create，這個方法是在最近才被添加到Js中的，
// 因此并不是所有的JS實現(xiàn)都有這個方法
var myObj = Object.create(myPrototype);
myObj.meaningOfLife; // = 43

// 第二種方式可以在任意版本中使用，不過必須通過構(gòu)造函數(shù)。
// 構(gòu)造函數(shù)有一個屬性prototype。但是它 *不是* 構(gòu)造函數(shù)本身的原型；相反，
// 是通過構(gòu)造函數(shù)和new關(guān)鍵字創(chuàng)建的新對象的原型。
MyConstructor.prototype = {
    myNumber: 5,
    getMyNumber: function(){
        return this.myNumber;
    }
};
var myNewObj2 = new MyConstructor();
myNewObj2.getMyNumber(); // = 5
myNewObj2.myNumber = 6
myNewObj2.getMyNumber(); // = 6

// 字符串和數(shù)字等內(nèi)置類型也有通過構(gòu)造函數(shù)來創(chuàng)建的包裝類型
var myNumber = 12;
var myNumberObj = new Number(12);
myNumber == myNumberObj; // = true

// 但是它們并非嚴(yán)格等價
typeof myNumber; // = 'number'
typeof myNumberObj; // = 'object'
myNumber === myNumberObj; // = false
if (0){
    // 這段代碼不會執(zhí)行，因為0代表假
}

// 不過，包裝類型和內(nèi)置類型共享一個原型，
// 所以你實際可以給內(nèi)置類型也增加一些功能，例如對string：
String.prototype.firstCharacter = function(){
    return this.charAt(0);
}
"abc".firstCharacter(); // = "a"

// 這個技巧經(jīng)常用在“代碼填充”中，來為老版本的javascript子集增加新版本js的特性，
// 這樣就可以在老的瀏覽器中使用新功能了。

// 比如，我們知道Object.create并沒有在所有的版本中都實現(xiàn)，
// 但是我們?nèi)匀豢梢酝ㄟ^“代碼填充”來實現(xiàn)兼容：
if (Object.create === undefined){ // 如果存在則不覆蓋
    Object.create = function(proto){
        // 用正確的原型來創(chuàng)建一個臨時構(gòu)造函數(shù)
        var Constructor = function(){};
        Constructor.prototype = proto;
        // 之后用它來創(chuàng)建一個新的對象
        return new Constructor();
    }
}