# Vue學習#2 this的運作
###### tags: `Vue 直播班 - 2022 春季班` `Vue`
### 什麼是simple call --- 直接使用函式

var someone = '全域';
function callSomeone() {
  console.log(this.someone);
} 
callSomeone(); // simple call

#### <font color='red'> !!!! 使用 simple call this就會呼叫全域 </font>
#### <font color='red'> this 就是呼叫方法時，「點」前面的那個物件。</font>

### callback function ---
### 把函式當作另一個函式的參數，透過另一個函式來呼叫它
### 或是一個函式在另一個函式中被使用

var doFirst = function (callback) {
    console.log('do first...');
    callback(); // <---執行傳入的doLater()
}

/** callback function **/
var doLater = function () {
    console.log('do later...')
}
doFirst(doLater);

#### <font color='red'> !!!! callback function 也是呼叫全域 </font>
### 如何看this --- 不是看呼叫的位置，而是呼叫的方式來決定 this 指向的是誰。
以下範例來看:
呼叫 callSomeone() 這個函式前面沒有任何的東西，就會抓到全域那個 someone 值
如果是直接使用 obj.callSomeone() 就會抓到該物件內的 someone 值

// #3 注意：this 的指向相當複雜，大部分情境只需要了解其中一種即可(95%)
// 傳統函式中的 this 只與調用方式有關
var someone = '全域';
function callSomeone() {
  console.log(this.someone);
}
callSomeone();  //ans:全域

// #4 各種運用變化
var obj = {
  someone: '物件',
  callSomeone() {
    console.log(this.someone);
  }
}
obj.callSomeone(); //ans:物件

### 箭頭函式看this ---
### 看包覆箭頭函式的function所指向的地方，沒有包覆就是抓全域
範例:

// #2 This 綁定的差異
// #2-1 活用觀念，將內層的改為箭頭
// 箭頭函式沒有自己的this
var name = '全域'
const person = {
  name: '小明',
  callName: function () { 
    console.log('1', this.name); // 1 小明
    setTimeout(()=> {
      console.log('2', this.name); // 2 ans:小明
      console.log('3', this); // 3 ans: person這個物件
    }, 10);
  },
}
person.callName();  
// 包覆箭頭函式的function(callName)被person這個物件所使用的，所以箭頭函式裡面的this.name會抓person裡面的name
// this則會抓person這個物件

#### 如何把this避免指向全域的兩種方法
1. this先指向其他變數
2. 使用箭頭函式

function callSomeone() {
  console.log(this.someone);
}

var obj4 = {
  someone: '物件 4',
  fn() {
     //const vm = this; // (1)用一個變數指向 this， vm 在 Vue 中意指 ViewModel
    setTimeout(()=> {  //2 使用箭頭函式
      console.log(this.someone);
    });
  }
}

obj4.fn();

## 參考資料
[JavaScript 什麼是Callback函式 (Callback Function)？](https://matthung0807.blogspot.com/2019/05/javascript-callback-callback-function.html)