2021-08-03-[筆記]常見 this 調用方法

前言：
這篇主要整理卡斯柏老師在課程中，介紹常用 this 調用方法的筆記

---

參考資料：
JavaScript 核心篇
關於this是一個很神奇的東西這件事情
JavaScript 核心觀念(41)-函式以及 This 的運作-this：簡易呼叫

---

何謂 this ?

this 是 JavaScriptc函式內的關鍵字，在全域下 this 即為 window、在嚴格模式下則為 undefined、Node模式下則為 globalThis。我們可以在 console 中驗證此想法。

this 使用地方

1. 物件中調用

重點：物件中的調用只有跟誰呼叫他有關係

let myName = '物件中的資料';

function callPerson(){
    console.log('this', this.myName);
}

let Myfamily ={
    myName: 'Andy',
    callFunction: callPerson
}

// 範例一 
Myfamily.callFunction() // Andy;

// 範例二
let Test = Myfamily.callFunction;
Test(); // 'this', undefined => 因為 Myfamily 物件下沒有name屬性。所以當然是undefined

//範例三
let Test2 = Myfamily.callFunction();
Test2; // Andy; 

1. 簡易呼叫

何時為簡易呼叫?

• 直接呼叫

• 立即函式

• 閉包

• Call Back Function

  • 定義

    我剛剛才發現原來一些陣列操作方法，基本上都是用到回呼函式。像是forEach、filter、map都是阿

// 範例一 直接呼叫
var windowVariable = '全域變數';
function call(){
  console.log(this,this.windowVariable);
}
call(); //'全域變數'

// 範例二 立即函式
var test = 'rest';
(function(){
  console.log(this.test); // 'rest'
  function callSomeone(){
    console.log(this.test); // 'test'
  };
  callSomeone();
})();

// 範例三 閉包
var test = "test3";
function calculate(base = 50) {
  var money = base;
  return function (saveMoney) {
    money = money + saveMoney;
    console.log(this.test, money); // test3, 120
  };
}

var MyWallet = calculate(100);
MyWallet(20);

// 範例四 CallBack Function
var array = [1,2,3];
var test = 'wwww3';
array.forEach(function(item,index){
   console.log(this.test)
});

// 範例五
var vm = "全域";

var family = {
  vm: "小明",
  callName: function () {
    console.log('1',this); 
    // 其呼叫方式的是直接在全域下呼叫，所以不管所定義的位置在哪裡，都會指向全域
    setTimeout(function () {
      console.log(this,this.vm); // 全域
    }, 1000);
  },
};
family.callName();

• 基本上不要使用，原因如下：

  1. 我剛發現 let 沒有全域變數，所以當我們直接使用 simple call 呼叫後直接 undefined ，範例如下：

     let windowVariable = '全域變數';
     function call(){
       console.log(this.windowVariable);
     }
     call(); // undefined;

  2. 簡易呼叫的 this 本質就是 undefined