This 與 Arrow Function
在前一篇章節,筆者介紹了函式的概念以及多種函式的宣告方法、立即函式,本章我們就來進一步探討什麼是箭頭函式、函式的呼叫方法有哪些以及 this 的概念吧!

What is "This"?

若讀者不是第一次寫程式,並且有接觸過物件導向程式語言,對於 this 肯定不陌生,像是下方的 PHP 程式碼:
//...
class linkedList implements linkedListInterface{
private $head = 0;
private $length = 0;
private $memory = array();
function printList(){
if($this->length ==0){
return 0;
}
else{
$currentNode = $this->head;
while(true){
print_r($this->memory[$currentNode]);
$currentNode = $this->memory[$currentNode]->getNext();
if($currentNode === "nullPtr"){
break;
}
}
print "
";
}
}
//...
}
//...
在大多數的程式語言中, this 都指向其實體本身。不過,身為怪奇語言的 JavaScript 肯定是不會放過廣大開發者的XD
在 JavaScript 中,this 會隨著函式、 class 實體化時被自動生成,它通常代表呼叫函式的那個物件,像是:
const returnYourName = function(){
return this.name;
}
const Ian = {
name: 'Ian',
whatYourName: returnYourName
}
const Peter = {
name: 'Peter',
whatYourName: returnYourName
}
console.log(Ian.whatYourName()) //Ian
console.log(Peter.whatYourName()) //Peter
我們可以透過結果發現:
當執行 Ian.whatYourName() 時, 在 Ian 物件中的 whatYourName() 的函式實體的 this 是指向 Ian 的。
這也驗證了這句話:
在 JavaScript 中,this 會隨著函式、 class 實體化時被自動生成,它通常代表呼叫函式的那個物件。
如果讀者不相信,我們可以進一步透過程式碼驗證:
const returnYourName = function(){
return this.name;
}
const returnThis = function(){
return this.name;
}
const Ian = {
name: 'Ian',
whatYourName: returnYourName,
returnThis: returnThis
}
console.log(Ian.returnThis()) //Ian
結果也與其他說法如出一轍。

call(), apply(), bind()

在上述的範例中,我們已經知道:
在 JavaScript 中,this 會隨著函式、 class 實體化時被自動生成,它通常代表呼叫函式的那個物件。
不過, JavaScript 也有提供三種方法讓我們自己決定 this 該指向誰。
在正式開始之前,我們先宣告一個 sum 函式:
let sum = function(para1, para2){
return para1 + para2;
}
在一般情況下,若我們要呼叫定義好的函式會這麼做:
sum(1,2); //3

bind()

我們可以利用 bind() 讓函式的 this 綁定我們指定的值,如下:
function sum(para1:number,para2:number) {
console.log(para1 + para2,this)
}
const sumX = sum.bind('Hello')
sumX(1,2)
根據範例程式碼,筆者宣告了 sumX 存放綁定 this 後的 sum 函式,所以我們在呼叫 sumX() 時,便會透過命令列看到:
3, Hello

apply() and call()

bind() 不同, apply()call() 只需要在呼叫函式時加在後方:
sum.call('Ian', 1, 2) // Ian 1 2
sum.apply('Peter', [1, 2]) // Peter 1 2
至於 call()apply 的差別,就只是帶入參數的方法不同而已。

箭頭函式

在先前的篇章中,筆者僅介紹了普通函式。在 JavaScript ES6 開始新增了一個特別的函式: 箭頭函式 (Arrow function)。
使用起來非常簡潔:
()=>{
console.log("Hello, world!")
}
let sum = (para1: number, para2: number)=>{
return para1 + para2;
}
let result = sum()
需要注意的是,箭頭函式的 this 與一般函式不同,箭頭函式的 this 會綁定到其定義時所在的物件。
因為筆者在準備範例時在 Deno 上遇到了一些問題,所以會先將這部分放到問題解決再補上。
如果想進一步學習也可以參考今天的延伸閱讀。

目前遇到的問題

上面提到筆者遇到了一些問題,為了證明筆者不是在找藉口不寫稿,筆者就把目前遇到的問題丟上來:
  • 全域下, this 應該要是 window 而不是 undefined
  • 一直噴以下錯誤:
TS2683 [ERROR]: 'this' implicitly has type 'any' because it does not have a type annotation.
return this.name;
在 Deno 的官方文件中有提到,在全域中的 thiswindow (node.js 為 global),然而不論筆者怎麼嘗試,結果都是 undefined ,我也有考慮到是否為 TypeScript 預設會開嚴格模式,不過筆者也嘗試了官方文件中提到的 -c tsconfig.json--no-check。 當加上 --no-check 執行程式碼時,確實不會在噴出 'this' implicitly has type 'any' because it does not have a type annotation. 的錯誤,不過筆者認為這項作法只是在逃避問題,並不是好作法。 至於在全域中的 thisundefined 的問題,我在 tsconfig.json 將嚴格模式中把它關掉以後也不見改善,我在想一定是我沒有將官方文件閱讀清楚,還請各位讀者諒解,我會盡快找出問題的答案,如有必要,也會在 Deno 的 Repo 發看看 issue (但我認為這問題不是 Deno 本身造成的,所以筆者還是希望能自己解決問題)。

延伸閱讀

同樣的事情在不同人眼中可能會有不同的見解、看法。
在讀完本篇以後,筆者也強烈建議大家去看看以下文章,或許會對型別、變數宣告...等觀念有更深層的看法唷!