JavaScript 有Date、Array、String等這樣的內(nèi)置對(duì)象，功能強(qiáng)大使用簡(jiǎn)單，人見人愛，但在處理一些復(fù)雜的邏輯的時(shí)候，內(nèi)置對(duì)象就很無力了，往往需要開發(fā)者自定義對(duì)象。

從JavaScript定義上講對(duì)象是無序?qū)傩缘募?，其屬性可以包含基本值、?duì)象或函數(shù)。也就是說對(duì)象是一組沒有特定順序的屬性，每個(gè)屬性會(huì)映射到一個(gè)值上，是一組鍵值對(duì)，值可以是數(shù)據(jù)或?qū)ο蟆?/P>

對(duì)象是JavaScript的基本數(shù)據(jù)類型。在JavaScript中除了字符串、數(shù)字、true、false、null和undefined之外的值都是對(duì)象。所以，學(xué)習(xí)JavaScript不把對(duì)象學(xué)習(xí)明白要繼續(xù)往下學(xué)習(xí)就非常的困難。從今天開始進(jìn)入對(duì)象的學(xué)習(xí)中。

概述

在JavaScript中對(duì)象是一種基本的數(shù)據(jù)類型，在數(shù)據(jù)結(jié)構(gòu)上是一種散列表，可以看作是屬性的無序集合，除了原始值其他一切都是對(duì)象?？赏ㄟ^屬性名訪問這些值，而屬性名可以是包含空字符在內(nèi)的任意字符串。簡(jiǎn)單點(diǎn)說，一個(gè)對(duì)象就是一系列屬性的集合，一個(gè)屬性包含一個(gè)名字(key)和一個(gè)值(value)。

理解什么是JavaScript對(duì)象，你可以這樣來想。在JavaScript中，一個(gè)對(duì)象就是一個(gè)具有屬性的特體。就拿你看到的一妹子，這妹子就是一個(gè)對(duì)象，她有自己的屬性。比如妹子身高，年齡，姓名等。同樣，在JavaScript中，也可以用屬性來給對(duì)象定義它的特征。

創(chuàng)建對(duì)象

既然要學(xué)習(xí)對(duì)象，那得先要有一個(gè)對(duì)象，這樣問題就來了，JavaScript中對(duì)象要怎么創(chuàng)建呢？接下來就來看看在JavaScript中如何創(chuàng)建對(duì)象。

很多有關(guān)于JavaScript書在介紹對(duì)象創(chuàng)建的方法時(shí)，主要有：

使用對(duì)象字面量創(chuàng)建對(duì)象(key-value)

使用new創(chuàng)建對(duì)象

使用Object.create()創(chuàng)建對(duì)象

使用函數(shù)創(chuàng)建對(duì)象

使用原型創(chuàng)建對(duì)象

使用對(duì)象字面量創(chuàng)建對(duì)象

對(duì)象字面量是創(chuàng)建對(duì)象最簡(jiǎn)單的一種形式，目的是在于簡(jiǎn)化創(chuàng)建包含大量屬性的對(duì)象的過程。對(duì)象字面量由若干屬性名(keys)和屬性值(values)成對(duì)組成的映射表，key和value中間使用冒號(hào)(:)分隔，每對(duì)key/value之間使用逗號(hào)(,)分隔，整個(gè)映射表用花括號(hào)({})括起來。

通過對(duì)象字面量創(chuàng)建對(duì)象的語法如下：

var obj = {

property_1: value_1, // property_# 可能是一個(gè)標(biāo)識(shí)符...

2: value_2, // 或者是一個(gè)數(shù)字

// ...,

"property n": value_n // 或是一個(gè)字符串

};

這里obj是創(chuàng)建的對(duì)象的名稱，每一個(gè)property_i是一個(gè)標(biāo)識(shí)符(可以是一個(gè)名稱、數(shù)字或字符串字面量),并且每個(gè)value_i是一個(gè)其值，并且將這個(gè)值賦予給property_i。來看一個(gè)具體實(shí)例：

