JavaScript建構函式建立物件（總結分享）

本篇文章給大家帶來了關於的相關知識，其中主要介紹了關於JavaScript建構函式建立物件的相關問題，建構函式(Constructor)也稱為構造器、型別函數,功能類似物件模板,一個建構函式可以生成任意多個範例,範例物件具有相同的屬性、行為特徵,但不相等，下面一起來看一下，希望對大家有幫助。

【相關推薦：、】

什麼是建構函式

JavaScript 建構函式(Constructor)也稱為構造器、型別函數,功能類似物件模板,一個建構函式可以生成任意多個範例,範例物件具有相同的屬性、行為特徵,但不相等。
使用建構函式可以建立不同類的物件。

建構函式的建立

建構函式就是一個普通的函數。建立方式和普通函數沒有區別,建構函式習慣上首字母大寫

建構函式與普通函數的區別

建構函式和普通函數的區別就是呼叫方式的不同

普通函數是直接呼叫
建構函式需要使用new關鍵字來呼叫

this指向問題

三種形式this的指向情況。

當以函數的形式呼叫時,this是window
當以方法的形式呼叫時,誰呼叫方法this就是誰
當以建構函式的形式呼叫時,this就是新建立的那個物件

建構函式的執行流程

立刻建立一個新的物件
將新建的物件設定為函數中this,在建構函式中可以使用this來參照新建的物件（即this指向新建立的物件）
逐行執行函數中的程式碼
將新建的物件作為返回值返回

在這裡插入圖片描述

使用同一個建構函式建立的物件,我們稱為一類物件，也將一個建構函式稱為一個類。我們將通過一個建構函式建立的物件,稱為是該類的範例。就上述而言Obj是一個類，而obj是Obj這個類的範例。

建構函式範例

建立兩個類，一個Person類，一個Dog類。

<!DOCTYPE html><html lang="en"><head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script>
        //構造一個建立人的類
        function Person(name , age , gender){
            console.log('指向:',this);
            this.name = name;
            this.age = age ;
            this.gender = gender;
            this.sayName = function(){
                console.log(this.name)
            }
        }

        //構造一個建立狗的類
        function Dog(name , age ){
            console.log('指向:',this);
            this.name = name;
            this.age = age ;
            this.sayHello = function(){
                console.log('汪汪汪~~');
            }
        }

        //建立一個人的範例
        var per = new Person('蘇涼',21,'男');
        console.log(per);
        per.sayName();

        //建立一個狗的範例
        var dog = new Dog('旺財',5);
        console.log(dog);
        dog.sayHello();
    </script></head><body>
    </body></html>

執行結果：

在這裡插入圖片描述

建構函式的好處在於，我們可以區分很多不同的物件，也就是可以清楚的知道建立的物件屬於哪一類，用普通建立物件和使用工廠模式建立物件都無法區分物件的種類，他們都屬於一個大類（Object）。

instanceof關鍵字

使用instanceof可以檢查一個物件是否是一個類的範例

語法：物件 instanceof 建構函式

如果是，則返回true，否則返回false

  console.log(dog instanceof Dog); //true
  console.log(dog instanceof Person); //false
  console.log(dog instanceof Object); //true

所有的物件都是Object的後代，所以任何物件和0bject做instanceof檢查時都會返回true。

效能優化

建立一個Person建構函式

在Person建構函式中,為每一個物件都新增了一個sayName方法

目前我們的方法是在建構函式內部建立的,也就是建構函式每執行一次就會建立一個新的sayName方法

也就是所有範例的sayName都是唯一的。

這樣會導致佔用大量的記憶體，對於每一個新建立的物件就會重新建立一個新的方法。

在這裡插入圖片描述

解決方法：將新建立物件的方法單獨提取出來，如下

<!DOCTYPE html><html lang="en"><head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script>
		//將新建立物件的方法單獨提取出來
        function sayName(){
            console.log(this.name)
        }

        //構造一個建立人的類
        function Person(name , age , gender){
            console.log('指向:',this);
            this.name = name;
            this.age = age ;
            this.gender = gender;
            this.sayName = sayName;
        }
        var per = new Person('蘇涼',21,'男');
        var per1 = new Person('小紅',18,'女');
        console.log(per);
        per.sayName();
        per1.sayName();
        console.log(per.sayName == per1.sayName); //true
    </script></head><body>
    </body></html>

在這裡插入圖片描述

可以看出per的sayName方法和per1的sayName方法是一樣的。這樣就解決了建立不同的範例都會重新建立一個新的sayName方法，大大減少了記憶體的佔用。

知識擴充套件

（1.）我們為什麼需要建構函式：

因為前面兩種建立物件的方式一次只能建立一個物件。

（2.）什麼是建構函式：

建構函式：就是把我們物件裡面的一些相同的屬性和方法抽象出來封裝到函數裡面

(3.)利用建構函式建立物件及使用方法

建構函式的函數名從第一個單詞開始，每個單詞的首寫字母都要大寫。

在這裡插入圖片描述

/ /4.在建構函式裡面我們的屬性和方法前面都必須加this關鍵字

//宣告建構函式語法格式：
function 建構函式名() {
this.屬性 = 值;
this.方法 = function() {}
}
//呼叫建構函式語法格式：
new 建構函式名();

以下是建構函式語法格式的案例：

在這裡插入圖片描述

【相關推薦：、】

以上就是JavaScript建構函式建立物件（總結分享）的詳細內容，更多請關注TW511.COM其它相關文章！