iT邦幫忙

2021 iThome 鐵人賽

DAY 5
0
自我挑戰組

登堂入室!前端工程師的觀念技術 _30_ 題系列 第 5

4. 關於 Constructor Function

(想直接看題目的話可以移到最後一個標題!)

在準備回答問題前,先複習幾個觀念:

Constructor Function


→ Constructor建構子,用途是能製作大量相似的 object ( array, function...都是object)。

通常使用的形式為:

  • 字首大寫
  • 使用 "new" keyword → 用於創造empty object

範例:

function Person(name, age, country){ // 字首大寫

    console.log(this);  // 這裡的this 會指向一個 empty object "Person {}"
    
    this.name = name,
    this.age = age,
    this.country = country
}

let Tina = new Person("Tina", 22, "Taiwanese");  // 使用 "new" keyword

console.log(Tina); // Person {name: "Tina", age: 22, country: "Taiwanese"}

範例執行的動作:

  1. console.log(this);
    這裡的This是指被創造出來的Tina本身,也就是創造了一個empty object "Person {}"。
  2. this.name = name
    則是在定義 object 裡的屬性(property),所以這裡我們定義了"name", "age", "country" 三種屬性。
  3. let Tina = new Person("Tina", 22, "Taiwanese");
    會將我們傳入的參數(parameter)分配給屬性,new出一個新的object。
  4. console.log(Tina);
    確認這個object涵蓋的屬性。

( 注意! console.log(this);的"Person {}"展開來可能還是會看到裡面不是空的,還是會有內容。
這是因為物件傳參考的特性,所以之後被定義的屬性會同時被看到,這裡可以大概知道就好。 )

那如果沒有new會發生什麼事呢? 我們可以試試看:

function Person(name, age, country){ 
    console.log(this);  // output: Window {0: global, window: Window, …}
    this.name = name,
    this.age = age,
    this.country = country
}

let Tina = Person("Tina", 22, "Taiwanese"); 

console.log(Tina); // output: undefined

console.log(this); 的this,會變成指向瀏覽器的Global object Window

然後在Window裡找不到定義屬性的方法,所以Tina就變成了undefined(被消失

所以沒有new就不會創造empty object,也會影響this的指向,
然後new不出object你的建構子就白搭了。

Constructor Function可以定義屬性,也可以定義方法(methods)。
我們可以看到下面的例子:

function Person(name, age, country){ 

    this.name = name,
    this.age = age,
    this.country = country,
    
    this.sayHi = function(){
    console.log(this.name + " says Hi.");  // 這裡的this會指向Person {}
    }
}

let Tina = new Person("Tina", 22, "Taiwanese");  

console.log(Tina); // Person {name: "Tina", age: 22, country: "Taiwanese", sayHi: ƒ}

Tina.sayHi(); // Tina says Hi.

(但這種建立物件的方式,會占用到大量的記憶體,所以之後會補充Prototype的概念。)

那跟今天的主題比較相關的提問是:

function Person(){}、var person = Person()和var person = new Person()之間有何不同?

( 問題參考自: 前端工程師面試問題集 ★ Front-end Job Interview Questions )

簡而言之:

  1. function Person(){}
    → 創造一個建構子Person,可以定義屬性和方法,並用於創造object。

  2. var person = Person()
    → 如果沒有寫new的話,Person就不會創造empty object,this會變成指向瀏覽器裡的window物件。
    → 而window裡找不到欲定義的屬性,那麼建立的person會回傳undefined

  3. var person = new Person()
    → new 會創造empty object,賦值給person。
    → person就會是一個可以具備Person()屬性,且具有屬性值的object。

【如內文有誤還請不吝指教>< 感謝閱覽至此的各位:D 】

-----正文結束-----

本來是想寫this的,但this會用到這個的延伸觀念,所以今天來寫Constructor Function。


上一篇
3. 解釋 Hoisting
下一篇
5. bind, call, apply 的差異
系列文
登堂入室!前端工程師的觀念技術 _30_ 題31

尚未有邦友留言

立即登入留言