[JavaScript知识库] JavaScript箭头函数返回箭头函数

开发: C++知识库 Java知识库 JavaScript Python PHP知识库人工智能区块链大数据移动开发嵌入式开发工具数据结构与算法开发测试游戏开发网络协议系统运维
教程: HTML教程 CSS教程 JavaScript教程 Go语言教程 JQuery教程 VUE教程 VUE3教程 Bootstrap教程 SQL数据库教程 C语言教程 C++教程 Java教程 Python教程 Python3教程 C#教程
数码: 电脑笔记本显卡显示器固态硬盘硬盘耳机手机 iphone vivo oppo 小米华为单反装机图拉丁

-> JavaScript知识库 -> JavaScript箭头函数返回箭头函数 -> 正文阅读

[JavaScript知识库]JavaScript箭头函数返回箭头函数

?以下代码中，执行后输出什么结果呢？

<html>
<body>
</body>
<script>
    var a = 123
    const foo = () => a => console.log(this.a) // 结果？

    var obj1 = {
        a: 'obj1'
    }

    var obj2 = {
        a: 'obj2'
    }

    var bar = foo.call(obj1)
    bar.call(obj2)
</script>
</html>

答案是 123

原因：

<html>
<body>
</body>
<script>
    var a = 123
    const foo = () => {
        console.log(this);
        return a => {
            console.log(this);
            console.log(this.a)
        }
    }

    var obj1 = {
        a: 'obj1'
    }

    var obj2 = {
        a: 'obj2'
    }

    var bar = foo.call(obj1)
    bar.call(obj2)
</script>
</html>

结果都是 this，因为箭头函数 foo 创建时已经绑定全局的 this 对象了也就是 window，foo.call 也无法改变 this 的指向，因此箭头函数的 this 均指向 window。而 var a = 123 就是?window.a = 123。

<html>
<body>
</body>
<script>
    const a = 123 // 此处改为 const
    const foo = () => a => console.log(this.a)

    var obj1 = {
        a: 'obj1'
    }

    var obj2 = {
        a: 'obj2'
    }

    var bar = foo.call(obj1)
    bar.call(obj2)
</script>
</html>