var girl = {

'name': '欣欣',

'age' : 18,

'height': 175,

'weight': 45

}

這個(gè)示例創(chuàng)建了一個(gè)名為girl的對(duì)象，對(duì)象有四個(gè)屬性name、age、height和weight。這四個(gè)屬性對(duì)應(yīng)有一個(gè)屬性值。

使用對(duì)象字面量創(chuàng)建對(duì)象時(shí)，如果留空其花括號(hào)({})，則可以定義只包含默認(rèn)屬性和方法的對(duì)象。如：

var obj = {}

使用這種方式創(chuàng)建的對(duì)象時(shí)，可以通過點(diǎn)(.)，也就是obj.key給對(duì)象obj創(chuàng)建對(duì)象屬性，并且賦予對(duì)象的屬性值。另外也可以通過方括號(hào)([])，也就是obj['key']給對(duì)象obj創(chuàng)建對(duì)象屬性，并且賦予對(duì)象的屬性值。如下面的示例：

var girl = {};

girl.name = '欣欣';

girl.age = 18;

girl['height'] = 175;

girl['weight'] = 45;

此時(shí)在Chrome中打印girl對(duì)象時(shí)，輸出的結(jié)果如下所示：

console.log(girl);

//Object {name: "欣欣", age: 18, height: 175, weight: 45}

使用new創(chuàng)建對(duì)象

使用new操作符后跟Object構(gòu)造函數(shù)(有關(guān)于構(gòu)造函數(shù)，后面再講)也可以創(chuàng)建對(duì)象:

var obj = new Object(); // 和 obj = {}相同

雖然初始狀態(tài)下，obj是一個(gè)空對(duì)象，但在JavaScript中可以很方便地動(dòng)態(tài)添加和使用成員，所以我們可以不斷加入成員變量和方法。如：

var girl = new Object();

girl['name'] = '欣欣';

girl['age'] = 18;

girl['height'] = 175;

girl['weight'] = 45;

使用Object.create()創(chuàng)建對(duì)象

對(duì)象也可以用Object.create()方法創(chuàng)建。該方法非常有用，因?yàn)樗试S你為創(chuàng)建的對(duì)象選擇其原型對(duì)象，而不用定義一個(gè)構(gòu)造函數(shù)。

Object.create()方法創(chuàng)建一個(gè)擁有指定原型和若干個(gè)指定屬性的對(duì)象。

Object.create(proto, [ propertiesObject ])

Object.create()方法創(chuàng)建一個(gè)對(duì)象，其接受兩個(gè)參數(shù)，其中第一個(gè)參數(shù)是這個(gè)對(duì)象的原型對(duì)象proto；第二個(gè)是一個(gè)可選參數(shù)，用以對(duì)對(duì)象的屬性做進(jìn)一步描述。這個(gè)方法使用很簡(jiǎn)單：

var obj1 = Object.create({

x: 1,

y: 2

}); //對(duì)象obj1繼承了屬性x和y

var obj2 = Object.create(null); //對(duì)象obj2沒有原型

如果 proto 參數(shù)不是 null 或一個(gè)對(duì)象值，則拋出一個(gè) TypeError 異常。

有關(guān)于Object.create()方法更多的示例可以點(diǎn)擊這里進(jìn)行了解。

使用函數(shù)創(chuàng)建對(duì)象

在實(shí)際使用當(dāng)中，字面量創(chuàng)建對(duì)象雖然很有用，但是它并不能滿足我們的所有需求，我們希望能夠和其他后臺(tái)語言一樣創(chuàng)建一個(gè)類，然后聲明類的實(shí)例就能夠多次使用，而不用每次使用的時(shí)候都要重新創(chuàng)建它。

因?yàn)镴avaScript沒有類，一般都是使用函數(shù)來定義一個(gè)類似其他語言中的類格式，比如：

function Person() {

this.name = "mary"; // 為這個(gè)類添加一個(gè)成員變量name，并為這個(gè)成員變量賦默認(rèn)值

this.age = 5;

this.sayHello = function () {

console.log(this.name + " : " + this.age);

};

}

