JavaScript - 對象建立的四種方式

這是我參與8月更文挑戰的第11天，活動詳情查看：8月更文挑戰

對象的概念

JavaScript 的對象是無序屬性的集合, 其屬性能夠包含基本值、對象或函數。對象就是一組沒有順序的值。咱們能夠把 JavaScript 中的對象想象成鍵值對，其中值能夠是數據和函數。

對象的行爲和特徵：

• 特徵---在對象中用屬性表示
• 行爲---在對象中用方法表示

對象的建立方法

1. 對象字面量建立對象

對象字面量語法：{}

內部能夠存放多條數據，數據與數據之間用逗號分隔，最後一個後面不要加逗號。

每條數據都是有屬性名和屬性值組成，鍵值對寫法：k: v

• k: 屬性名
• v：屬性值，能夠是任意類型的數據，好比簡單類型數據、函數、對象

//經過對象字面量建立一個對象

var obj = {
    name: "lucy",
    age: 18,
    sex: "female",
    sayHi: function () {
        console.log("hello");
    }
};
複製代碼

• 屬性：對象的描述性特徵，通常是名詞，至關於定義在對象內部的變量
• 方法：對象的行爲和功能，通常是動詞，定義在對象中的函數

對象的調用/更改/添加/刪除

• 用對象的變量名打點調用某個屬性名，獲得屬性值。

• 在對象內部用 this 打點調用屬性名。this 替代對象。

• 用對象的變量名後面加 [] 調用，[] 內部是字符串格式的屬性名。

• 調用方法時，須要在方法名後加 () 執行。

<script>
        var obj = {
            name: "lucy",
            age: 18,
            sex: "female",
            sayHi: function () {
                console.log(this.name+" say hello!");
            }
        }

        console.log(obj.name);
        console.log(obj.age);
        obj.sayHi();

        //中括號調用方法
        console.log(obj["name"]);
        obj["sayHi"]();
</script>
複製代碼

//更改
        obj.age=20;
        console.log(obj);

        //添加
        obj.weight = 120;
        console.log(obj);

        //刪除
        delete obj.sex;
        console.log(obj);
複製代碼

2. new Object() 建立對象

Object() 構造函數，是一種特殊的函數。主要用來在建立對象時初始化對象， 即爲對象成員變量賦初始值，總與 new 運算符一塊兒使用在建立對象的語句中。

1. 構造函數用於建立一類對象，首字母要大寫。

2. 構造函數要和 new 一塊兒使用纔有意義

<script>
        //new Object()建立對象
        var person = new Object(); //建立了一個新的空對象

        person.name="lucy";
        person.age=18;
        person.sex=true;
        person.sayHi = function(){
            console.log("hello");
        }

        console.log(person);
    </script>
複製代碼

---

new 在執行時會作四件事情

• new 會在內存中建立一個新的空對象

• new 會讓 this 指向這個新的對象

• 執行構造函數 (目的：給這個新對象加屬性和方法)

• new 會返回這個新對象

3. 工廠函數建立對象

若是要建立多個相似的對象，能夠將 new Object() 過程封裝到一個函數中，未來調用函數就能建立一個對象，至關於一個生產對象的函數工廠，用來簡化代碼。

<script>
        //工廠方法至關於對new Object()方法的封裝
        function createperson(name,age,sex){
            //建立一個空對象
            var person = new Object();
            //添加屬性和方法
            person.name = name;
            person.age = age;
            person.sex = sex;
            person.sayHi = function(){
                console.log("hello");
            }
            //將對象做爲函數的返回值
            return person;
        }

        var p1 = createperson("lucy",18,"female");
        var p2 = createperson("mary",25,"female");

        console.log(p1,p2);
    </script>
複製代碼

4. 自定義構造函數

比工廠方法更加簡單。

自定義一個建立具體對象的構造函數，函數內部不須要 new 一個構造函數的過程，直接使用 this 代替對象進行屬性和方法的書寫，也不須要 return 一個返回值。

使用時，利用 new 關鍵字調用自定義的構造函數便可。

注意：構造函數的函數名首字母須要大寫，區別於其餘普通函數名。

<script>
        //定義一個構造函數,首字母必須大寫
        function Person(name,age,sex){
            //不須要使用new建立一個新對象
            //用this替代未來建立的新對象
            this.name = name;
            this.age = age;
            this.sex = sex;
            this.sayHi = function(){
                console.log("hello");
            }
            //不須要return, 由於經過new實現了
        }

        //用new關鍵字調用構造函數
        var p1 = new Person("lucy",18,"female");
        console.log(p1);
    </script>
複製代碼

對象遍歷

for in 循環也是循環的一種，專門用來遍歷對象，內部會定義一個 k 變量， k 變量在每次循環時會從第一個開始接收屬性名，一直接收到最後一條屬性名，執行完後跳出循環。

<script>
        //定義一個構造函數,首字母必須大寫
        function Person(name,age,sex){
            //不須要使用new建立一個新對象
            //用this替代未來建立的新對象
            this.name = name;
            this.age = age;
            this.sex = sex;
            this.sayHi = function(){
                console.log("hello");
            }
            //不須要return, 由於經過new實現了
        }

        //用new關鍵字調用構造函數
        var p1 = new Person("lucy",18,"female");
        console.log(p1);
        
        //遍歷
        for(var k in p1){
            console.log(k+"項的屬性值是:"+p1[k])
        }
    </script>
複製代碼