Latest web development tutorials
×

JavaScript 教程

JavaScript 教程 JavaScript 簡介 JavaScript 用法 JavaScript 輸出 JavaScript 語法 JavaScript 語句 JavaScript 註釋 JavaScript 變量 JavaScript 數據類型 JavaScript 對象 JavaScript 函數 JavaScript 作用域 JavaScript 事件 JavaScript 字符串 JavaScript 運算符 JavaScript 比較 JavaScript If...Else JavaScript switch JavaScript for JavaScript while JavaScript Break & Continue JavaScript typeof JavaScript 類型轉換 JavaScript 正則表達式 JavaScript 錯誤 JavaScript 調試 JavaScript 變量提升 JavaScript 嚴格模式 JavaScript 使用誤區 JavaScript 表單驗證 JavaScript 保留關鍵字 JavaScript JSON JavaScript void JavaScript 代碼規範

JS 函數

JavaScript 函數定義 JavaScript 函數參數 JavaScript 函數調用 JavaScript 閉包

JS HTML DOM

DOM 簡介 DOM HTML DOM CSS DOM 事件 DOM EventListener DOM 元素

JS 高級教程

JavaScript 對象 JavaScript Number JavaScript String JavaScript Date JavaScript Array JavaScript Boolean JavaScript Math JavaScript RegExp 對象

JS 瀏覽器 BOM

JavaScript Window JavaScript Window Screen JavaScript Window Location JavaScript Window History JavaScript Navigator JavaScript 彈窗 JavaScript 計時事件 JavaScript Cookies

JS 庫

JavaScript 庫 JavaScript 測試 jQuery JavaScript 測試 Prototype

JS 實例

JavaScript 實例 JavaScript 對象實例 JavaScript 瀏覽器對象實例 JavaScript HTML DOM 實例 JavaScript 總結

JS 參考手冊

JavaScript 對象 HTML DOM 對象

JavaScript 對象

JavaScript 中的所有事物都是對象:字符串、數值、數組、函數...

此外,JavaScript 允許自定義對象。


所有事物都是對象

JavaScript 提供多個內建對象,比如String、Date、Array 等等。 對像只是帶有屬性和方法的特殊數據類型。

  • 布爾型可以是一個對象。
  • 數字型可以是一個對象。
  • 字符串也可以是一個對象
  • 日期是一個對象
  • 數學和正則表達式也是對象
  • 數組是一個對象
  • 甚至函數也可以是對象

JavaScript 對象

對像只是一種特殊的數據。 對象擁有屬性方法


訪問對象的屬性

屬性是與對象相關的值。

訪問對象屬性的語法是:

objectName.propertyName

這個例子使用了String 對象的length 屬性來獲得字符串的長度:

var message="Hello World!";
var x=message.length;

在以上代碼執行後,x 的值將是:

12


訪問對象的方法

方法是能夠在對像上執行的動作。

您可以通過以下語法來調用方法:

objectName.methodName()

這個例子使用了String 對象的toUpperCase() 方法來將文本轉換為大寫:

var message="Hello world!";
var x=message.toUpperCase();

在以上代碼執行後,x 的值將是:

HELLO WORLD!


創建JavaScript 對象

通過JavaScript,您能夠定義並創建自己的對象。

創建新對像有兩種不同的方法:

  • 定義並創建對象的實例
  • 使用函數來定義對象,然後創建新的對象實例

創建直接的實例

這個例子創建了對象的一個新實例,並向其添加了四個屬性:

實例

person=new Object();
person.firstname="John";
person.lastname="Doe";
person.age=50;
person.eyecolor="blue";

嘗試一下»

替代語法(使用對象literals):

實例

person={firstname:"John",lastname:"Doe",age:50,eyecolor:"blue"};

嘗試一下»


使用對象構造器

本例使用函數來構造對象:

實例

function person(firstname,lastname,age,eyecolor)
{
this.firstname=firstname;
this.lastname=lastname;
this.age=age;
this.eyecolor=eyecolor;
}

嘗試一下»

在JavaScript中,this通常指向的是我們正在執行的函數本身,或者是指向該函數所屬的對象(運行時)


創建JavaScript 對象實例

一旦您有了對象構造器,就可以創建新的對象實例,就像這樣:

var myFather=new person("John","Doe",50,"blue");
var myMother=new person("Sally","Rally",48,"green");


把屬性添加到JavaScript 對象

您可以通過為對象賦值,向已有對象添加新屬性:

假設personObj 已存在- 您可以為其添加這些新屬性:firstname、lastname、age 以及eyecolor:

person.firstname="John";
person.lastname="Doe";
person.age=30;
person.eyecolor="blue";

x=person.firstname;

T在以上代碼執行後,x 的值將是:

John


把方法添加到JavaScript 對象

方法只不過是附加在對像上的函數。

在構造器函數內部定義對象的方法:

function person(firstname,lastname,age,eyecolor)
{
	this.firstname=firstname;
	this.lastname=lastname;
	this.age=age;
	this.eyecolor=eyecolor;

	this.changeName=changeName;
	function changeName(name)
	{
		this.lastname=name;
	}
}

changeName() 函數name 的值賦給person 的lastname 屬性。

現在您可以試一下:

myMother.changeName("Doe");

嘗試一下»

JavaScript 類

JavaScript 是面向對象的語言,但JavaScript 不使用類。

在JavaScript 中,不會創建類,也不會通過類來創建對象(就像在其他面向對象的語言中那樣)。

JavaScript 基於prototype,而不是基於類的。


JavaScript for...in 循環

JavaScript for...in 語句循環遍歷對象的屬性。

語法

for (variable in object)
{
	执行的代码……
}

注意: for...in循環中的代碼塊將針對每個屬性執行一次。

實例

循環遍歷對象的屬性:

實例

var person={fname:"John",lname:"Doe",age:25};

for (x in person)
{
txt=txt + person[x];
}

嘗試一下»