定義好類之后，我們就可以像下面這樣創(chuàng)建和使用對(duì)象：

var person1 = new Person();

person1.name = 'Tom';

person1.age = 20;

person1.sayHello(); // Tom : 20

var person2 = new Person();

person2.name = 'W3cplus';

person2.age = 5;

person2.sayHello(); // W3cplus : 5

Person()函數(shù)不是用來被調(diào)用的，它是用來被new用的。

通過原型創(chuàng)建對(duì)象

這種方法比較前幾種方法來說算是最為復(fù)雜，最為高級(jí)的方法。這里還涉及到封裝的一些知識(shí)(有關(guān)于這些后續(xù)學(xué)習(xí)到了再記錄)。這里簡(jiǎn)單看看如何通過原型創(chuàng)建對(duì)象。

首先像函數(shù)方法創(chuàng)建對(duì)象一樣，先定義一個(gè)函數(shù)：

function Person() {

this.name = "W3cplus";

this.age = 5;

this.walk = function () {

console.log("一個(gè)前端網(wǎng)站...");

};

}

然后在外部可以擴(kuò)允成員：

//添加成員方法

Person.prototype.sayHello = function () {

console.log("hello");

};

//也可以添加成員屬性，

Person.prototype.height = 100;

一方面，原型可以擴(kuò)充原有類的功能(特別是添加有用方法)，也可以像下面這樣寫:

function Person() { }

Person.prototype.name = "W3cplus";

Person.prototype.age = 5;

Person.prototype.walk = function () {

console.log("一個(gè)前端網(wǎng)站...");

};

Person.prototype.sayHello = function () {

console.log("hello");

};

Person.prototype.height = 100;

屬性訪問

對(duì)象屬性訪問一般有兩種方法，第一種是使用點(diǎn)(.)表示法，這也是最常用的一種方法，也是很多面向?qū)ο笳Z言中通用的語法。第二種方法還可以使用中括號(hào)([])表示法來訪問對(duì)象的屬性。在使用中括號(hào)語法時(shí)，應(yīng)該將要訪問的屬性以字符串的形式放在中括號(hào)中。如下：

person['name'];

person.name;

從功能上來說，上面兩種方法訪問對(duì)象屬性沒有任何區(qū)別。但中括號(hào)語法的主要優(yōu)點(diǎn)有兩個(gè)：

可能通過變量訪問屬性，如下：

var propertyName = 'name';

person[propertyName];

另外一個(gè)優(yōu)點(diǎn)是，如果屬性名中包含了會(huì)導(dǎo)致語法錯(cuò)誤的字符或者屬性名使用的是關(guān)鍵字或保留字，可以使用中括號(hào)訪問屬性，如下：

person['first name'];

一般情況之下，除非必須使用亦是來訪問對(duì)象屬性，否則建議使用點(diǎn)(.)的方法來訪問對(duì)象屬性。

總結(jié)

對(duì)象是JavaScript的基本數(shù)據(jù)類型，如果要更好的往下學(xué)習(xí)JavaScript相關(guān)的知識(shí)，很有必要先把對(duì)象整明白。這篇主要介紹了幾種創(chuàng)建對(duì)象的方法。較為簡(jiǎn)單的是通過字面量({})和new Object()方法創(chuàng)建，但這兩種方法創(chuàng)建的對(duì)象復(fù)用性較差；使用Object.create()創(chuàng)建對(duì)象時(shí)不需要定義一個(gè)構(gòu)造函數(shù)就允許你在對(duì)象中選擇其原型對(duì)象。除了這幾種方法還可以使用函數(shù)和原型創(chuàng)建對(duì)象，而這兩種方法相對(duì)來說可復(fù)用性強(qiáng)，只是使用較為復(fù)雜。

有關(guān)JavaScript學(xué)習(xí)筆記之創(chuàng)建對(duì)象的知識(shí)小編就給大家介紹到這里，希望對(duì)大家有所幫助！