JS中将对象方法赋值给变量后调用为何输出与直接调用结果不符

问题核心：你混淆了this动态绑定和闭包词法作用域两个完全独立的JS机制 #

原题代码如下：

window.name = "Mike Tyson";

const me = {
    name: "Tyler",
    sayName() {
        console.log(this.name);
    },
};

const sayName = me.sayName;
sayName();

原理说明 #

• 首先明确：普通函数的this不是在函数定义阶段绑定的，完全由函数实际被调用的方式决定，和函数定义的位置、赋值给谁没有关系。
• 当你执行me.sayName()时，属于「对象方法调用」的场景，this会被隐式绑定到.前面的me对象，因此取到me.name的值Tyler，和你测试的结果一致。
• 当你执行const sayName = me.sayName时，只是把sayName函数本身的引用赋值给了全局变量，这个赋值过程不会保留和原对象me的绑定关系。接下来直接调用sayName()属于「独立函数调用」场景，非严格模式下this会默认绑定到全局对象（浏览器环境下就是window），因此取到window.name的值Mike Tyson。

你理解的误区 #

你提到的闭包捕获词法作用域，仅作用于普通变量的访问，和this完全无关。注意：对象字面量的{}不会创建新的词法作用域，sayName函数的词法作用域就是全局作用域，里面根本没有name这个变量。你代码里访问的this.name是this指向对象的属性，不是当前词法作用域的变量，自然不适用闭包的规则。

补充：实现固定输出Tyler的常见方案 #

• 调用时手动绑定this：const sayName = me.sayName.bind(me)
• 把对象方法改成箭头函数：箭头函数的this继承自外层作用域的this，定义时就固定
• 在对象方法内部用闭包捕获变量：

const me = {
    name: "Tyler",
    sayName() {
        const name = this.name;
        return () => console.log(name);
    }
};
const sayName = me.sayName();
sayName(); // 输出Tyler

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