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,您能夠定義並建立自己的物件。

建立新物件有兩種不同的方法:

  • 使用 Object 定義並建立物件的例項。
  • 使用函式來定義物件,然後建立新的物件例項。

使用 Object

在 JavaScript 中,幾乎所有的物件都是 Object 型別的例項,它們都會從 Object.prototype 繼承屬性和方法。

Object 建構函式建立一個物件包裝器。

Object 建構函式,會根據給定的引數建立物件,具體有以下情況:

  • 如果給定值是 null 或 undefined,將會建立並返回一個空物件。
  • 如果傳進去的是一個基本型別的值,則會構造其包裝型別的物件。
  • 如果傳進去的是引用型別的值,仍然會返回這個值,經他們複製的變數保有和源物件相同的引用地址。
  • 當以非建構函式形式被呼叫時,Object 的行為等同於 new Object()。

語法格式:

// 以建構函式形式來呼叫
new Object([value])

value 可以是任何值。

以下例項使用 Object 生成布林物件:

// 等價於 o = new Boolean(true);
var o = new Object(true);

這個例子建立了物件的一個新例項,並向其添加了四個屬性:

例項

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

嘗試一下 ?

也可以使用物件字面量來建立物件,語法格式如下:

{ name1 : value1, name2 : value2,...nameN : valueN }

其實就是大括號裡面建立 name:value 對,然後 name:value 對之間以逗號 , 隔開。

例項

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

嘗試一下 ?

JavaScript 物件就是一個 name:value 集合。



使用物件構造器

本例使用函式來構造物件:

例項

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 物件

您可以通過為物件賦值,向已有物件新增新屬性:

假設 person 物件已存在 - 您可以為其新增這些新屬性:firstname、lastname、age 以及 eyecolor:

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

x=person.firstname;

在以上程式碼執行後,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]; }

嘗試一下 »


JavaScript 的物件是可變的

物件是可變的,它們是通過引用來傳遞的。

以下例項的 person 物件不會建立副本:

var x = person;  // 不會建立 person 的副本,是引用

如果修改 x ,person 的屬性也會改變:

例項

var person = {firstName:"John", lastName:"Doe", age:50, eyeColor:"blue"} var x = person; x.age = 10; // x.age 和 person.age 都會改變

嘗試一下 »