ES6箭頭函數中的this指向

1箭頭函數中的this

  • (1)箭頭函數沒有this : 這意味着 call() apply() bind() 無法修改箭頭函數中的this
  • (2)箭頭函數中的this指向 :訪問上一個作用域的this
    • 說人話:函數在哪個作用域聲明,this就是誰 (本質是通過作用域鏈訪問上一個作用域中的this)
  • (3)箭頭函數與function函數this區別
    • function函數 : 誰調用我,我就指向誰,與聲明無關
    • 箭頭函數 : 誰聲明我,我就指向誰 ,與調用無關
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>

<body>
    <script>

        /*ES6箭頭函數中的this
        (1)箭頭函數中沒有this : 這意味着 call() apply() bind() 無法修改箭頭函數中的this
        (2)箭頭函數中的this指向 :訪問上一個作用域的this
            說人話:函數在哪個作用域聲明,this就是誰 (本質是通過作用域鏈訪問上一個作用域中的this)
        */

        //1.全局函數 : window
        let fn = () => {
            console.log(this);//window
        };
        fn();//window
        fn.call({ a: 11 });//window   箭頭函數中的this無法修改,因爲箭頭函數沒有this

        //2.對象方法: window  (因爲對象無法開闢作用域,obj所在作用域還是window)
        let obj = {
            sayHi: () => {
                console.log('學習使我快樂');
				//因爲只有函數才能開闢作用域,這裏的obj中的this還是指向window
                console.log(this);//window
            }
        };
        obj.sayHi();//window

        //3.局部函數

        var person = {
            play: function () {
                console.log('play中的this');
                console.log(this);//person
                
                //在局部作用域聲明一個箭頭函數
                let fn2 = () => {
                    console.log('fn2在一級鏈中被聲明,我的this就是一級鏈中的this');
                    console.log(this);//person
                };
                fn2();
            }
        };
        person.play();
    </script>
</body>

</html>
發佈了102 篇原創文章 · 獲贊 143 · 訪問量 68萬+
發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章