JavaScript中如何用this获取函数返回值？场景案例求解释

嘿，这个问题可是JavaScript里this指向的经典坑，我来给你掰扯明白～

为什么场景1会返回3？ #

咱们先拆解场景1的代码：

var x = 3;
var foo = { x: 2, inner: { x: 1, reValue: function() { return this.x } } }
var go = foo.inner.reValue;
console.log(go()) // 3

当你把foo.inner.reValue赋值给变量go的时候，本质上是把这个函数单独抽离出来了——它不再和foo.inner这个对象绑定在一起。

在非严格模式下，函数以普通方式调用（既不是作为对象的方法，也没通过call/apply/bind绑定，也不是构造函数）时，this会默认指向全局对象：

• 浏览器环境里全局对象是window，Node.js里是global。
• 你在全局作用域声明的var x = 3，其实就是给全局对象加了一个x属性，值为3。

所以当调用go()时，函数里的this指向全局对象，this.x自然就是全局的3了。

对比场景2，foo.inner.reValue()是直接作为foo.inner的方法调用的，这时候this会指向调用这个方法的对象（也就是foo.inner），所以返回的是foo.inner里的x=1。

如何通过this正确获取函数的返回值？ #

核心就是控制this的指向，让它指向你期望的对象，这里有几种常用方法：

1. 保持函数作为对象方法直接调用 #

就像场景2那样，直接通过对象链调用函数：

console.log(foo.inner.reValue()) // 1

这种方式下，this会自动指向调用方法的那个对象（这里是foo.inner），函数就能正确访问对象的x属性。

2. 使用call/apply显式绑定this #

如果你已经把函数抽离成了变量（比如go），可以用call或apply强制指定this的指向：

console.log(go.call(foo.inner)) // 1
// 或者用apply，参数形式不同但效果一致
console.log(go.apply(foo.inner)) // 1

3. 使用bind创建永久绑定的函数 #

bind会返回一个新函数，这个新函数的this会永久绑定到你指定的对象上，之后不管怎么调用都不会改变：

var boundGo = go.bind(foo.inner);
console.log(boundGo()) // 1

4. 使用箭头函数（静态this） #

如果把reValue改成箭头函数，它的this会继承自外层作用域（而不是调用时的上下文）：

var foo = { x: 2, inner: { x: 1, reValue: () => { return this.x } } }
// 这里箭头函数的this继承自全局作用域，所以不管怎么调用都返回3
console.log(foo.inner.reValue()) // 3
console.log(go()) // 3

这个方法要根据你的实际需求来用，适合需要固定this指向外层作用域的场景。

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