JavaScript編程基礎

JavaScript編程基礎 – 對象

JavaScript Programming Essentials – Object

本文簡要介紹JavaScript面向對象編程，如何實現其中的對象以及實例演示，希望對大家學習JavaScript有所幫助。

1. 面向對象編程特點

面向對象編程(Object-Oriented Programming, 即OOP) 是一種在Java, C++, Python等編程語言中廣泛應用的編程范式。而JavaScript以獨特的方式沿襲了傳統的面向對象編程，與傳統的編程語言不同，JavaScript有其自己的方式來實現面向對象編程。

接下來，簡要介紹以下幾個小節，以便理解對象：
? 如何創建和使用對象
? 對象的屬性
? 對象的方法

2. 對象

1）數組的特性

我們從數組引述到對象。

數組是JavaScript語言的重要數據結構。數組實際上就是一組值的列表，該列表的每一個值都有自己的索引（即數字鍵），索引從零開始，依次遞增。

下面是數組的示例：

var colors = [‘red’, ‘blue’, ‘yellow’, ‘purple’, ‘orange’];
console.log(colors);

執行結果如下圖所示：
在這里插入圖片描述
接下來，如果要通過索引輸出值，如下代碼：

console.log(colors[0]);
console.log(colors[3]);

執行結果如下圖所示：

在這里插入圖片描述
將索引排列起來，再把對應的值排列起來，就會列出一個所以對應一個值的列表，形成鍵、值對的列表。

2）對象的特性

對象跟數組很相似，唯一的區別是，它的鍵是自定義的；即對象的索引方式不再限于數字，也可以是類似變量名的鍵名，例如：firt_name, last_name, age等等。

例如，以下的簡單對象：

var hero = {
breed: ‘Turtles’,
occupation: ‘Ninja’
};

可以看到，對象hero有以下特征：

用于表示對象的變量名hero;
使用大括號{ }來定義對象；（與數組的方括號[ ]不同）；
括號中用逗號分隔的是組成該對象的元素（即屬性）；
鍵/值對之間用冒號分隔，像key: value的格式；

有時在鍵上加一對單引號或者雙引號，例如以下代碼，三行完全相同：

var hero = {occupation: 1};
var hero = {'occupation': 1};
var hero = {"occupation": 1};

如果屬性名為JavaScript的保留字之一，或者不符合變量命名規則，就必須為其添加一對引號。

3）對象的屬性和方法

數組通常包含元素；而對象包含的是屬性。

由于函數本身是一種數據，所以，對象的屬性也可以是函數；此時，我們稱該屬性為方法，用它來執行某種動作。
如下代碼：

var dog = {name: 'Johnson',talk: function () {return 'Woof, woof!';}
};
console.log(dog.name);
console.log(dog.talk());

執行結果如下圖所示：
在這里插入圖片描述
可以看出，console.log函數輸出了dog類其屬性name的值，也輸出了其方法talk()的值。

訪問對象屬性可以用上述的點表示法，例如：dog.name, 也可以用方括號表示法，例如：dog[‘name’].

那么，對象中包含其它對象呢？如何表示其屬性？看以下代碼：

var book = {name: 'JavaScript Tutorial',published: 2021,author: {first_name: 'Amy',last_name: 'Antonio'}
};

如果想要輸出該對象的屬性對象author的屬性，則需要用“."方式來表示：

console.log(book.author.first_name);

或者用方括號：

console.log(book[‘author’][‘first_name’]);

執行結果如下圖所示：

在這里插入圖片描述

4）修改屬性與方法

JavaScript允許隨時對現存的對象的屬性和方法進行修改，也包括添加與刪除屬性。

以下代碼先創建一個空的對象student。

var student = {};

接下來，添加一些屬性和方法：

var student = {};
student.name = "Leonardo";
student.sayName = function() {return student.name;
};
console.log(student.sayName());

輸出調用方法sayName()，執行結果如下圖所示：

在這里插入圖片描述
同樣，如果刪除了屬性，如下語句：

delete student.name;

然后，再調用該方法，就找不到被刪除的name屬性了，執行結果如下圖所示：
在這里插入圖片描述
結果變成undefined, 即屬性變量未發現。

5）小結

對象和數組有相似之處，但是對象用大括號{ }包圍；對象中包含鍵值對，鍵可以是括號包含的特殊字符串，值可以是數字或字符串。

對象有屬性和方法。對象的屬性可以被增加、修改和刪除，訪問訪問屬性用點或者方括號。對象的方法可以用點方法被調用。

技術好文陸續推出，敬請關注。

喜歡就點贊哈，您的認可是我的動力。😊