如何从外部调用函数内部箭头函数及箭头函数与普通函数的this差异

function x(name){
    this.name = name;

    const arrow =() =>{
        setTimeout(() => {
            console.log("Arrow" + this.name)
        },100)
    }

    const func1 = () => {
        setTimeout(() => {
            console.log("Normal" + this.name)
        },100) 
    }

    arrow(name);
    func1(name);
}

x("BOB")

1. 执行x("BOB")之后，如何从外部调用函数x内部定义的箭头函数func1？ #

默认情况下无法直接从外部调用func1：func1是定义在x函数作用域内的局部常量，没有对外暴露，外部作用域没有访问权限。
如果要实现外部调用，需要修改x函数的实现，常见有两种方案：

方案1：将func1挂载到this上 #

非严格模式下直接调用x时，this指向全局对象，挂载后可从全局直接访问：

function x(name){
    this.name = name;

    const arrow =() =>{
        setTimeout(() => {
            console.log("Arrow" + this.name)
        },100)
    }

    const func1 = () => {
        setTimeout(() => {
            console.log("Normal" + this.name)
        },100) 
    }
    // 新增挂载逻辑
    this.func1 = func1

    arrow(name);
    func1(name);
}

x("BOB")
// 浏览器环境调用
window.func1()
// Node.js环境调用
globalThis.func1()

方案2：将func1作为返回值导出 #

调用x时接收返回值即可拿到func1的引用：

function x(name){
    this.name = name;

    const arrow =() =>{
        setTimeout(() => {
            console.log("Arrow" + this.name)
        },100)
    }

    const func1 = () => {
        setTimeout(() => {
            console.log("Normal" + this.name)
        },100) 
    }

    arrow(name);
    func1(name);
    // 新增返回逻辑
    return func1
}

const externalFunc1 = x("BOB")
// 直接调用即可
externalFunc1()

2. 相较于普通函数，箭头函数对this的取值有什么不同的处理逻辑？ #

二者核心差异如下：

• 普通函数的this是运行时动态绑定的，具体指向完全由调用方式决定：
  • 作为对象的方法调用时，this指向调用该方法的对象
  • 独立直接调用时，非严格模式下指向全局对象，严格模式下为undefined
  • 配合new关键字调用时，this指向新创建的类实例
  • 用call/apply/bind调用时，this指向方法传入的指定对象
• 箭头函数没有属于自己的this绑定，它的this直接继承自外层词法作用域的this值，在箭头函数定义阶段就已经固定，不会随后续调用方式的变化而改变，也无法通过call/apply/bind修改它的this指向。

内容的提问来源于stack exchange，提问作者kichu