iT邦幫忙

2022 iThome 鐵人賽

DAY 8
0
自我挑戰組

學習JavaScript的基礎概念系列 第 8

Day8 函數建構式,「new」

  • 分享至 

  • xImage
  •  

函數建構式

可建構大量相似的物件,命名用大寫英文字母當開頭,要搭配new關鍵字,new的功能就是創造新的空物件。建構式函式的宣告就跟其他函式一樣,差異在於呼叫方式。
在函式呼叫的語法前加上關鍵字「new」,用new建立新物件,函式被呼叫時執行環境會產生this變數,this變數會指向新的空物件記憶體位置,當函數結束執行時,該物件會被函數自動回傳。

例:

function creep(){
    return this;
}
new creep();

建構式的特色:

1.建立出新的空物件。
2.this變數會指向新的空物件記憶體位置。
3.若無明確回傳任何值,那麼新物件就會成為建構式的回傳值。

例:

function Person(){

    console.log(this);
    this.firstname = 'Jhon';
    this.lastname = 'Doe';
    console.log('This function is invocked');
}
var jhon = new Person();
console.log(jhon);

執行結果
https://imgur.com/PIu0BBi.jpg

例2:

如果我回傳別的東西

function Person(){

    console.log(this);
    this.firstname = 'Jhon';
    this.lastname = 'Doe';
    console.log('This function is invocked');

    return {greeting:'i got in the way'};

}
var jhon = new Person();
console.log(jhon);

https://imgur.com/rrbQttn.jpg

例3:

先設定參數

function Person(firstname,lastname){ 
    console.log(this);
    this.firstname = firstname;
    this.lastname = lastname;
    console.log('This function is invocked');
}
var jhon = new Person('Jhon','Doe'); 
console.log(jhon);
var jane = new Person('jane','Doe');  
console.log(jane);

https://imgur.com/A2rfDhQ.jpg


運用建構式的話,就能輕易地遵循同樣的模式建立多個物件,不須一再重複相同的程式。

例:

function Ninja(){
    this.skulk = function() {
        rturn this;
    };
}
var Ninja1() = new Ninja;
var Ninja2() = new Ninja;

上一篇
Day7 call()、apply()、bind()
下一篇
Day9 JavaSript匿名函式
系列文
學習JavaScript的基礎概念30
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言