前端學習(32)~js學習(九)：對象簡介和對象的基本操作
- 2020 年 3 月 18 日
- 筆記
面向對象簡介
面向對象：可以創建自定義的類型，很好的支援繼承和多態。
面向對象的特徵：封裝、繼承、多態。
對象的概念
在 JavaScript 中，對象是一組無序的相關屬性和方法的集合。
對象的作用是：封裝資訊。比如Student類里可以封裝學生的姓名、年齡、成績等。
對象具有特徵（屬性）和行為（方法）。
為什麼需要對象
保存一個值時，可以使用變數，保存多個值（一組值）時，可以使用數組。
比如，如果要保存一個人的資訊，通過數組的方式可以這樣保存：
var arr = ['王二', 35, '男', '180'];
上面這種表達方式比較亂。而如果用JS中的對象來表達，結構會更清晰。如下：
var person = {}; person.name = '王二'; person.age = 35; person.sex = '男'; person.height = '180';
由此可見，對象裡面的屬性均是鍵值對：
- 鍵：相當於屬性名。
- 值：相當於屬性值，可以是任意類型的值（數字類型、字元串類型、布爾類型，函數類型等）。
兩條補充
補充1：對象的屬性值可以是任何的數據類型，也可以是個函數：（也稱之為方法）
var obj = new Object(); obj.sayName = function () { console.log('smyhvae'); }; console.log(obj.sayName); //沒加括弧，就是獲取方法 console.log('-----------'); console.log(obj.sayName()); //加了括弧，就是調用方法。即：執行函數內容，並執行函數體的內容
補充2：對象中的屬性值，也可以是一個對象。
舉例：
//創建對象 obj1 var obj1 = new Object(); obj1.test = undefined; //創建對象 obj2 var obj2 = new Object(); obj2.name = "smyhvae"; //將整個 obj2 對象，設置為 obj1 的屬性 obj1.test = obj2; console.log(obj1.test.name);
列印結果為：smyhvae
對象和數據類型之間的關係
數據類型分類：
- 基本數據類型（值類型）：String 字元串、Number 數值、Boolean 布爾值、Null 空值、Undefined 未定義。
- 引用數據類型（引用類型）：Object 對象。
基本數據類型：
基本數據類型的值直接保存在棧記憶體中，值與值之間是獨立存在，修改一個變數不會影響其他的變數。
對象：
只要不是那五種基本數據類型，就全都是對象。
如果使用基本數據類型的數據，我們所創建的變數都是獨立，不能成為一個整體。
對象屬於一種複合的數據類型，在對象中可以保存多個不同數據類型的屬性。
對象是保存到堆記憶體中的，每創建一個新的對象，就會在堆記憶體中開闢出一個新的空間。變數保存的是對象的記憶體地址（對象的引用）。
換而言之，對象的值是保存在堆記憶體中的，而對象的引用（即變數）是保存在棧記憶體中的。
如果兩個變數保存的是同一個對象引用，當一個變數修改屬性時，另一個也會受到影響。
例如：
var obj = new Object(); obj.name = "孫悟空"; var obj2 = obj; //修改obj的name屬性 obj.name = "豬八戒";
對象的分類
1.內置對象：
- 由ES標準中定義的對象，在任何的ES的實現中都可以使用
- 比如：Math、String、Number、Boolean、Function、Object….
2.宿主對象：
- 由JS的運行環境提供的對象，目前來講主要指由瀏覽器提供的對象。
- 比如 BOM DOM。比如
console、document。
3.自定義對象：
- 由開發人員自己創建的對象
對象的基本操作
創建對象
使用new關鍵字調用的函數，是構造函數constructor。構造函數是專門用來創建對象的函數。
例如：
var obj = new Object();
記住，使用typeof檢查一個對象時，會返回object。
向對象中添加屬性
在對象中保存的值稱為屬性。
向對象添加屬性的語法：
對象.屬性名 = 屬性值;
舉例：
var obj = new Object(); //向obj中添加一個name屬性 obj.name = "孫悟空"; //向obj中添加一個gender屬性 obj.gender = "男"; //向obj中添加一個age屬性 obj.age = 18; console.log(JSON.stringify(obj)); // 將 obj 以字元串的形式列印出來
列印結果：
{ "name":"孫悟空", "gender":"男", "age":18 }
獲取對象中的屬性
方式1：
語法：
對象.屬性名
如果獲取對象中沒有的屬性，不會報錯而是返回undefined。
舉例：
var obj = new Object(); //向obj中添加一個name屬性 obj.name = "孫悟空"; //向obj中添加一個gender屬性 obj.gender = "男"; //向obj中添加一個age屬性 obj.age = 18; // 獲取對象中的屬性，並列印出來 console.log(obj.gender); // 列印結果：男 console.log(obj.color); // 列印結果：undefined
方式2：可以使用[]這種形式去操作屬性
對象的屬性名不強制要求遵守標識符的規範，不過我們盡量要按照標識符的規範去做。
但如果確實要使用特殊的屬性名，就不能採用.的方式來操作對象的屬性。比如說，123這種屬性名，如果我們直接寫成obj.123 = 789來操作屬性，是會報錯的。那怎麼辦呢？辦法如下：
語法格式如下：（讀取時，也是採用這種方式）
// 注意，括弧里的屬性名，必須要加引號 對象['屬性名'] = 屬性值
上面這種語法格式，舉例如下：
obj['123'] = 789;
重要：使用[]這種形式去操作屬性，更加的靈活，因為，我們可以在[]中直接傳遞一個變數。
修改對象的屬性值
語法：
對象.屬性名 = 新值
obj.name = "tom";
刪除對象的屬性
delete obj.name;
in 運算符
通過該運算符可以檢查一個對象中是否含有指定的屬性。如果有則返回true，沒有則返回false。
語法：
"屬性名" in 對象
舉例：
//檢查obj中是否含有name屬性 console.log("name" in obj);
我們平時使用的對象不一定是自己創建的，可能是別人提供的，這個時候，in 運算符可以派上用場。
對象字面量
如果要創建一個對象，我們可以使用下面這種方式：
var obj = new Object();
但是上面的這種方式，比較麻煩，我們還有更簡潔的方式來創建一個對象。如下。
使用對象字面量來創建一個對象：
var obj = {};
使用對象字面量，可以在創建對象時，直接指定對象中的屬性。語法：{屬性名:屬性值,屬性名:屬性值….}
例如：
var obj2 = { name: "豬八戒", age: 13, gender: "男", test: { name: "沙僧" } //我們還可以在對象中增加一個方法。以後可以通過obj2.sayName()的方式調用這個方法 sayName: function(){ console.log('smyhvae'); } };
對象字面量的屬性名可以加引號也可以不加，建議不加。如果要使用一些特殊的名字，則必須加引號。
屬性名和屬性值是一組一組的鍵值對結構，鍵和值之間使用:連接，多個值對之間使用,隔開。如果一個屬性之後沒有其他的屬性了，就不要寫,，因為它是對象的最後一個屬性。
遍歷對象中的屬性：for … in
語法：
for (var 變數 in 對象名) { }
解釋：對象中有幾個屬性，循環體就會執行幾次。每次執行時，會將對象中的每個屬性的 屬性名 賦值給變數。
語法舉例：
for (var key in obj) { console.log(key); // 這裡的 key 是：對象屬性的鍵 console.log(obj[key]); // 這裡的 obj[key] 是：對象屬性的值 }
舉例：
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <script type="text/javascript"> var obj = { name: "smyhvae", age: 26, gender: "男", address: "shenzhen", sayHi: function() { console.log(this.name); } }; // 遍歷對象中的屬性 for (var key in obj) { console.log("屬性名:" + key); console.log("屬性值:" + obj[key]); // 注意，因為這裡的屬性名 keu 是變數，所以，如果想獲取屬性值，不能寫成 obj.key，而是要寫成 obj[key] } </script> </head> <body> </body> </html>
列印結果：
屬性名:name 屬性值:smyhvae 屬性名:age 屬性值:26 屬性名:gender 屬性值:男 屬性名:address 屬性值:shenzhen 屬性名:sayHi 屬性值:function() { console.log(this.name); }
