更多物件導向的JavaScript

前端攻城小牛啊發表於2018-10-26
物件JavaScript

JavaScript有不止一種方法建立物件。

簡單的物件建立

最簡單的建立物件的方法是用一個新的Object開始，然後向其中新增內容。

要建立一個新Object，只需：

var newObject = new Object()；
複製程式碼

變數newObject現在指向一個Object的例項，Object是JavaScript中所有物件的基類。要給它增加一個叫firstName的元素，只需：

newObject.firstName = "frank";
複製程式碼

也可以很容易地新增函式：

newObject.sayName = function(){
 alert(this.firstName);
}
複製程式碼

現在呼叫newObject.sayName()就會彈出一個“frank”的警告資訊。

與大多數成熟的面嚮物件語言不同，在JavaScript中，不必為物件例項建立類或藍圖。你可以在這裡所寫的那樣，在執行時建立它。在物件的整個生命週期中都可以這麼做。在網頁中，這意味著可以在任何時候給物件新增屬性和方法。

事實上，JavaScript實現只是把所有物件當坐關聯陣列。你可以這樣檢索newObject中firstName欄位的值：

var theFirstName = newObject["firstName"];
複製程式碼

同樣的，可以這樣呼叫sayName()函式：

newObject["sayName"]();
複製程式碼

可以利用這個特點實現基於某種邏輯呼叫某個物件的方法：

var newObject = new Object();
newObject.firstName = "frank";
newObject.lastName = "tom";
newObject.sayFirstName = function(){
 alert(this.firstName);
}
newObject.sayLastName = function(){
 alert(this.lastName);
}
var funName = 1;
if(funName == 1 ){
 funName = "sayFirstName"
}
if(funName == 2 ){
 funName = "sayLastName"
}
newObject[funName]();
複製程式碼

全棧開發交流群：864305860.png

原型

JavaScript中的每一個獨立的物件都有一個與之關聯的原型（prototype）屬性，它可以被看做一個簡化的繼承形式。基本上，他的工作方式是：當構造一個物件的新例項時，定義在物件的原型中的所有屬性和方法，在執行時都會附著在那個新的例項上。例如:

function newClass(){
 this.firstName = "frank";
}
newClass.prototype.sayFirstName = function(){
 alert(this.firstName);
}
var nc = new newClass();
nc.sayFirstName();
複製程式碼

與之前的例子不同，無論你建立了多少個newClass例項，記憶體中sayFirstName()函式都只會有一個單獨的例項。這個方法實際是附加在每個例項上，而且this關鍵字還是在執行時被計算。所有this通常指向它所屬的那個特定的newClass例項。

image.png

物件導向的好處

無論選擇哪種方法，將程式碼物件導向化都有很多好處。一個重要的好處就是，每一個物件本質上就是一個名稱空間。可以用此來模擬Java和C#的 包。

另一個好處就是可以使用物件來隱藏資料。例如：

function newClass(){
 this.firstName = "frank";
 lastName = "tom";
}
var nc = new newClass();
alert(nc.firstName);
alert(nc.lastName);
複製程式碼

執行上面的程式碼會有兩個警告資訊：第一個輸出“frank”，第二個輸出“undefined”。這是因為lastName欄位在newClass的例項外是不可訪問的。注意欄位定義的不同：任何使用this關鍵字定義的欄位，都可以在類之外訪問。而沒有使用this定義的欄位，都只能在類內部訪問。該規則對方法同樣適用。

image.png
使用JSON建立物件

JSON實際是JavaScript規範中的一個核心部分，最初的目的是為了快速簡便地定義賦值的物件關係圖，也就是那些巢狀與其他物件中的物件的例項。

JavaScript裡的物件只是隱藏在面具下的關聯陣列。這就是JSON可以運轉的原因。

下面是使用JSON建立一個newObject物件的例子：

function sayFirstName(){
 alert(this.firstName);
}
var newObject = {
 firstName:"frank",
 lastName:"tom",
 sayLastName:function(){alert(this.lastName;)},
 sayFirstName:sayFirstName
};
複製程式碼

使用JSON和定義一個陣列非常相似。物件中的函式可以是內聯的（上例sayLastName()），也可以引用外部函式（上例sayFirstName()）。

在JSON中，可以隨意巢狀物件定義來建立物件的層級關係。入下，在newObject中加入了LastName物件。

function sayFirstName(){
 alert(this.firstName);
}
var newObject = {
 firstName:"frank",
 lastName:{
 name:"Tom",
 sayLastName:function(){alert(this.name);}
 },
 sayFirstName:sayFirstName
};
複製程式碼

然後，可以通過newObject.LastName.sayLastName()來呼叫相關方法。

相關文章