JavaScript極簡入門教程（二）：對象和函數(shù)
閱讀本文需要有其他語言的編程經(jīng)驗。
JavaScript 中的簡單類型包括：
1.數(shù)字
2.字符串
3.布爾（true 和 false）
4.null
5.undefined
此外的其他類型均是對象（我們不要被 typeof 操作符的返回值所迷惑），例如：
1.函數(shù)
2.數(shù)組
3.正則表達(dá)式
4.對象（對象自然也是對象）
對象基礎(chǔ)
在 JavaScript 中，對象是屬性的集合（對象為關(guān)聯(lián)數(shù)組），每個屬性包括：
1.屬性名，必須為字符串
2.屬性值，可以為除了 undefined 之外的任何值
通過對象 literal 創(chuàng)建對象：
// 通過對象 literal {} 創(chuàng)建空對象
var empty_object = {};
對象的屬性名和屬性值：
var stooge = {
// "first-name" 為屬性名，"Jerome" 為屬性值
"first-name": "Jerome",
// "last-name" 為屬性名，"Howard" 為屬性值
"last-name": "Howard"
};
如果屬性名是合法的標(biāo)識符，那么可以省略引號：
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";
如果屬性名不是合法標(biāo)識符，那么需要用引號包裹。不存在的屬性值為 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 創(chuàng)建一個對象，它的原型對象為 Object.prototype 對象（Object.prototype 對象本身沒有原型對象）。我們在創(chuàng)建對象的時候，可以設(shè)置對象的原型對象（之后再討論具體的設(shè)置方法）。在嘗試獲取（而非修改）對象的某個屬性時，如果該對象不存在此屬性，那么 JavaScript 會嘗試從此對象的原型對象中獲取此屬性，如果原型對象中沒有該屬性，那么再從此原型對象的原型對象中查找，以此類推，直到 Object.prototype 原型對象。相比獲取屬性而言，我們修改對象的某個屬性時，不會影響原型對象。
函數(shù)基礎(chǔ)
在 JavaScript 中函數(shù)也是對象，其鏈接到 Function.prototype 原型對象（Function.prototype 鏈接到 Object.prototype）。函數(shù)存在一個名為 prototype 的屬性，其值的類型為對象，此對象存在一個屬性 constructor，constructor 的值為此函數(shù)：
var f = function() {}
typeof f.prototype; // 'object'
typeof f.prototype.constructor; // 'function'
f === f.prototype.constructor; // true
函數(shù)是對象，你可以像使用對象一樣使用函數(shù)，也就是說，函數(shù)可以保存在變量、數(shù)組中，可以作為參數(shù)傳遞給函數(shù)，函數(shù)內(nèi)部可以定義函數(shù)。附帶提及一下，函數(shù)有兩個被隱藏的屬性：
1.函數(shù)的上下文
2.函數(shù)的代碼
函數(shù)的創(chuàng)建如下：
var f = function add(a, b) {
return a + b;
}
console.log(f); // 輸出 [Function: add]
關(guān)鍵字 function 后的函數(shù)名是可選的，我們制定函數(shù)名主要出于幾個目的：
1.為了遞歸調(diào)用
2.被調(diào)試器、開發(fā)工具等用來標(biāo)識函數(shù)
很多時候我們并不需要函數(shù)名，沒有函數(shù)名的函數(shù)被叫做匿名函數(shù)。有括號包裹的為參數(shù)列表。JavaScript 不要求實參和形參匹配，例如：
var add = function(a, b) {
return a + b;
}
add(1, 2, 3); // 實參和形參不匹配
如果實參過多，那么多余的實參會被忽略，如果實參過少，那么未被賦值的形參的值為 undefined。函數(shù)一定有一個返回值，如果沒有通過 return 語句指定返回值，那么函數(shù)返回值為 undefined。
一個函數(shù)和其訪問的外部變量組成一個閉包。這是 JavaScript 的關(guān)鍵魅力所在。
函數(shù)調(diào)用
每個函數(shù)被調(diào)用時，會接收到兩個額外的參數(shù)：
1.this
2.arguments
this 的值和具體調(diào)用的模式有關(guān)，在 JavaScript 中有四種調(diào)用模式：
1.方法調(diào)用模式。對象的屬性如果是函數(shù)，則稱其為方法。如果一個方法通過 o.m(args) 被調(diào)用，this 為對象 o（由此可見，在調(diào)用時，this 和 o 才進(jìn)行綁定），例如：
var obj = {
value: 0,
increment: function(v) {
this.value += (typeof v === 'number' ? v : 1);
}
};
obj.increment(); // this === obj
2.函數(shù)調(diào)用模式。如果一個函數(shù)不是一個對象的屬性，那么它將作為一個函數(shù)被調(diào)用，這時候 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 被作為一個函數(shù)來調(diào)用
// 因此 this 為全局對象
helper();
}
};
obj.increment(); // obj.value === 0
我們期望的結(jié)果應(yīng)該是：
obj = {
value: 0,
increment: function() {
var that = this;
var helper = function() {
that.value += 1;
}
helper();
}
};
obj.increment(); // obj.value === 1
3.構(gòu)造函數(shù)調(diào)用模式。意圖使用 new 前綴的函數(shù)被叫做構(gòu)造函數(shù)，例如：
// Test 被叫做構(gòu)造函數(shù)
var Test = function(string) {
this.message = string;
}
var myTest = new Test("Hello World");
一個函數(shù)前面可以加上 new 來調(diào)用（這樣的函數(shù)通常大寫開頭），加上 new 之后將創(chuàng)建一個鏈接到此函數(shù)的 prototype 屬性的對象，且構(gòu)造函數(shù)中 this 為此對象。
4.apply 調(diào)用模式。函數(shù)的 apply 方法被用于調(diào)用函數(shù)，其有兩個參數(shù)，第一個為 this，第二個為參數(shù)數(shù)組，例如：
var add = function(a, b) {
return a + b;
}
var ret = add.apply(null, [3, 4]); // ret === 7
函數(shù)調(diào)用時，我們能夠訪問一個名為 arguments 的類數(shù)組（非真正的 JavaScript 數(shù)組），其包含了所有的實參，這樣我們就能實現(xiàn)變長參數(shù)：
var add = function() {
var sum = 0;
for (var i=0; i<arguments.length; ++i) {
sum += arguments[i];
}
return sum;
}
add(1, 2, 3, 4);
異常
現(xiàn)在來說說 JavaScript 的異常處理機(jī)制。我們使用 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 中大多數(shù)類型存在構(gòu)造函數(shù)：
1.對象的構(gòu)造函數(shù)為 Object
2.數(shù)組的構(gòu)造函數(shù)為 Array
3.函數(shù)的構(gòu)造函數(shù)為 Function
4.字符串的構(gòu)造函數(shù)為 String
5.數(shù)字的構(gòu)造函數(shù)為 Number
6.布爾的構(gòu)造函數(shù)為 Boolean
7.正則表達(dá)式的構(gòu)造函數(shù)為 RegExp
我們可以向構(gòu)造函數(shù)的 prototype 添加屬性（常添加方法），使得此屬性對相關(guān)變量可用：
Number.prototype.integer = function() {
return Math[this < 0 ? 'ceil' : 'floor'](this);
}
(1.1).integer(); // 1
作用域
JavaScript 需要通過函數(shù)來構(gòu)建作用域：
function() {
// ...
}();
這里創(chuàng)建并執(zhí)行了一個匿名函數(shù)。通過作用域能夠隱藏不希望暴露的變量：
var obj = function() {
// 隱藏 value，外部無法訪問
var value = 0;
return {
// 僅此方法可以修改 value
increment: function() {
value += 1;
},
// 僅此方法可以讀取 value
getValue: function() {
return value;
}
};
}();
obj.increment();
obj.getValue() === 1;
繼承
JavaScript 實現(xiàn)繼承的方式很多。
在創(chuàng)建對象時，我們可以設(shè)置對象關(guān)聯(lián)的原型對象，我們這樣做：
// 創(chuàng)建一個對象 o，其原型對象為 {x:1, y:2}
var o = Object.create({x:1, y:2});
Object.create 方法被定義在 ECMAScript 5 中，如果你使用 ECMAScript 3 時可以自己實現(xiàn)一個 create 方法：
// 如果未定義 Object.create 方法
if (typeof Object.create !== 'function') {
// 創(chuàng)建 Object.create 方法
Object.create = function (o) {
var F = function () {};
F.prototype = o;
// 創(chuàng)建一個新對象，此對象的原型對象為 o
return new F();
};
}
通過 Object.create 方法我們進(jìn)行基于原型繼承：一個新對象直接繼承一個舊對象的屬性（相對于基于類的繼承，這里無需類的存在，對象直接繼承對象）。范例：
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();
};
上面的代碼很簡單，但是沒法保護(hù)私有成員。我們可以使用模塊模式。在模塊模式中，某類對象由一個函數(shù)產(chǎn)生，并利用函數(shù)作用域保護(hù)私有成員不被外部訪問：
// mammal 函數(shù)，用于構(gòu)造 mammal 對象
var mammal = function(spec) {
// that 為構(gòu)造的對象
var that = {};
// 公有方法 get_name 可被外部訪問
that.get_name = function() {
// spec.name 外部無法直接訪問
return spec.name;
};
// 公有方法 says 可被外部訪問
that.says = function() {
// spec.saying 外部無法直接訪問
return spec.saying || '';
};
return that;
};
// 創(chuàng)建 mammal 對象
var myMammal = mammal({name: 'Herb'});
// cat 函數(shù)，用于構(gòu)造 cat 對象
var cat = function(spec) {
spec.saying = spec.saying || 'meow';
// cat 繼承自 mammal，因此先構(gòu)造出 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;
};
};
// 創(chuàng)建 cat 對象
var myCat = cat({name: 'Henrietta'});
在模塊模式中，繼承是通過調(diào)用構(gòu)造函數(shù)來實現(xiàn)的。另外，我們還可以在子類中訪問父類的方法：
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;
};
相關(guān)文章
JS/HTML5游戲常用算法之路徑搜索算法 A*尋路算法完整實例
這篇文章主要介紹了JS/HTML5游戲常用算法之路徑搜索算法 A*尋路算法,結(jié)合完整實例形式分析了A*尋路算法的具體實現(xiàn)技巧,代碼備有詳盡的注釋便于理解,需要的朋友可以參考下2018-12-12
這篇文章主要介紹了JS函數(shù)進(jìn)階之繼承用法,結(jié)合實例形式分析了JavaScript函數(shù)繼承相關(guān)定義與使用操作技巧,需要的朋友可以參考下2020-01-01
JavaScript?中的引用類型Date?和RegExp的詳細(xì)介紹
這篇文章主要介紹了JavaScript中的引用類型Date和RegExp的詳細(xì)介紹,引用值(或者對象)是某個特定引用類型的實例,下文相關(guān)介紹，需要的小伙伴可以參考一下2022-07-07
js中使用replace方法完成某個字符的轉(zhuǎn)換
這篇文章主要介紹了js中使用replace方法完成某個字符的轉(zhuǎn)換,比較實用，需要的朋友可以參考下2014-08-08
javascript的鼠標(biāo)事件是個比較龐大的家族。需要的朋友可以參考下。2009-12-12
這篇文章主要介紹了微信小程序全屏滾動字幕的實現(xiàn)方法，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2022-08-08
基于Javascript實現(xiàn)二級聯(lián)動菜單效果
這篇文章主要為大家詳細(xì)介紹了基于Javascript實現(xiàn)二級聯(lián)動菜單效果的相關(guān)資料，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們可以參考一下2016-03-03
JavaScript遍歷數(shù)組和對象的元素簡單操作示例
這篇文章主要介紹了JavaScript遍歷數(shù)組和對象的元素簡單操作,結(jié)合實例形式分析了javascript數(shù)組與對象元素遍歷相關(guān)操作技巧與注意事項,需要的朋友可以參考下2019-07-07
這篇文章主要介紹了JS如何修改數(shù)組對象的Key和指定的值,本文通過示例代碼給大家介紹的非常詳細(xì),對大家的學(xué)習(xí)或工作具有一定的參考借鑒價值,需要的朋友可以參考下2023-10-10
函數(shù)window.open實現(xiàn)關(guān)閉所有的子窗口
這篇文章主要介紹了函數(shù)window.open實現(xiàn)關(guān)閉所有的子窗口的相關(guān)資料，需要的朋友可以參考下。2015-08-08