面试题：JavaScript 模块导出函数 this 绑定的复杂场景

Question

假设有一个 JavaScript 模块如下： ```javascript const obj = { value: 'objValue' }; function moduleFunction() { return this.value; } const boundFunction = moduleFunction.bind(obj); export { boundFunction }; ``` 在另一个文件中导入 `boundFunction` 并调用 `import { boundFunction } from './module.js'; console.log(boundFunction());`。如果此时在模块内部添加 `'use strict';`，对 `this` 的绑定有什么影响？如果再将 `obj` 的定义修改为 `const obj = { value: function() { return this; } };`，调用 `boundFunction` 后返回结果是什么，为什么？

Answer 1

1. 添加'use strict';对this绑定的影响：

   • 在严格模式下，this不会进行隐式绑定。在原始代码中，moduleFunction函数没有在对象方法的调用模式下被调用（例如obj.moduleFunction()），如果没有'use strict';，在非严格模式下this会指向全局对象（浏览器环境下是window）。
   • 当添加'use strict';后，由于moduleFunction不是在对象方法的调用模式下被调用，this的值会是undefined。但是这里使用了bind方法将moduleFunction绑定到了obj对象上，所以this仍然会指向obj，对boundFunction的调用结果没有影响，依然会返回objValue。

2. 修改obj定义后调用boundFunction的返回结果及原因：

   • 修改obj定义为const obj = { value: function() { return this; } };后，boundFunction调用的返回结果是obj对象。
   • 原因是boundFunction是通过moduleFunction.bind(obj)创建的，它的this已经被绑定到了obj。当调用boundFunction时，实际上是调用绑定到obj的moduleFunction，而moduleFunction此时返回this，由于this已经被bind绑定到了obj，所以返回的就是obj对象。