本隨筆脫胎自js箭頭函式的this指向

先說說this是個什麼東東：

面嚮物件語言中 this 表示當前物件的一個引用。

但在 JavaScript 中 this 不是固定不變的，它會隨著執行環境的改變而改變。

在方法中，this 表示該方法所屬的物件。
如果單獨使用，this 表示全域性物件。
在函式中，this 表示全域性物件，而在嚴格模式下，this 是未定義的(undefined)。
在事件中，this 表示接收事件的元素。

類似 call() 和 apply() 方法可以將 this 引用到任何物件。

即在方法中的this指向呼叫它的那個物件（或者說該方法所屬的物件），而箭頭函式本身沒有this，它會繼承父執行

用程式碼直觀的來看看：

(不使用箭頭函式)

  <script>
        var x = 11;
        var obb = {
            x: 22,
            y: {
                x: 333,
                obc: f = function() {
                    console.log(this)
                    var x = 1111;
                    var obj = {
                        x: 2222,
                        say: function() {
                            console.log(this.x);
                        }
                    }
                    obj.say();
                }
            }
        }
        obb.y.obc()

  </script>
 

結果：

因為方法中this指向呼叫它的那個物件，所以此時this指向 obj

（使用箭頭函式）

  <script>
        var x = 11;
        var obb = {
            x: 22,
            y: {
                x: 333,
                obc: f = function() {
                    console.log(this)
                    var x = 1111;
                    var obj = {
                        x: 2222,
                        say: () => {
                            console.log(this.x);
                        }
                    }
                    obj.say();
                }
            }
        }
        obb.y.obc()

  </script>
 

結果：

因為箭頭函式本身沒有this，而這裡箭頭函式的執行上下文是函式f()，所以它就繼承了f()的this，即指向 y

（都使用箭頭函式）

  <script>
        var x = 11;
        var obb = {
            x: 22,
            y: {
                x: 333,
                obc: f = () => {
                    console.log(this)
                    var x = 1111;
                    var obj = {
                        x: 2222,
                        say: () => {
                            console.log(this.x);
                        }
                    }
                    obj.say();
                }
            }
        }
        obb.y.obc()

  </script>

結果：

可見此時指向了window，但為什麼不是obb?

這裡要注意：簡單物件（非函式）是沒有執行上下文的！

因為obb是簡單物件（非函式），所以它直接指向了window

本文來自部落格園，作者：不如飼豬，轉載請註明原文連結：https://www.cnblogs.com/ifeelthecall/p/15975672.html