溫馨提示×

您好，登錄后才能下訂單哦！

密碼登錄×
登錄注冊(cè)×
其他方式登錄
點(diǎn)擊 登錄注冊(cè) 即表示同意《億速云用戶服務(wù)條款》

怎么使用JavaScript構(gòu)造函數(shù)創(chuàng)建對(duì)象

發(fā)布時(shí)間：2022-08-04 10:34:08 來源：億速云 閱讀：167 作者：iii 欄目：web開發(fā)

這篇文章主要講解了“怎么使用JavaScript構(gòu)造函數(shù)創(chuàng)建對(duì)象”，文中的講解內(nèi)容簡(jiǎn)單清晰，易于學(xué)習(xí)與理解，下面請(qǐng)大家跟著小編的思路慢慢深入，一起來研究和學(xué)習(xí)“怎么使用JavaScript構(gòu)造函數(shù)創(chuàng)建對(duì)象”吧！

怎么使用JavaScript構(gòu)造函數(shù)創(chuàng)建對(duì)象

什么是構(gòu)造函數(shù)

JavaScript 構(gòu)造函數(shù)(Constructor)也稱為構(gòu)造器、類型函數(shù),功能類似對(duì)象模板,一個(gè)構(gòu)造函數(shù)可以生成任意多個(gè)實(shí)例,實(shí)例對(duì)象具有相同的屬性、行為特征,但不相等。
使用構(gòu)造函數(shù)可以創(chuàng)建不同類的對(duì)象。

構(gòu)造函數(shù)的創(chuàng)建

構(gòu)造函數(shù)就是一個(gè)普通的函數(shù)。創(chuàng)建方式和普通函數(shù)沒有區(qū)別,構(gòu)造函數(shù)習(xí)慣上首字母大寫

構(gòu)造函數(shù)與普通函數(shù)的區(qū)別

構(gòu)造函數(shù)和普通函數(shù)的區(qū)別就是調(diào)用方式的不同

  • 普通函數(shù)是直接調(diào)用

  • 構(gòu)造函數(shù)需要使用new關(guān)鍵字來調(diào)用

this指向問題

三種形式this的指向情況。

  • 當(dāng)以函數(shù)的形式調(diào)用時(shí),this是window

  • 當(dāng)以方法的形式調(diào)用時(shí),誰調(diào)用方法this就是誰

  • 當(dāng)以構(gòu)造函數(shù)的形式調(diào)用時(shí),this就是新創(chuàng)建的那個(gè)對(duì)象

構(gòu)造函數(shù)的執(zhí)行流程

  • 立刻創(chuàng)建一個(gè)新的對(duì)象

  • 將新建的對(duì)象設(shè)置為函數(shù)中this,在構(gòu)造函數(shù)中可以使用this來引用新建的對(duì)象（即this指向新創(chuàng)建的對(duì)象）

  • 逐行執(zhí)行函數(shù)中的代碼

  • 將新建的對(duì)象作為返回值返回

怎么使用JavaScript構(gòu)造函數(shù)創(chuàng)建對(duì)象

使用同一個(gè)構(gòu)造函數(shù)創(chuàng)建的對(duì)象,我們稱為一類對(duì)象，也將一個(gè)構(gòu)造函數(shù)稱為一個(gè)類。我們將通過一個(gè)構(gòu)造函數(shù)創(chuàng)建的對(duì)象,稱為是該類的實(shí)例。就上述而言O(shè)bj是一個(gè)類，而obj是Obj這個(gè)類的實(shí)例。

構(gòu)造函數(shù)實(shí)例

創(chuàng)建兩個(gè)類，一個(gè)Person類，一個(gè)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>
        //構(gòu)造一個(gè)創(chuàng)建人的類
        function Person(name , age , gender){
            console.log('指向:',this);
            this.name = name;
            this.age = age ;
            this.gender = gender;
            this.sayName = function(){
                console.log(this.name)
            }
        }

        //構(gòu)造一個(gè)創(chuàng)建狗的類
        function Dog(name , age ){
            console.log('指向:',this);
            this.name = name;
            this.age = age ;
            this.sayHello = function(){
                console.log('汪汪汪~~');
            }
        }

        //創(chuàng)建一個(gè)人的實(shí)例
        var per = new Person('蘇涼',21,'男');
        console.log(per);
        per.sayName();

        //創(chuàng)建一個(gè)狗的實(shí)例
        var dog = new Dog('旺財(cái)',5);
        console.log(dog);
        dog.sayHello();
    </script></head><body>
    </body></html>

運(yùn)行結(jié)果：

怎么使用JavaScript構(gòu)造函數(shù)創(chuàng)建對(duì)象

