DIV CSS 佈局教程網

 DIV+CSS佈局教程網 >> 網頁腳本 >> JavaScript入門知識 >> 關於JavaScript >> JavaScript學習筆記之創建對象
JavaScript學習筆記之創建對象
編輯:關於JavaScript     

JavaScript 有Date、Array、String等這樣的內置對象,功能強大使用簡單,人見人愛,但在處理一些復雜的邏輯的時候,內置對象就很無力了,往往需要開發者自定義對象。

從JavaScript定義上講對象是無序屬性的集合,其屬性可以包含基本值、對象或函數。也就是說對象是一組沒有特定順序的屬性,每個屬性會映射到一個值上,是一組鍵值對,值可以是數據或對象。

對象是JavaScript的基本數據類型。在JavaScript中除了字符串、數字、true、false、null和undefined之外的值都是對象。所以,學習JavaScript不把對象學習明白要繼續往下學習就非常的困難。從今天開始進入對象的學習中。

概述

在JavaScript中對象是一種基本的數據類型,在數據結構上是一種散列表,可以看作是屬性的無序集合,除了原始值其他一切都是對象。可通過屬性名訪問這些值,而屬性名可以是包含空字符在內的任意字符串。簡單點說,一個對象就是一系列屬性的集合,一個屬性包含一個名字(key)和一個值(value)。

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

創建對象

既然要學習對象,那得先要有一個對象,這樣問題就來了,JavaScript中對象要怎麼創建呢?接下來就來看看在JavaScript中如何創建對象。

很多有關於JavaScript書在介紹對象創建的方法時,主要有:

使用對象字面量創建對象(key-value)

使用new創建對象

使用Object.create()創建對象

使用函數創建對象

使用原型創建對象

使用對象字面量創建對象

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

通過對象字面量創建對象的語法如下:

var obj = {
property_1: value_1, // property_# 可能是一個標識符...
2: value_2, // 或者是一個數字
// ...,
"property n": value_n // 或是一個字符串
};

這裡obj是創建的對象的名稱,每一個property_i是一個標識符(可以是一個名稱、數字或字符串字面量),並且每個value_i是一個其值,並且將這個值賦予給property_i。來看一個具體實例:

var girl = {
'name': '欣欣',
'age' : 18,
'height': 175,
'weight': 45
}

這個示例創建了一個名為girl的對象,對象有四個屬性name、age、height和weight。這四個屬性對應有一個屬性值。

使用對象字面量創建對象時,如果留空其花括號({}),則可以定義只包含默認屬性和方法的對象。如:

var obj = {}

使用這種方式創建的對象時,可以通過點(.),也就是obj.key給對象obj創建對象屬性,並且賦予對象的屬性值。另外也可以通過方括號([]),也就是obj['key']給對象obj創建對象屬性,並且賦予對象的屬性值。如下面的示例:

var girl = {};
girl.name = '欣欣';
girl.age = 18;
girl['height'] = 175;
girl['weight'] = 45;

此時在Chrome中打印girl對象時,輸出的結果如下所示:

console.log(girl);
//Object {name: "欣欣", age: 18, height: 175, weight: 45}

使用new創建對象

使用new操作符後跟Object構造函數(有關於構造函數,後面再講)也可以創建對象:

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

雖然初始狀態下,obj是一個空對象,但在JavaScript中可以很方便地動態添加和使用成員,所以我們可以不斷加入成員變量和方法。如:

var girl = new Object();
girl['name'] = '欣欣';
girl['age'] = 18;
girl['height'] = 175;
girl['weight'] = 45;

使用Object.create()創建對象

對象也可以用Object.create()方法創建。該方法非常有用,因為它允許你為創建的對象選擇其原型對象,而不用定義一個構造函數。

Object.create()方法創建一個擁有指定原型和若干個指定屬性的對象。

Object.create(proto, [ propertiesObject ])

Object.create()方法創建一個對象,其接受兩個參數,其中第一個參數是這個對象的原型對象proto;第二個是一個可選參數,用以對對象的屬性做進一步描述。這個方法使用很簡單:

var obj1 = Object.create({
x: 1,
y: 2
}); //對象obj1繼承了屬性x和y
var obj2 = Object.create(null); //對象obj2沒有原型

如果 proto 參數不是 null 或一個對象值,則拋出一個 TypeError 異常。
有關於Object.create()方法更多的示例可以點擊這裡進行了解。

使用函數創建對象

在實際使用當中,字面量創建對象雖然很有用,但是它並不能滿足我們的所有需求,我們希望能夠和其他後台語言一樣創建一個類,然後聲明類的實例就能夠多次使用,而不用每次使用的時候都要重新創建它。

因為JavaScript沒有類,一般都是使用函數來定義一個類似其他語言中的類格式,比如:

function Person() {
this.name = "mary"; // 為這個類添加一個成員變量name,並為這個成員變量賦默認值
this.age = 5;
this.sayHello = function () {
console.log(this.name + " : " + this.age);
};
}

定義好類之後,我們就可以像下面這樣創建和使用對象:

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()函數不是用來被調用的,它是用來被new用的。

通過原型創建對象

這種方法比較前幾種方法來說算是最為復雜,最為高級的方法。這裡還涉及到封裝的一些知識(有關於這些後續學習到了再記錄)。這裡簡單看看如何通過原型創建對象。

首先像函數方法創建對象一樣,先定義一個函數:

function Person() {
this.name = "W3cplus";
this.age = 5;
this.walk = function () {
console.log("一個前端網站...");
};
}

然後在外部可以擴允成員:

//添加成員方法
Person.prototype.sayHello = function () {
console.log("hello");
};
//也可以添加成員屬性,
Person.prototype.height = 100;

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

function Person() { }
Person.prototype.name = "W3cplus";
Person.prototype.age = 5;
Person.prototype.walk = function () {
console.log("一個前端網站...");
};
Person.prototype.sayHello = function () {
console.log("hello");
};
Person.prototype.height = 100;

屬性訪問

對象屬性訪問一般有兩種方法,第一種是使用點(.)表示法,這也是最常用的一種方法,也是很多面向對象語言中通用的語法。第二種方法還可以使用中括號([])表示法來訪問對象的屬性。在使用中括號語法時,應該將要訪問的屬性以字符串的形式放在中括號中。如下:

person['name'];
person.name;

從功能上來說,上面兩種方法訪問對象屬性沒有任何區別。但中括號語法的主要優點有兩個:

可能通過變量訪問屬性,如下:

var propertyName = 'name';
person[propertyName];

另外一個優點是,如果屬性名中包含了會導致語法錯誤的字符或者屬性名使用的是關鍵字或保留字,可以使用中括號訪問屬性,如下:

person['first name'];

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

總結

對象是JavaScript的基本數據類型,如果要更好的往下學習JavaScript相關的知識,很有必要先把對象整明白。這篇主要介紹了幾種創建對象的方法。較為簡單的是通過字面量({})和new Object()方法創建,但這兩種方法創建的對象復用性較差;使用Object.create()創建對象時不需要定義一個構造函數就允許你在對象中選擇其原型對象。除了這幾種方法還可以使用函數和原型創建對象,而這兩種方法相對來說可復用性強,只是使用較為復雜。

有關JavaScript學習筆記之創建對象的知識小編就給大家介紹到這裡,希望對大家有所幫助!

XML學習教程| jQuery入門知識| AJAX入門| Dreamweaver教程| Fireworks入門知識| SEO技巧| SEO優化集錦|
Copyright © DIV+CSS佈局教程網 All Rights Reserved