文章目錄

• 理解並上手使用JavaScript中的構造函數
• • 1、我們先理解什麼是構造函數？
  • 2、JavaScript中的構造函數是怎麼樣的？
  • 3、使用new操作符會發生什麼？
  • 4、構造函數的屬性
  • 5、構造函數與函數的區別

理解並上手使用JavaScript中的構造函數 1、我們先理解什麼是構造函數？

• 構造函數也稱之為構造器，通常是我們在創建對象時會調用的函數；
• 在其他面向對象的編程語言裡面，構造函數是是存在於類中的一個方法，稱之為構造函數；
• 但是在JavaScript中的構造函數有點不太一樣；

2、JavaScript中的構造函數是怎麼樣的？

• 構造函數也是一個普通的函數，從表現形式來說，和千千萬萬個普通的函數沒有任何區別；
• 那麼如果這麼一個普通的函數被使用new操作符來調用瞭，那麼這個函數就稱之為構造函數；

如下示例代碼所示：

function Foo (num) {    console.log('foo~' + num)}// 普通方式調用Foo() //  foo~// 通過new關鍵字調用foo函數，此時這個函數就是構造函數var f1 = new Foo(20) // foo~console.log(f1) // foo {}   

上面的打印結果：foo是該函數的類型，{}是返回的空對象

3、使用new操作符會發生什麼？

如果一個函數被使用new操作符調用瞭，那麼它會執行如下操作：

1. 在內存中創建一個新的對象（空對象）；
2. 這個對象內部的[[prototype]]屬性會被賦值為該構造函數的prototype屬性；
3. 構造函數內部的this，會指向創建出來的新對象；
4. 執行函數的內部代碼（函數體代碼）；
5. 如果構造函數沒有返回非空對象，則返回創建出來的新對象。

function Person(){}var p1 = new Person()var p2 = new Person()console.log(p1) // Person {}

4、構造函數的屬性

構造函數的屬性實際上就是對象的變量。一個對象可以包含多個屬性，定義構造函數的屬性時使用this關鍵字。

示例代碼如下：

// 構造函數的屬性function Person (name) {    this.name = name    this.sayMe = function () {        console.log('我的名字叫' + this.name)    }}// 利用構造函數創建對象var spiderMan = new Person('彼得·本傑明·帕克')console.log(spiderMan) // Person { name: '彼得·本傑明·帕克', sayMe: [Function] }spiderMan.sayMe()  // 我的名字叫彼得·本傑明·帕克

5、構造函數與函數的區別

• 構造函數也是普通函數，創建方式和普通函數一樣，但構造函數習慣上首字母大寫。
• 構造函數和普通函數的區別在於：調用方式不一樣。作用也不一樣（構造函數用來新建實例對象）。
• 調用方式不一樣。
  a. 普通函數的調用方式：直接調用 person();
  b.構造函數的調用方式：需要使用new關鍵字來調用 new Person()**;
• 構造函數的名稱與類名相同：Person（）這個構造函數，Person既是函數名，也是這個對象的類名。
• 構造函數的內部用this來構造屬性和方法。