構(gòu)造函數(shù)的好處在于，我們可以區(qū)分很多不同的對(duì)象，也就是可以清楚的知道創(chuàng)建的對(duì)象屬于哪一類，用普通創(chuàng)建對(duì)象和使用工廠模式創(chuàng)建對(duì)象都無法區(qū)分對(duì)象的種類，他們都屬于一個(gè)大類（Object）。

instanceof關(guān)鍵字

使用instanceof可以檢查一個(gè)對(duì)象是否是一個(gè)類的實(shí)例

語法：對(duì)象 instanceof 構(gòu)造函數(shù)

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

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

所有的對(duì)象都是Object的后代，所以任何對(duì)象和0bject做instanceof檢查時(shí)都會(huì)返回true。

性能優(yōu)化

創(chuàng)建一個(gè)Person構(gòu)造函數(shù)

在Person構(gòu)造函數(shù)中,為每一個(gè)對(duì)象都添加了一個(gè)sayName方法

目前我們的方法是在構(gòu)造函數(shù)內(nèi)部創(chuàng)建的,也就是構(gòu)造函數(shù)每執(zhí)行一次就會(huì)創(chuàng)建一個(gè)新的sayName方法

也就是所有實(shí)例的sayName都是唯一的。

這樣會(huì)導(dǎo)致占用大量的內(nèi)存，對(duì)于每一個(gè)新創(chuàng)建的對(duì)象就會(huì)重新創(chuàng)建一個(gè)新的方法。

怎么使用JavaScript構(gòu)造函數(shù)創(chuàng)建對(duì)象

解決方法：將新創(chuàng)建對(duì)象的方法單獨(dú)提取出來，如下

<!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>
		//將新創(chuàng)建對(duì)象的方法單獨(dú)提取出來
        function sayName(){
            console.log(this.name)
        }

        //構(gòu)造一個(gè)創(chuàng)建人的類
        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>

怎么使用JavaScript構(gòu)造函數(shù)創(chuàng)建對(duì)象

可以看出per的sayName方法和per1的sayName方法是一樣的。這樣就解決了創(chuàng)建不同的實(shí)例都會(huì)重新創(chuàng)建一個(gè)新的sayName方法，大大減少了內(nèi)存的占用。

知識(shí)擴(kuò)展

（1.）我們?yōu)槭裁葱枰獦?gòu)造函數(shù)：

因?yàn)榍懊鎯煞N創(chuàng)建對(duì)象的方式一次只能創(chuàng)建一個(gè)對(duì)象。

（2.）什么是構(gòu)造函數(shù)：

構(gòu)造函數(shù)：就是把我們對(duì)象里面的一些相同的屬性和方法抽象出來封裝到函數(shù)里面

(3.)利用構(gòu)造函數(shù)創(chuàng)建對(duì)象及使用方法

構(gòu)造函數(shù)的函數(shù)名從第一個(gè)單詞開始，每個(gè)單詞的首寫字母都要大寫。

怎么使用JavaScript構(gòu)造函數(shù)創(chuàng)建對(duì)象

/ /4.在構(gòu)造函數(shù)里面我們的屬性和方法前面都必須加this關(guān)鍵字

//聲明構(gòu)造函數(shù)語法格式：
function 構(gòu)造函數(shù)名() {
this.屬性 = 值;
this.方法 = function() {}
}
//調(diào)用構(gòu)造函數(shù)語法格式：
new 構(gòu)造函數(shù)名();

以下是構(gòu)造函數(shù)語法格式的案例：

怎么使用JavaScript構(gòu)造函數(shù)創(chuàng)建對(duì)象

感謝各位的閱讀，以上就是“怎么使用JavaScript構(gòu)造函數(shù)創(chuàng)建對(duì)象”的內(nèi)容了，經(jīng)過本文的學(xué)習(xí)后，相信大家對(duì)怎么使用JavaScript構(gòu)造函數(shù)創(chuàng)建對(duì)象這一問題有了更深刻的體會(huì)，具體使用情況還需要大家實(shí)踐驗(yàn)證。這里是億速云，小編將為大家推送更多相關(guān)知識(shí)點(diǎn)的文章，歡迎關(guān)注！

向AI問一下細(xì)節(jié)

免責(zé)聲明：本站發(fā)布的內(nèi)容（圖片、視頻和文字）以原創(chuàng)、轉(zhuǎn)載和分享為主，文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng)，如果涉及侵權(quán)請(qǐng)聯(lián)系站長(zhǎng)郵箱：is@yisu.com進(jìn)行舉報(bào)，并提供相關(guān)證據(jù)，一經(jīng)查實(shí)，將立刻刪除涉嫌侵權(quán)內(nèi)容。

AI
助
手