【JavaScript】面向對象——構造函數(詳解)

文章目錄

  • 理解並上手使用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來構造屬性和方法。
本文來自網絡,不代表程式碼花園立場,如有侵權,請聯系管理員。https://www.codegarden.cn/article/31281/
返回顶部