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

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

【相關推薦：javascript影片教學、web前端】

什麼是建構子

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

建構子的建立

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

構造函數與普通函數的區別

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

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

##this指向問題

#三種形式this的指向情況。

• 當以函數的形式呼叫,this是window

• 當以方法的形式呼叫時,誰呼叫方法this是誰

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

建構子的執行流程

• #立刻建立一個新的物件

• 將新建的物件設定為函數中this,在建構函式中可以使用this來引用新建的物件（即this指向新建立的物件）

• 逐行執行函數中的程式碼

• 將新建的物件作為傳回值傳回

使用同一個建構子建立的物件,我們稱為一類對象，也將一個建構函式稱為一個類別。我們將透過一個建構函數所建立的物件,稱為是該類別的實例。就上述而言Obj是一個類，而obj是Obj這個類別的實例。

建構子實例

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

nbsp;html>
    <meta>
    <meta>
    <meta>
    <title>Document</title>
    <script>
        //构造一个创建人的类
        function Person(name , age , gender){
            console.log(&#39;指向:&#39;,this);
            this.name = name;
            this.age = age ;
            this.gender = gender;
            this.sayName = function(){
                console.log(this.name)
            }
        }

        //构造一个创建狗的类
        function Dog(name , age ){
            console.log(&#39;指向:&#39;,this);
            this.name = name;
            this.age = age ;
            this.sayHello = function(){
                console.log(&#39;汪汪汪~~&#39;);
            }
        }

        //创建一个人的实例
        var per = new Person(&#39;苏凉&#39;,21,&#39;男&#39;);
        console.log(per);
        per.sayName();

        //创建一个狗的实例
        var dog = new Dog(&#39;旺财&#39;,5);
        console.log(dog);
        dog.sayHello();
    </script>
    

運行結果：

建構子的好處在於，我們可以區分很多不同的對象，也就是可以清楚的知道所建立的物件屬於哪一類，用普通創建物件和使用工廠模式創建物件都無法區分物件的種類，他們都屬於一個大類別（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都是唯一的。

這樣會導致佔用大量的內存，對於每一個新創建的物件就會重新創建一個新的方法。

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

nbsp;html>
    <meta>
    <meta>
    <meta>
    <title>Document</title>
    <script>
		//将新创建对象的方法单独提取出来
        function sayName(){
            console.log(this.name)
        }

        //构造一个创建人的类
        function Person(name , age , gender){
            console.log(&#39;指向:&#39;,this);
            this.name = name;
            this.age = age ;
            this.gender = gender;
            this.sayName = sayName;
        }
        var per = new Person(&#39;苏凉&#39;,21,&#39;男&#39;);
        var per1 = new Person(&#39;小红&#39;,18,&#39;女&#39;);
        console.log(per);
        per.sayName();
        per1.sayName();
        console.log(per.sayName == per1.sayName); //true
    </script>
    

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

知識擴充

（1.）我們為什麼需要建構子：##因為前面兩種建立物件的方式一次只能建立一個物件。

（2.）什麼是建構子：

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

(3.)利用构造函数创建对象及使用方法

构造函数的函数名从第一个单词开始，每个单词的首写字母都要大写。

/ /4.在构造函数里面我们的属性和方法前面都必须加this关键字

//声明构造函数语法格式：
function 构造函数名() {
this.属性 = 值;
this.方法 = function() {}
}
//调用构造函数语法格式：
new 构造函数名();

以下是构造函数语法格式的案例：

【相关推荐：javascript视频教程、web前端】

以上是JavaScript建構函式建立物件（總結分享）的詳細內容。更多資訊請關注PHP中文網其他相關文章！