面试题：JavaScript中this关键字在复杂嵌套函数中的指向分析

Question

假设有如下代码：function outer() { var a = 1; function middle() { var b = 2; function inner() { console.log(this); } inner(); } middle(); } outer(); 请分析inner函数中this的指向，并解释原因。若要让inner函数中的this指向outer函数的实例对象，应该如何修改代码？

Answer 1

1. 分析inner函数中this的指向及原因：

   • 在非严格模式下，inner函数中this指向全局对象（在浏览器环境中是window，在Node.js环境中是global）。原因是当函数作为普通函数调用时（即没有通过某个对象来调用，像obj.func()这种形式），非严格模式下this默认指向全局对象。这里inner()是直接调用，没有所属对象，所以this指向全局对象。
   • 在严格模式下，inner函数中this指向undefined。因为严格模式下，普通函数调用时this不会默认指向全局对象，而是undefined。

2. 让inner函数中的this指向outer函数的实例对象的修改方法：

   • 方法一：使用bind方法：

function outer() {
    var a = 1;
    function middle() {
        var b = 2;
        function inner() {
            console.log(this);
        }
        var boundInner = inner.bind(this);
        boundInner();
    }
    middle();
}
outer();

• 方法二：使用call或apply方法：

function outer() {
    var a = 1;
    function middle() {
        var b = 2;
        function inner() {
            console.log(this);
        }
        inner.call(this);
        // 或者 inner.apply(this);
    }
    middle();
}
outer();

• 方法三：使用箭头函数：

function outer() {
    var a = 1;
    function middle() {
        var b = 2;
        const inner = () => {
            console.log(this);
        };
        inner();
    }
    middle();
}
outer();

• 在上述方法中，bind方法创建一个新函数，将inner函数的this绑定到middle函数的this（而middle函数的this在outer函数调用时指向outer函数的实例对象）。call和apply方法是在调用inner函数时，将this指定为middle函数的this。箭头函数没有自己的this，它的this继承自外层作用域，这里外层是middle函数，而middle函数的this在outer函数调用时指向outer函数的实例对象。