資料結構
網路
RDBMS
作業系統
Java
MS Excel
iOS
HTML
CSS
Android
Python
C 語言程式設計
C++
C#
MongoDB
MySQL
Javascript
PHP
物理學
化學
生物學
數學
英語
經濟學
心理學
社會學
時尚研究
法律研究在 JavaScript 中，物件定義需要遵循哪些規則？
在本教程中，我們將討論在 JavaScript 中物件定義需要遵循的規則。
JavaScript 是一種面向物件的指令碼語言。物件包含許多屬性。屬性由鍵和值組成。當此值為函式時，該屬性稱為方法。
瀏覽器中提供了預定義的物件。我們也可以定義自己的物件。物件的現實生活例子是杯子。顏色、設計、重量和材質是杯子的主要屬性。
物件名稱和屬性名稱區分大小寫。要定義屬性，我們需要為屬性賦值。
現在我們將瞭解定義物件的規則。
使用“new”關鍵字
規則
宣告物件名稱，並在物件名稱和 new Object() 之間使用等號。
使用點運算子定義鍵。
使用等號賦值。
字串值需要用引號括起來。
我們可以按照以下語法使用此方法定義物件。
語法
const objCar = new Object(); objCar.brand = 'Alto'; objCar.model = 'Model'; objCar.year = 1970;
這裡，objCar 是物件，brand、model 和 year 是其屬性。
示例
在此示例中，我們使用 new 關鍵字定義物件，並向用戶顯示物件建立的每個步驟。
<html> <head> <script type="text/javascript"> function getObjDefNew() { var objDefBtnWrap = document.getElementById("objDefBtnWrap"); var objDefPre = document.getElementById("objDefPre"); var objDefStr = ""; const objNew = new Object(); objDefStr += JSON.stringify(objNew) + "<br>"; objNew.newkey1 = 'New Value 1'; objDefStr += JSON.stringify(objNew) + "<br>"; objNew.newkey2 = 'New Value 2'; objDefStr += JSON.stringify(objNew) + "<br>"; objDefPre.innerHTML = "<b>Object creation steps using new keyword</b><br><br>" +objDefStr; } </script> </head> <body> <h2>Define an object using <i> the keyword new</i></h2> <div id="objDefBtnWrap"> <p>Click the button</p> <button onclick="getObjDefNew()">Click Me</button> </div> <pre id="objDefPre"></pre> </body> </html>
使用物件字面量
我們還可以藉助物件初始化器來定義物件。物件初始化器使用逗號分隔鍵值對，並將所有內容括在花括號中。
規則
- 宣告物件名稱，並在開花括號前放置等號 (=)。
- 放置開花括號 ({)。
- 使用冒號 (:) 定義每個鍵值對。
- 使用逗號 (,) 分隔每個鍵值對。
- 使用閉花括號 {} 關閉物件定義。
我們可以按照以下語法使用此方法定義物件。
語法
const objCar = {
brand: 'Alto',
model: 'M1',
year: 1970
};
這裡我們使用物件初始化器格式建立物件 objCar。
示例
在此示例中，我們使用物件字面量定義物件，並向用戶顯示物件建立的每個步驟。
<html> <head> <script type="text/javascript"> function getobjLit() { var objLitBtnWrap = document.getElementById("objLitBtnWrap"); var objLitPre = document.getElementById("objLitPre"); const objLit = { litkey1: 'litval1', litkey2: 'litval2' }; objLitPre.innerHTML = "<b>The object definition steps with the literals</b><br><br>" + JSON.stringify(objLit); } </script> </head> <body> <h2>Define an object using <i>the object literal</i></h2> <div id="objLitBtnWrap"> <p>Click the button</p> <button onclick="getobjLit()">Click Me</button> </div> <pre id="objLitPre"></pre> </body> </html>
使用建構函式
規則
- 建構函式的名稱和物件名稱必須相同。
- 要引用物件，應使用“this”運算子。
- 在等號 (=) 後給出每個鍵的值。
- 在建構函式中不要使用任何 return 語句。
我們可以按照以下語法使用此方法定義物件。
語法
function Car(brand, model, year)
{
this.brand = brand;
this.model = model;
this.year = year;
}
var objCar1 = new Car('C1', 'M1', 'Y1');
var objCar2 = new Car('C2', 'M2', 'Y2');
這裡我們使用 new 關鍵字和 this 關鍵字建立物件。
示例
在此示例中，我們使用建構函式定義物件，並向用戶顯示物件建立的每個步驟。
<html> <head> <script type="text/javascript"> function getObjConst() { var objConstBtnWrap = document.getElementById("objConstBtnWrap"); var objConstPre = document.getElementById("objConstPre"); var objConstStr = ""; function objConst(constval1, constval2) { this.constkey1 = constval1; this.constkey2 = constval2; } var objConst1 = new objConst('constval1', 'constval2'); objConstStr += JSON.stringify(objConst1) + "<br>"; var objConst2 = new objConst('constval3', 'constval4'); objConstStr += JSON.stringify(objConst2) + "<br>"; objConstPre.innerHTML = "<b>Object creation steps using constructor</b><br><br>" +objConstStr; } </script> </head> <body> <h2>Define an object using <i>the constructor function</i></h2> <div id="objConstBtnWrap"> <p>Click the button</p> <button onclick="getObjConst()">Click Me</button> </div> <pre id="objConstPre"></pre> </body> </html>
使用 Object 的 create 方法
我們可以使用此方法，因為它允許我們訪問物件的原型。
規則
- 應使用物件初始化語法新增鍵值和方法。
- Object 的 create 方法的物件名稱和引數名稱必須相同。
語法
我們可以按照以下語法使用此方法定義物件。
const Animal = {
type: 't1',
viewType() {
console.log(this.type);
}
};
const a1 = Object.create(Animal);
a1.viewType();//t1
const a2 = Object.create(Animal);
a2.type = 't2';
a2.viewType();//t2
這裡我們使用物件初始化格式和 Object 的 create 方法定義物件。
示例
在此示例中，我們使用 Object 的“create”方法定義物件，並向用戶顯示物件建立的每個步驟以及物件函式的輸出。
<html> <head> <script type="text/javascript"> function getObjCreat() { var objCreatBtnWrap = document.getElementById("objCreatBtnWrap"); var objCreatPre = document.getElementById("objCreatPre"); var objCreatStr = ""; const objCreat = { creatkey1: 'creatval1', creatFunction() { objCreatStr += "<b>Inside the Object's Function</b><br><br>" + this.creatkey1 + "<br><br>"; } }; objCreatStr += JSON.stringify(objCreat) + "<br><br>"; const objCreat1 = Object.create(objCreat); objCreat1.creatFunction(); const objCreat2 = Object.create(objCreat); objCreat2.creatkey1 = 'creatval2'; objCreatStr += JSON.stringify(objCreat2) + "<br><br>"; objCreat2.creatFunction(); objCreatPre.innerHTML = "<b>Output</b><br><br>" +objCreatStr; } </script> </head> <body> <h2>Define an object using <i>the create method</i></h2> <div id="objCreatBtnWrap"> <p>Click the button</p> <button onclick="getObjCreat()">Click Me</button> </div> <pre id="objCreatPre"></pre> </body> </html>
在本教程中，我們學習了四種定義物件的方法，並且現在知道了定義物件的規則。在我們這裡提供的四種方法中，new 關鍵字方法在程式碼編寫方面更方便。
更新時間： 2022-10-31
300 次瀏覽
廣告