iT邦幫忙

2021 iThome 鐵人賽

DAY 27
0
自我挑戰組

JavaScript 核心觀念系列 第 27

【Day27】this - 簡易呼叫(Simple Call)

簡易呼叫(Simple Call)

當我們直接執行函式時,就是所謂的簡易呼叫(Simple Call),

以下會列出各種簡易呼叫(Simple Call)的範例:

函式

var myName = 'weiwei';

function callName() {
    var myName = '小明';
    console.log(this);
    console.log(this.myName);
};

callName();

該範例我們直接使用 callName() 來執行函式,

這就是所謂的簡易呼叫(Simple Call),

而此時的 this 是指向全域,所以會回傳全域中的 myName

立即函式

var myName = 'weiwei';

(function(){
    console.log(this.myName);
    function callSomeone(){
        var myName = '小明';
        console.log(this);
        console.log(this.myName);
    };
    callSomeone();
})();

在該範例中,我們直接在立即函式中執行 callSomeone() 也是屬於 Simple Call,

因此在 callSomeone()this 也是指向全域,所以也會回傳全域中的 myName

閉包

var myName = 'weiwei';

function myMoney(money){
    return function(update){
        var myName = '小明';
        money += update;
        console.log(this.myName, money);
    }
}

const weiMoney = myMoney(200);

weiMoney(50);  // weiwei 250

該範例中,我們直接使用 weiEasyCard(50) 來執行 easyCard(base)retuen 的函式,

這也屬於 Simple Call,因此這邊的 this 也是指向全域

callback function

var myName = 'weiwei';

function myMoney(callback){
    var myName = '小明';
    const money = 100;
    return callback(money);
}

myMoney(function(money) {
    console.log(this.myName, money + 100);  // weiwei 200
});

範例中 callback function 是將函式作為參數帶入 myMoney() 中,

使用 myMoney() 來執行帶入的函式,而這也是屬於 Simple Call

callback function 除了自己寫之外,

在 JavaScript 中有許多內建的 callback function,

forEach 為例:

var myName = 'weiwei'

const a = [1, 2, 3];

a.forEach(function(i){
    var myName = '小明';
    console.log(this.myName, i);
});

當我們在 VS Code 中,輸入 forEach 時,

能看見提示中有寫在 () 要插入一個 callbackfn

因為 forEach() 內的函式是屬於 callback function,

而使用 callback function 是 Simple Call,

因此該函式中的 this 也是指向全域

接著我們來看 setTimeOut()

var myName = 'weiwei'

var family = {
    myName: '小明',
    callName: function(){
        setTimeout(function(){
            console.log(this.myName);
        }, 1000);
    }
};

family.callName();  // weiwei

雖然我們在 family 下執行,但 setTimeout 內的函式為 callback function,

因此這時的 this 也會指向全域,

此時我們不會看函式在哪裡執行,而是看如何執行,

當像這種函式中要執行另一段函式時,但想要正確的取得外層的 小明 時,該怎麼做呢?

var myName = 'weiwei'

var family = {
    myName: '小明',
    callName: function(){
        var self = this;  // vm, that
        setTimeout(function(){
            console.log(self);
            console.log(self.myName);
        }, 1000);
    }
};

family.callName();

此時我們大多會在執行 this 函式的外層,

宣告變數來將 this 賦予到該變數中,

而該變數通常名稱為 selfvmthat 根據開發者習慣而定,

隨後在使用該變數取值,

在範例中,我們將 this 賦予到 self 中,

此時的 self 是指向物件本身,

因此使用 self.myName 會取得物件中的 小明

以上就是今天 Simple Call 的講解,感謝觀看!!


上一篇
【Day26】this - 物件的方法調用
下一篇
【Day28】this - call, apply, bind 與嚴謹模式
系列文
JavaScript 核心觀念30

尚未有邦友留言

立即登入留言