首頁 >web前端 >js教程 >深入剖析JavaScript程式設計中的物件概念_基礎知識

深入剖析JavaScript程式設計中的物件概念_基礎知識

WBOY
WBOY原創
2016-05-16 15:35:411178瀏覽

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,您能夠定義並建立自己的物件。
建立新物件有兩種不同的方法:

  1. 定義並建立物件的實例
  2. 使用函數來定義對象,然後建立新的對象實例

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

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");

陳述:
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn