第 12 屆 iThome 鐵人賽

DAY 8

Modern Web

強型闖入DenoLand系列第 8 篇

強型闖入DenoLand[7] - TS基礎系列之函式宣告(2)

12th鐵人賽 deno javascript typescript

團隊北科大計算機

2020-09-23 19:47:39

811 瀏覽

Node.js之父新專案Deno 1.0正式亮相| iThome

強型闖入DenoLand[7] - TS基礎系列之函式宣告(2)

在前一篇章節，筆者介紹了函式的概念以及多種函式的宣告方法、立即函式，本章我們就來進一步探討什麼是箭頭函式、函式的呼叫方法有哪些以及 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 "<br>";
        }
    }
    //...
    }
//...

在大多數的程式語言中， this 都指向其實體本身。不過，身為怪奇語言的 JavaScript 肯定是不會放過廣大開發者的ＸＤ

在 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 的官方文件中有提到，在全域中的 this 為 window (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. 的錯誤，不過筆者認為這項作法只是在逃避問題，並不是好作法。
至於在全域中的 this 為 undefined 的問題，我在 tsconfig.json 將嚴格模式中把它關掉以後也不見改善，我在想一定是我沒有將官方文件閱讀清楚，還請各位讀者諒解，我會盡快找出問題的答案，如有必要，也會在 Deno 的 Repo 發看看 issue （但我認為這問題不是 Deno 本身造成的，所以筆者還是希望能自己解決問題）。

強型闖入DenoLand系列 第 8 篇