筆記來源：尚矽谷最新版JavaScript基礎全套教程完整版(140集實戰教學,JS從入門到精通)_嗶哩嗶哩_bilibili

• 物件
  • 1、Object 物件
  • 2、物件的分類
    • 2.1、內建物件
    • 2.2、宿主物件
    • 2.3、自定義物件
      • 屬性名
      • 屬性值
  • 3、基本資料型別和引用資料型別
    • 基本資料型別
    • 引用資料型別
  • 4、物件字面量
  • 5、方法
  • 6、列舉物件中的屬性

物件

JS中資料型別

• String 字串
• Number數值
• Boolean 布林值
• Null空值
• Undefined 未定義

以上這五種型別屬於基本資料型別，以後我們看到的值只要不是上邊的5種，全都是物件

1、Object 物件

基本資料型別都是單一的值"hello" 123 true

在JS中來表示一個人的資訊（name gender age）：

var name = "孫悟空";
var gender = "男";
var age = 18;

如果使用基本資料型別的資料，我們所建立的變數都是獨立，不能成為一個整體。

物件屬於一種複合的資料型別，在物件中可以儲存多個不同資料型別的屬性。

2、物件的分類

2.1、內建物件

由ES標準中定義的物件，在任何的ES的實現中都可以使用

常見內建物件有以下，都可以直接通過new呼叫建構函式建立物件例項：

• Object、Function、Array、String、Number、Boolean、Date、RegExp
• Error（EvalError、RangeError、ReferenceError、SyntaxError、TypeError、URIError）

// Math
Math.sqrt(2);
// String
String(2);
// Number
Number("2");

2.2、宿主物件

由JS的執行環境提供的物件，目前來講主要指由瀏覽器提供的物件

比如 BOM DOM

// console
console.log("hello");
// document
document.write("hello");

JavaScript實現包括三部分：

DOM

BOM

DOM 和 BOM 的關係

2.3、自定義物件

由開發人員自己建立的物件

使用new關鍵字呼叫的函式，是建構函式constructor，建構函式是專門用來建立物件的

函式使用typeof檢查一個物件時，會返回object

在物件中儲存的值稱為屬性

• 新增或修改物件屬性的語法：物件.屬性名=屬性值;
• 讀取物件屬性的語法：物件.屬性名
• 刪除物件屬性的語法：delete 物件.屬性名;

var obj = new Object();
// 向obj中新增一個name屬性
obj.name = "孫悟空";
// 向obj中新增一個gender屬性
obj.gender = "男";
// 向obj中新增一個age屬性
obj.age = "18";
// 列印obj
console.log(typeof obj); // object
console.log(obj); // {"age":"18","gender":"男","name":"孫悟空"}
console.log(obj.name); // 孫悟空

屬性名

物件的屬性名不強制要求遵守識別符號的規範，什麼亂七八糟的名字都可以使用，但是我們使用是還是儘量按照識別符號的規範去做

如果要使用特殊的屬性名，不能採用.的方式來操作，而需要使用另一種語法：物件["屬性名"]=屬性值，讀取時也需要採用這種方式

obj["name"] = "齊天大聖";
console.log(obj["name"]); // 齊天大聖

使用[]這種形式去操作屬性，更加的靈活，在[]中可以直接傳遞一個變數，這樣變數值是哪個就會讀取哪個屬性

var n = "nihao";
obj[n] = "你好";
console.log(obj[n]); // 你好

回顧：.、[]、new這幾個運算子的優先順序是最高的

屬性值

JS物件的屬性值，可以是任意的資料型別，包括物件

var obj2 = new Object();
obj2.name = "豬八戒";
obj.bro = obj2;
console.log(obj.bro.name); // 豬八戒

in運算子

通過該運算子可以檢查一個物件中是否含有指定的屬性

如果有則返回true，沒有則返回false

語法："屬性名" in 物件

console.log("test" in obj); // false
console.log("name" in obj); // true

3、基本資料型別和引用資料型別

基本資料型別 String Number Boolean Null Undefined

引用資料型別 Object

基本資料型別

• JS中的變數都是儲存到棧記憶體中的，基本資料型別的值直接在棧記憶體中儲存
• 值與值之間是獨立存在，修改一個變數不會影響其他的變數

var a = 1;
var b = a;
console.log("a=" + a + ", b=" + b); // a=1, b=1
b = 2;
console.log("a=" + a + ", b=" + b); // a=1, b=2

引用資料型別

• 物件是儲存到堆記憶體中的
• 每建立一個新的物件，就會在堆記憶體中開闢出一個新的空間，而變數儲存的是物件的記憶體地址（物件的引用）
• 如果兩個變數儲存的是同一個物件引用，當一個通過一個變數修改屬性時，另一個也會受到影響

var obj3 = obj;
obj3.name = "鬥戰勝佛";
console.log(obj.name);  // 鬥戰勝佛
console.log(obj3.name); // 鬥戰勝佛

比較

• 當比較兩個基本資料型別的值時，就是比較值。
• 而比較兩個引用資料型別時，它是比較的物件的記憶體地址，如果兩個物件是一摸一樣的，但是地址不同，它也會返回false

var o1 = new Object();
var o2 = new Object();
o1["name"] = "周瑜";
o2["name"] = "周瑜";
console.log(o1 == o2); // false

4、物件字面量

使用物件字面量，可以在建立物件時，直接指定物件屬性的語法：{屬性名: 屬性值, 屬性名: 屬性值...}

物件字面量的屬性名可以加引號也可以不加（建議不加），如果要使用一些特殊的名字，則必須加引號

屬性名和屬性值是一組一組的名值對結構，名和值之間使用:連線，多個名值對之間使用,隔開

如果一個屬性之後沒有其他的屬性了，就不要寫,了

var obj = {
    name: "孫悟空",
    age: 1000,
    gender: "男",
    bor:{
        name: "豬八戒"
    }
}
console.log(obj); // {"age":1000,"bor":{"name":"豬八戒"},"gender":"男","name":"孫悟空"}

5、方法

物件的屬性值可以是任何的資料型別，也可以是個函式（下一節知識）

函式也可以稱為物件的屬性，如果一個函式作為一個物件的屬性儲存，那麼我們稱這個函式是這個物件的方法

呼叫函式就說呼叫物件的方法，但是它只是名稱上的區別沒有其他的區別

var obj2 = {
    name: "豬八戒",
    age: 18,
    sayName: function() {
        console.log(obj2.name);
    }
};
obj2.sayName(); // 豬八戒

6、列舉物件中的屬性

使用for...in語句語法：

for(var 變數 in 物件) {
	語句...
}

for...in語句物件中有幾個屬性，迴圈體就會執行幾次

每次執行時，會將物件中的一個屬性的名字賦值給變數

var obj = {
    name: "孫悟空",
    age: 1000,
    gender: "男",
    address: "花果山"
};
for(var key in obj){
    console.log(key + "=" + obj.key);
    // name=undefined
    // age=undefined
    // gender=undefined
    // address=undefined
    console.log(key + "=" + obj[key]);
    // name=孫悟空
    // age=1000
    // gender=男
    // address=花果山
}