1. This 的指向問題

默认绑定规则

    console.log(this) // window, strict模式下返回undefined
    function test() {
        console.log(this); // window
    }
    test(); // 純粹的調用 (Simple call) ==> window.test() 指向window

隱式綁定規則 (誰呼叫就指向誰)

    let a = 0;
    let obj = {
        a:2,
        foo: function(){
            console.log(this); // obj  =>  obj 呼叫了 foo, 因此 foo 裡的 this 指向為 obj
        }
    }

    obj.foo()

    let a = 0;
    let obj = {
        a:2,
        foo: function(){
            console.log(this); // 返回obj

            function test(){
                console.log(this) // window
            }
            test() // obj 呼叫了 foo, 但 test 並不是由 obj呼叫的, 而是純粹調用, 因此 this 指向 window
        }
    }

    obj.foo()

IIFE

    let a = 0;
    let obj = {
        a:2,
        foo: function(){
            (function(){
                console.log(this); // window
            })(); // 立即函式(IIFE)都屬於純粹調用, 所以 this 的指向都是 window
        }
    }
    obj.foo()

閉包

    let a = 0;
    let obj = {
        a: 2,
        foo: function () {
            function test() {
                console.log(this) // window
            }
            return test
        }
    }
    
    obj.foo()() // obj.foo() 的返回值為 test, 因此該表達式 == test() 屬於純粹調用, 因此 this 指向 window

變數賦值的情況

    let a = 0;
    function foo(){
        console.log(this);
    }
    
    let obj = {
        a:2,
        foo // ES6簡寫
    }
    obj.foo() // obj

    let bar = obj.foo // obj.foo == foo, 該表達式的結果是把 foo 的引用地址賦值給了 bar
    bar() // 因此 bar == foo , 屬於純粹調用, this 的指向為 window

參數賦值的情況

    let a = 0;
    function foo(){
        console.log(this);
    }

    function bar(fn){
        // 將傳進來的 obj.foo == foo 賦值給形參 fn
        fn() // == foo()  屬於純粹調用, 因此 this 的指向為 window
        // 因此 this 的指向只需要關注函式最終是如何執行的即可
    }

    let obj = {
        a:2,
        foo
    }
    bar(obj.foo) // obj.foo == foo 作為實參

阿里巴巴面試題

    var name = 222;
    var a = {
        name: 111,
        say: function () {
            console.log(this.name);
        },
    };
    var fun = a.say;
    fun(); // ?
    a.say(); // ?

    var b = {
        name: 333,
        say: function (fun) {
            fun(); 
        },
    };
    b.say(a.say); // ?
    b.say = a.say;
    b.say(); // ?

答案: 

    var name = 222;
    var a = {
        name: 111,
        say: function () {
            console.log(this.name);
        },
    };
    var fun = a.say;
    fun(); // 222
    a.say(); // 111

    var b = {
        name: 333,
        say: function (fun) {
            fun(); // 在這裡執行了 (a.say)(), 因此是純粹調用, this 的指向為 window
        },
    };
    b.say(a.say); // 222
    b.say = a.say;
    b.say(); // 333

forEach 內的 this 指向

    let arr = [1,2,3,4,5]

    let obj = { name : "obj" }
    // 在對應的api接口文檔中指明
    arr.forEach(function(item, index, arr){
        console.log(this); // 每次都輸出 obj
    }, obj) // 這裡的 obj 就是 arr.forEach 遍歷時的 this 指向

arr.forEach(function callback(currentValue[, index[, array]]) {
    //your iterator
}[, thisArg]);

參數: 
callback
這個 callback 函式將會把 Array 中的每一個元素作為參數，帶進本 callback 函式裡，每個元素各執行一次，接收三個參數：

currentValue
代表目前被處理中的 Array 之中的那個元素。

index (選擇性)
代表目前被處理中的 Array 之中的那個元素的 index.

array (選擇性)
呼叫 forEach() 方法的那個 Array 本身，也就是上面語法中的 arr。

thisArg (選擇性)
執行 callback 回呼函式的 this（即參考之 Object）值。

source: https://developer.mozilla.org/zh-TW/docs/Web/JavaScript/Reference/Global_Objects/Array/forEach

顯式綁定: call, apply, bind

    function foo() {
        console.log(this); // 打印
    }
    let obj = {
        a: 2,
        foo
    }

    let bar = obj.foo

    obj.foo() // obj
    
    以下三種方式都能改變 this 的指向, 將 bar函式 的 this 指向改為 obj
    bar.call(obj) // obj
    bar.apply(obj) // obj
    bar.bind(obj)() // obj

補充

function foo(){
    console.log(this)
}

foo.call(1) // Number {1}
foo.call(null) // this 指向 window
foo.apply(undefined) // this 指向 window

建構式的顯式綁定實例

    function Product(name, price) {
        this.name = name;
        this.price = price;

        if (price < 0)
            throw RangeError('Cannot create product "' + name + '" with a negative price');
        return this;
    }

    function Food(name, price) {
        // new後this的指向就是這個實例物件
        console.log(this);
        Product.call(this, name, price);
        this.category = 'food';
    }
    Food.prototype = new Product();

    function Toy(name, price) {
        Product.call(this, name, price);
        this.category = 'toy';
    }
    Toy.prototype = new Product();

    let cheese = new Food('feta', 5);
    console.log(cheese); // Food {name: 'feta', price: 5, category: 'food'}
    let fun = new Toy('robot', 40);
    console.log(fun); // Toy {name: 'robot', price: 40, category: 'toy'}

new 綁定

function Person(name='haewon', age=6){
    this.name = name
    this.age = age
    console.log(this) // 這裡會打印 this
}
let me = new Person('pupu', 12) // 打印 Person {name: 'pupu', age: 12}, this 的指向為實例化的物件

Person() // 打印 window; 同時 window.name 的值為 'haewon'; window.age 的值為 6

總結

1. 默認綁定: console.log(this=== window)  ==> true 
2. 隱式綁定: (誰呼叫就指向誰) :
3. 顯式綁定: call, apply, bind
4. new 綁定規則;

優先級

1. 顯式綁定 > 隱式綁定

    function foo(){
            console.log(this.a);
        }
        let obj1 ={
            a:'obj1',
            foo
        }
        let obj2 ={
            a:'obj2',
            foo
        }
        obj1.foo() // obj1
        obj2.foo() // obj2

        obj1.foo.call(obj2) // obj2
        obj2.foo.call(obj1) // obj1

2. new 綁定 > 顯式綁定

function foo(b){
        this.a = b
    }
    let obj1 = {}
    let bar = foo.bind(obj1)
    bar(2)

    console.log(obj1.a) // 2

    let bar_child = new bar(99) // new 將 this 的指向更改為 bar_child
    console.log(obj1.a); // 2

    console.log(bar_child.a); // {a:99}

以上是我整理好的資料，希望有幫助到大家🙏