JavaScript面试题：this指向性问题详解

"该文档包含了前端面试中关于JavaScript问题的答案，特别是关于this指向性的总结，包括不同场景下this的绑定规则及其变化。" 在JavaScript中，`this`关键字的指向是一个常见的面试题，因为它涉及到函数调用的上下文。下面我们将深入探讨文档中提到的几个例子： Code 1 ```javascript var length = 10; function fn() { alert(this.length); } var obj = { length: 5, method: function() { fn(); } }; obj.method(); // 输出: 10 ``` 在这个例子中，`this`在`fn`内部指向的是全局对象，因为在`obj.method()`中，`fn`是被直接调用的，没有明确的上下文对象，因此`this`按照默认绑定规则指向全局对象（在浏览器环境中是`window`）。 Code 2 ```javascript var num = 100; var obj = { num: 200, inner: { num: 300, print: function() { console.log(this.num); } } }; obj.inner.print(); // 输出: 300 var func = obj.inner.print; func(); // 输出: 100 obj.inner.print(); // 输出: 300 (func = obj.inner.print)(); // 输出: 100 ``` 这里，`this`在`print`内部始终指向`obj.inner`，因为`print`被作为对象的属性调用。但在`func()`中，`func`只是一个函数引用，没有上下文对象，所以`this`按默认绑定规则指向全局对象。最后的赋值表达式执行后，`func`再次失去其原始的上下文。 Code 3 ```javascript function foo() { console.log(this.a); } var obj2 = { a: 42, foo: foo }; var obj1 = { a: 2, obj2: obj2 }; obj1.obj2.foo(); // 输出: 42 var obj3 = { a: 2 }; foo.call(obj3); // 输出: 2 var bar = function() { foo.call(obj3); }; bar(); // 输出: 2 setTimeout(bar, 100); // 输出: 2 bar.call(window); // 输出: 2 ``` 在这个例子中，`foo`的`this`根据调用方式改变。在`obj1.obj2.foo()`中，`this`指向`obj2`；通过`call`方法，`this`可以显式设置；`bar`内的`foo.call(obj3)`保持了显式绑定；`setTimeout`的回调函数在全局环境下执行，因此`this`指向全局对象；最后，`bar.call(window)`也显式设置了`this`。 Code 4 ```javascript var obj4 = { a: 3, foo: foo }; obj2.foo(); // 输出: 42 obj4.foo(); // 输出: 3 ``` 这里，`obj2.foo()`中，`this`指向`obj2`，因为`foo`是作为`obj2`的属性调用的。而在`obj4.foo()`中，`foo`被赋给了`obj4`，因此`this`指向`obj4`。 总结起来，`this`的指向取决于函数调用的方式：默认绑定、隐式绑定、显示绑定（如`call`、`apply`、`bind`）以及硬绑定。理解和掌握这些规则对于解决复杂的JavaScript问题至关重要。在面试中，了解这些概念并能正确分析不同情况下的`this`指向，将有助于展示你的专业技能。