閱讀本文需要有其他語言的編程經驗。
JavaScript 中的簡單類型包括:
1.數字
2.字符串
3.布爾(true 和 false)
4.null
5.undefined
此外的其他類型均是對象(我們不要被 typeof 操作符的返回值所迷惑),例如:
1.函數
2.數組
3.正則表達式
4.對象(對象自然也是對象)
對象基礎
在 JavaScript 中,對象是屬性的集合(對象為關聯數組),每個屬性包括:
1.屬性名,必須為字符串
2.屬性值,可以為除了 undefined 之外的任何值
通過對象 literal 創建對象:
復制代碼 代碼如下:
// 通過對象 literal {} 創建空對象
var empty_object = {};
對象的屬性名和屬性值:
復制代碼 代碼如下:
var stooge = {
// "first-name" 為屬性名,"Jerome" 為屬性值
"first-name": "Jerome",
// "last-name" 為屬性名,"Howard" 為屬性值
"last-name": "Howard"
};
如果屬性名是合法的標識符,那麼可以省略引號:
復制代碼 代碼如下:
var flight = {
airline: "Oceanic",
number: 815,
departure: {
IATA: "SYD",
time: "2004-09-22 14:55",
city: "Sydney"
},
arrival: {
IATA: "LAX",
time: "2004-09-23 10:42",
city: "Los Angeles"
}
};
我們看一下屬性訪問的例子:
復制代碼 代碼如下:
var owner = { name: "Name5566" };
owner.name; // "Name5566"
owner["name"]; // "Name5566"
owner.job; // undefined
owner.job = "coder"; // 或者 owner["job"] = "coder";
如果屬性名不是合法標識符,那麼需要用引號包裹。不存在的屬性值為 undefined。對象是通過引用而非按值傳遞:
復制代碼 代碼如下:
var x = {};
var owner = x;
owner.name = "Name5566";
x.name; // x.name === "Name5566"
這裡 x 和 owner 引用同一個對象。
對象的屬性可以使用 delete 操作符刪除:
復制代碼 代碼如下:
delete obj.x; // 刪除對象 obj 的 x 屬性
對象的原型(prototype)
每一個對象都被鏈接了一個原型對象(prototype object),對象能夠從原型對象中繼承屬性。我們通過對象 literal 創建一個對象,它的原型對象為 Object.prototype 對象(Object.prototype 對象本身沒有原型對象)。我們在創建對象的時候,可以設置對象的原型對象(之後再討論具體的設置方法)。在嘗試獲取(而非修改)對象的某個屬性時,如果該對象不存在此屬性,那麼 JavaScript 會嘗試從此對象的原型對象中獲取此屬性,如果原型對象中沒有該屬性,那麼再從此原型對象的原型對象中查找,以此類推,直到 Object.prototype 原型對象。相比獲取屬性而言,我們修改對象的某個屬性時,不會影響原型對象。
函數基礎
在 JavaScript 中函數也是對象,其鏈接到 Function.prototype 原型對象(Function.prototype 鏈接到 Object.prototype)。函數存在一個名為 prototype 的屬性,其值的類型為對象,此對象存在一個屬性 constructor,constructor 的值為此函數:
復制代碼 代碼如下:
var f = function() {}
typeof f.prototype; // 'object'
typeof f.prototype.constructor; // 'function'
f === f.prototype.constructor; // true
函數是對象,你可以像使用對象一樣使用函數,也就是說,函數可以保存在變量、數組中,可以作為參數傳遞給函數,函數內部可以定義函數。附帶提及一下,函數有兩個被隱藏的屬性:
1.函數的上下文
2.函數的代碼
函數的創建如下:
復制代碼 代碼如下:
var f = function add(a, b) {
return a + b;
}
console.log(f); // 輸出 [Function: add]
關鍵字 function 後的函數名是可選的,我們制定函數名主要出於幾個目的:
1.為了遞歸調用
2.被調試器、開發工具等用來標識函數
很多時候我們並不需要函數名,沒有函數名的函數被叫做匿名函數。有括號包裹的為參數列表。JavaScript 不要求實參和形參匹配,例如:
復制代碼 代碼如下:
var add = function(a, b) {
return a + b;
}
add(1, 2, 3); // 實參和形參不匹配
如果實參過多,那麼多余的實參會被忽略,如果實參過少,那麼未被賦值的形參的值為 undefined。函數一定有一個返回值,如果沒有通過 return 語句指定返回值,那麼函數返回值為 undefined。
一個函數和其訪問的外部變量組成一個閉包。這是 JavaScript 的關鍵魅力所在。
函數調用
每個函數被調用時,會接收到兩個額外的參數:
1.this
2.arguments
this 的值和具體調用的模式有關,在 JavaScript 中有四種調用模式:
1.方法調用模式。對象的屬性如果是函數,則稱其為方法。如果一個方法通過 o.m(args) 被調用,this 為對象 o(由此可見,在調用時,this 和 o 才進行綁定),例如:
復制代碼 代碼如下:
var obj = {
value: 0,
increment: function(v) {
this.value += (typeof v === 'number' ? v : 1);
}
};
obj.increment(); // this === obj
2.函數調用模式。如果一個函數不是一個對象的屬性,那麼它將作為一個函數被調用,這時候 this 被綁定到全局對象上,例如:
復制代碼 代碼如下:
message = 'Hello World';
var p = function() {
console.log(this.message);
}
p(); // 輸出 'Hello World'
這種行為有時候讓人疑惑,看一個例子:
復制代碼 代碼如下:
obj = {
value: 0,
increment: function() {
var helper = function() {
// 對全局對象中的 value 加 1
this.value += 1;
}
// helper 被作為一個函數來調用
// 因此 this 為全局對象
helper();
}
};
obj.increment(); // obj.value === 0
我們期望的結果應該是:
復制代碼 代碼如下:
obj = {
value: 0,
increment: function() {
var that = this;
var helper = function() {
that.value += 1;
}
helper();
}
};
obj.increment(); // obj.value === 1
3.構造函數調用模式。意圖使用 new 前綴的函數被叫做構造函數,例如:
復制代碼 代碼如下:
// Test 被叫做構造函數
var Test = function(string) {
this.message = string;
}
var myTest = new Test("Hello World");
一個函數前面可以加上 new 來調用(這樣的函數通常大寫開頭),加上 new 之後將創建一個鏈接到此函數的 prototype 屬性的對象,且構造函數中 this 為此對象。
4.apply 調用模式。函數的 apply 方法被用於調用函數,其有兩個參數,第一個為 this,第二個為參數數組,例如:
復制代碼 代碼如下:
var add = function(a, b) {
return a + b;
}
var ret = add.apply(null, [3, 4]); // ret === 7
函數調用時,我們能夠訪問一個名為 arguments 的類數組(非真正的 JavaScript 數組),其包含了所有的實參,這樣我們就能實現變長參數:
復制代碼 代碼如下:
var add = function() {
var sum = 0;
for (var i=0; i<arguments.length; ++i) {
sum += arguments[i];
}
return sum;
}
add(1, 2, 3, 4);
異常
現在來說說 JavaScript 的異常處理機制。我們使用 throw 語句來拋出異常,try-cache 語句來捕獲並處理異常:
復制代碼 代碼如下:
var add = function (a, b) {
if (typeof a !== 'number' || typeof b !== 'number') {
// 拋出異常
throw {
name: 'TypeError',
message: 'add needs numbers'
};
}
return a + b;
}
// 捕獲並處理異常
try {
add("seven");
// e 為拋出的異常對象
} catch (e) {
console.log(e.name + ': ' + e.message);
}
為JavaScript 類型添加屬性
JavaScript 中大多數類型存在構造函數:
1.對象的構造函數為 Object
2.數組的構造函數為 Array
3.函數的構造函數為 Function
4.字符串的構造函數為 String
5.數字的構造函數為 Number
6.布爾的構造函數為 Boolean
7.正則表達式的構造函數為 RegExp
我們可以向構造函數的 prototype 添加屬性(常添加方法),使得此屬性對相關變量可用:
復制代碼 代碼如下:
Number.prototype.integer = function() {
return Math[this < 0 ? 'ceil' : 'floor'](this);
}
(1.1).integer(); // 1
作用域
JavaScript 需要通過函數來構建作用域:
復制代碼 代碼如下:
function() {
// ...
}();
這裡創建並執行了一個匿名函數。通過作用域能夠隱藏不希望暴露的變量:
復制代碼 代碼如下:
var obj = function() {
// 隱藏 value,外部無法訪問
var value = 0;
return {
// 僅此方法可以修改 value
increment: function() {
value += 1;
},
// 僅此方法可以讀取 value
getValue: function() {
return value;
}
};
}();
obj.increment();
obj.getValue() === 1;
繼承
JavaScript 實現繼承的方式很多。
在創建對象時,我們可以設置對象關聯的原型對象,我們這樣做:
復制代碼 代碼如下:
// 創建一個對象 o,其原型對象為 {x:1, y:2}
var o = Object.create({x:1, y:2});
Object.create 方法被定義在 ECMAScript 5 中,如果你使用 ECMAScript 3 時可以自己實現一個 create 方法:
復制代碼 代碼如下:
// 如果未定義 Object.create 方法
if (typeof Object.create !== 'function') {
// 創建 Object.create 方法
Object.create = function (o) {
var F = function () {};
F.prototype = o;
// 創建一個新對象,此對象的原型對象為 o
return new F();
};
}
通過 Object.create 方法我們進行基於原型繼承:一個新對象直接繼承一個舊對象的屬性(相對於基於類的繼承,這裡無需類的存在,對象直接繼承對象)。范例:
復制代碼 代碼如下:
var myMammal = {
name: 'Herb the Mammal',
get_name: function() {
return this.name;
},
says: function() {
return this.saying || '';
}
};
// 繼承 myMammal
var myCat = Object.create(myMammal);
myCat.name = 'Henrietta';
myCat.saying = 'meow';
myCat.purr = function(n) {
var i, s = '';
for (i = 0; i < n; i += 1) {
if (s) {
s += '-';
}
s += 'r';
}
return s;
};
myCat.get_name = function() {
return this.says() + ' ' + this.name + ' ' + this.says();
};
上面的代碼很簡單,但是沒法保護私有成員。我們可以使用模塊模式。在模塊模式中,某類對象由一個函數產生,並利用函數作用域保護私有成員不被外部訪問:
復制代碼 代碼如下:
// mammal 函數,用於構造 mammal 對象
var mammal = function(spec) {
// that 為構造的對象
var that = {};
// 公有方法 get_name 可被外部訪問
that.get_name = function() {
// spec.name 外部無法直接訪問
return spec.name;
};
// 公有方法 says 可被外部訪問
that.says = function() {
// spec.saying 外部無法直接訪問
return spec.saying || '';
};
return that;
};
// 創建 mammal 對象
var myMammal = mammal({name: 'Herb'});
// cat 函數,用於構造 cat 對象
var cat = function(spec) {
spec.saying = spec.saying || 'meow';
// cat 繼承自 mammal,因此先構造出 mammal 對象
var that = mammal(spec);
// 添加公有方法 purr
that.purr = function(n) {
var i, s = '';
for (i = 0; i < n; i += 1) {
if (s) {
s += '-';
}
s += 'r';
}
return s;
};
// 修改公有方法 get_name
that.get_name = function() {
return that.says() + ' ' + spec.name +
' ' + that.says();
return that;
};
};
// 創建 cat 對象
var myCat = cat({name: 'Henrietta'});
在模塊模式中,繼承是通過調用構造函數來實現的。另外,我們還可以在子類中訪問父類的方法:
復制代碼 代碼如下:
Object.prototype.superior = function(name) {
var that = this, method = that[name];
return function() {
return method.apply(that, arguments);
};
};
var coolcat = function (spec) {
// 獲取子類的 get_name 方法
var that = cat(spec), super_get_name = that.superior('get_name');
that.get_name = function(n) {
return 'like ' + super_get_name() + ' baby';
};
return that;
};