this：
存在全域的執行環境，也存在函式所開啟的執行環境

        var myname = 'Tom';
        function callname() {

        }
        callname();

影響函式this的調用方式：
1.簡易呼叫
2.作為物件方法
3.bind、apply、call方法
4.new (建構式)
5.DOM事件處理器
6.箭頭函式

簡易呼叫 Simple Call：this 會指向全域物件

1.直接呼叫函式的情況下。

        var myname = 'Tom';
        function callname() {
            console.log(this.myname);
        }
        callname();            //Tom

2.放到立即函式 IIFE ，直接在函式內直接在呼叫另一個函式：。

        var name = 'GlobalName';
        (function () {
            function foo() {
                let name = 'Chupai';
                console.log(this.name);
            }
            foo(); // "GlobalName"
        })();

        var name = 'GlobalName';
        function foo() {
            let name = 'Chupai';
            console.log(this.name);
        }

        (function () {
            foo(); // "GlobalName"
        })();

3.放到閉包 Closure。

var name = 'GlobalName';
function foo() {
  let name = 'Chupai';
  return function() {
    console.log(this.name);
  };
}

let myFoo = foo();

myFoo(); // "GlobalName"

4.放到Callback function。

備註：所謂Callback function把函式當作另一個函式的參數，透過另一個函式來呼叫它。
詳細可以參考重新認識 JavaScript: Day 18 Callback Function 與 IIFE

        var name = 'GlobalName';

        function foo() {
            let name = 'Chupai';

            function boo() {
                console.log(this.name);
            }

            boo();
        }

        foo();  // "GlobalName"

作為物件方法呼叫

• this與函式如何宣告沒有關聯，僅與呼叫方法有關
• 物件的方法調用時，僅需要關注是在哪一個物件下呼叫
• ，this 的值為被呼叫函式的所屬物件

例1：

        var myname = 'Tom';
        function callname() {
            console.log(this.myname);
        }
        var family = {
            myname: '小名家',
            whosName: callname
        };
        family.whosName();    //小名家

解family.whosName()：

1. 找family裡面的whosName屬性
2. whosName屬性的值是函式callname
3. 函式callname裡面的this會指向family，並尋找屬性myname。
4. 屬性myname的值是小名家。

例2：

        var myname = 'Tom';
        function callname() {
            console.log(this.myname);
        }
        var family = {
            myName: '小明家',
            callName: callName,
            Ming: {
                myName: '小明',
                callName: callName
            }
        }
        family.callName();         //小明家
        family.Ming.callName();    //小明

解：

1. family.callName()：this範圍為family的myname屬性。
2. family.Ming.callName()：this範圍為Ming的myname屬性。

例3：

        var myName = 'TOM';
        var family = {
            myName: '小明家',
            whoName: function () {
                console.log(this.myName);
            }
        }
        var herName = family.whoName;
        herName();

解：
family.callName被賦予全域變數herName，而且並在全域環境呼叫，this從物件的範圍變更到全域的範圍，this.myName指向全域的var myName = 'TOM'。

對比例3：

        var myName = 'TOM';
        var family = {
            myName: '小明家',
            whoName: function () {
                console.log(this.myName);
            }
        }
        var herName = family.whoName;
        herName;

解：
此時的this，是在物件下的屬性whoName呼叫，所以此時會指向this所屬物件的myName，就會出現小明家。
參考文章：

1. JavaScript 的 this:https://chupainotebook.blogspot.com/2019/09/javascript-this.html
2. 重新認識 JavaScript: Day 18 Callback Function 與 IIFE：https://ithelp.ithome.com.tw/articles/10192739