技術標籤：★ JavaScript

建立物件

字面量形式建立物件

//格式
var  物件名 = {
    屬性名: 屬性值，
    屬性名: 屬性值,
    方法名: function() {}
};

//建立car物件
<script type="text/javascript">
var car = {
	//屬性
	brand: "寶馬",
	price:  10000000,
	color: "grey",
	
	//方法
	run: function(){ console.log("跑起來了！！"); },
	stop: function(){ console.log("停下來了！！"); }
};
</script>
 

查詢輸出，注意car.run輸出的是整個方法體，car.run()是執行方法。

新增屬性

物件名.屬性名 = 值;

物件名["屬性名"]= 值;

刪除屬性

delete 物件名.屬性名;

delete 物件名["屬性名"];

修改屬性

物件名.屬性名 = 值;

物件名["屬性名"]= 值;

查詢屬性

物件名.屬性名;

物件名["屬性名"];

區別：點語法不支援變數、而中括號支援變數

注意：如果物件中有該屬性，那麼返回屬性的值。如果物件中沒有該屬性，那麼返回undefined

遍歷屬性

for (var 變數名 in 物件名) {
    console.log(變數名+"："+物件名[變數名]);
}
 

in關鍵字

該關鍵字的作用是判斷一個屬性是否屬於該物件

格式：屬性名in 物件

結果為true（包含該屬性）或者false（不包含該屬性），該關鍵字不僅可以判斷私有屬性，也可以判斷原型中的公有屬性

呼叫方法

物件名.方法名();

物件名["方法名"]();

注意：如果在呼叫方法時不加小括號，會獲取該方法的方法體

修改方法

物件名.方法名 = function() {};

物件名["方法名"]= function() {};

刪除方法

delete 物件名.方法名;

delete 物件名["方法名"];

字面量形式建立物件的利弊

優點：簡單、易懂

缺點：

不利於提高程式碼的複用性

通過字面量形式建立的物件都是Object型別，沒有辦法進行細化物件的型別

工廠模式建立物件

就是把建立物件的語句封裝到一個函式中，該函式的作用就是可以批量的建立具有同種屬性的物件，它有利於提高程式碼的複用性

//格式1
function 函式名(引數1,引數2…) {
    var obj = new Object(); //格式2將第一行語句替換為 var obj = {};
    obj.屬性名1 = 引數1;
    obj.屬性名2 = 引數2;
    obj.方法名3 = function() {};
    return obj;
}
//格式3
function 函式名(引數1,引數2…) {
    return {
        屬性名1:引數1，
        屬性名2:引數2,
        方法名3:function(){}
    }
}

//建立createObj工廠
<script type="text/javascript">
    function createObj(name,age,gender){
        var obj = new Object();
        obj.name = name;
        obj.age = age;
        obj.gender = gender;
        obj.speak = function() { console.log("hello world") };
        return obj;
    }    
    var res1 = createObj("張三",10,"男");
    var res2 = createObj("李四",18,"男");
</script>

工廠模式建立物件的利弊

優點：解決了批量建立具有同種屬性的物件的問題，提高了程式碼的複用性

缺點：也沒有解決物件型別的區分問題

構造方法建立物件

建立物件的方式有字面量形式建立物件，工廠模式建立物件，但是他們都沒有解決物件型別的區別問題。構造方法就是一個用來批量建立具有同種屬性的物件的特殊函式。該種建立物件的方法解決了物件型別區分問題

//格式
function 函式名(引數1,引數2,引數3…) {
    this.屬性名1 = 引數1;
    this.屬性名2 = 引數2; 
    this.方法名 = function(){};
}

//建立Car構造方法
<script type="text/javascript">
    function Car(brand,price,color){
        this.brand = brand;
        this.price = price;
        this.color = color;
        this.run = function(){ console.log('跑起來了！！'); };
        this.stop = function(){ console.log('停下來了！！'); };
    }
    var res = new Car("QQ",30000,"red");
</script>

注意

建構函式的本質也是函式，但是為了普通函式做區分，建構函式的名字通常為單詞首字母大寫；

如果構造方法中不包含引數，那麼在呼叫時可以省略小括號，如var arr = newArray;

如果是內建的構造方法，那麼在呼叫時可以省略new關鍵字，如var arr = Array(); 但是不可以將new關鍵字和小括號同時省略，否則無法建立物件。

建構函式中可以定義變數，這個變數屬於該函式的區域性變數，在該函式內部可以使用，但是要注意由該建構函式創建出來的物件無法訪問該變數，因為它不屬於任何物件，為了提高程式碼的安全性和健壯性，可以在建構函式中建立set和get方法對此區域性變數進行操作。

構造方法中不加return關鍵字，如果加return關鍵字，那麼如果返回值的型別為基本型別，不影響構造方法建立物件，即此時依舊可以返回物件，但是如果return後面的返回值為引用型別，那麼構造方法創建出來的物件就會被覆蓋掉。