# this 到底是誰｜筆記 by Sz
###### tags: `Sz` `課前` `Vue新手夏令營`

- [Vue 新手夏令營 課程頁面](https://hackmd.io/@dbFY0UD9SUeKmNXhWf01ew/BkJoW-hn_/%2FC05go-8iTSS-nrMwKU22kA)
- [:sun_with_face:筆記入口](/2JiZbCPdR0G4p5fNycPmTg)

:::info

- 主流框架都會用到
- 是 function 隱藏版參數們
- this 的特性
- 主要看的就是 function 是從哪裡呼叫的，就是指誰
- this 的幾種狀況
- simple call （不太會這樣用）
- object 的 function（最常用）
- function 跟 iphone 一樣，你的 iphone 不是他的 iphone
- 陷阱題
- object 中還有 object
- Object 裡面的 function 硬要呼叫全域 function
- callback function
:::

## function 的隱藏版參數們

這是一個 function，參數除了我們自己定義的 parameter 之外（範例中為 params）
還有其他 function 內建的參數
- this
- window
- arguments

var a = '全域'
function fn(params) {
  console.log(params, this, window, arguments);
  debugger;
}

他們可以在哪裡看到呢？

### debugger

會將 Devtool 的 debugger 停在這個程式碼上

#### scope 作用域

在 scope 裡可以看到這些隱藏版參數，執行剛剛的 `fn()`

fn(1, 2, 3);   // 觀察執行 function 後

- `fn`
- `<this>`: Window
- `arguments`: 多了一個類陣列 (1, 2, 3)
- `Window`: Global

## this 的特性
- 指向是會變動的
- 不用太煩惱，通常只會用到一種
- 傳統的 function 的 this 只與調用方式有關，跟定義沒什麼關係（新的 function 看箭頭函式那篇）
- 主要看的就是 function 是從哪裡呼叫的，就是指誰

## this 的幾種狀況

開始把這個 function 想成一台 iphone

### 不太會這樣用：simple call

function 在全域中，function 中的 this 指向全域
這台 iphone 還在 apple 商店裡，他沒有主人

var someone = '全域';
function callSomeone() {
  // 呼叫全域的變數：simple call
  console.log(this.someone);  
}
callSomeone();

### 最常用的：object 裡的 function

function 在 object 中，function 中的 this 指向 object
這台 iphone 還在 apple 商店裡，他沒有主人
有 object 的 iphone 就有主人了，他的主人是 obj

var obj = {
  someone: '物件',
  callSomeone() {
    console.log(this.someone);
  }
}
obj.callSomeone();

### 看 function 是誰的，this 就是指誰

不同個 object 擁有同個 function 並不衝突，就像你有 iphone，他也可以有

var obj2 = {
  someone: '物件2',
  callSomeone()      // 語法糖省略 key
}
obj2.callSomeone();  // 指向 obj2

### 陷阱題

#### Object 中還有 Object

小孩的 iphone 不是你的 iphone

var wrapObj = {
  someone: '外層物件',
  callSomeone(),          // wrapObj 的 function
  innerObj: {
    someone: '內層物件',
    callSomeone(),        // innerObj 的 function
  }
}
wrapObj.innerObj.callSomeone();

#### Object 裡面的 function 硬要呼叫全域 function

callSomeone 還是全域的 funciton

var obj3 = {
  someone: '物件 3',
  fn() {
    callSomeone(); // 通常平常不會這樣去取用 this
  }
}
obj3.fn();

#### callback function：避免用 this

使用 callback function（像是在forEach裡），大部分就是把一個定義好的 function 簡化放到 callback funciton 裡面
所以他還是一個全域的 function

var obj4 = {
  someone: '物件 4',
  fn() {
    setTimeout(function () {
      console.log(this.someone);    // simple call
    });
  }
}
obj4.fn();