JS的箭頭函數this作用域

 

name="小剛";
let student={
    name:"小明",
    printLog:function(){
        // 這里綁定了頂層作用域，可以使用變量與方法
        console.log(this)
    },
    printArrowLog:()=>{
        // 這里不知道綁定的是哪個作用域，有知道的大咖請回答下
        console.log(this)
    }
}

student.printLog();
/*
    { name: '小明',
      printLog: [Function: printLog],
      printArrowLog: [Function: printArrowLog] 
    }
*/
student.printArrowLog();
/*
    {}
    這里返回了空對象，說明this不是指向window全局對象，也不是指向student對象。奇葩
*/

 

name="小剛";
let student={
    name:"小明",
    printLog:function(){
        // 這里綁定了頂層作用域，可以使用變量與方法
        return ()=>{
            console.log("printLog Arrow："+this)
        }
    },
    printLog1:function(){
        // 這里綁定了全局作用域，可以使用window對象的屬性
        return function(){
            console.log("printLog1:"+this)
        }
    },
    printLog2:function(){
        // 這里綁定了全局作用域，可以使用window對象的屬性
        (function(){
            console.log("printLog2:"+this)
        })()
    }
}

sayhello=student.printLog();
sayhello1=student.printLog1();

sayhello();
/*
    printLog Arrow：小明
    this指向：printLog Arrow：[object Object]
    從這里我們可以看出這里使用的是student對象里的頂層屬性，沒有說明問題
*/

sayhello1();
/*
    printLog1:小剛
    this指向：printLog1:[object global]
    從打印的結果來看，我們可以看到打印的name值為小剛，是我在全局進行生命的name屬性，說明在外部進行調用，this指向window全局對象

*/

student.printLog2();
/*
    printLog2:小剛
    this指向：printLog1:[object global]
    從打印的結果來看，我們可以看到打印的name值為小剛，是我在全局進行生命的name屬性，說明生命調用寫在一起，this指向window全局對象
*/

 

name="小剛";
let student={
    name:"小明",
    functions:{
        name:"小飛",
        printLog:function(){
            // 這里綁定了functions對象作用域，可以使用內部的變量與方法
            return ()=>{
                console.log("printLog:"+this.name)
            }
        },
        printLog1:function(){
            // 這里綁定了頂層作用域，可以使用window的變量與方法
            return function(){
                console.log("printLog1:"+this.name)
            }
        }
    }
}


var pl=student.functions.printLog();
pl();
/*
    printLog:小飛

*/


var pl1=student.functions.printLog1();
pl1();
/*
    printLog1:小剛
*/

/*總結：根據name的值不同，可以查到使用的是哪個作用域的值,進而可以知道this的指向*/

 

function方法調用call和apply的使用方式：https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Function/call