this的指向由调用方式决定,非定义位置:默认绑定时指向全局或 undefined;隐式绑定指向调用 对象 ;显式绑定通过 call/apply/bind 指定;new 绑定指向新实例;箭头函数无自身 this, 继承 外层 作用域。

在 javaScript 中,this 的指向一直是开发者容易混淆的部分。它的值不是由函数定义的位置决定,而是由函数调用时的执行上下文动态确定。理解 this 的绑定规则以及箭头函数如何改变这一行为,对掌握 js 至关重要。
默认绑定:独立函数调用
当一个函数被直接调用,而非作为对象的方法、构造函数 或通过 call/apply/bind 调用时,this 指向全局对象(浏览器 中是 window)。 严格模式 下,this 为 undefined。
例如:
隐式绑定:对象方法调用
当函数作为对象的方法被调用时,this 指向该对象。
示例:
const obj = {name: 'Alice', greet() {console.log(this.name); } }; obj.greet(); // 输出 'Alice'
注意:如果将方法赋值给变量再调用,会丢失绑定。
立即学习“Java 免费学习笔记(深入)”;
const fn = obj.greet; fn(); // 输出 undefined,this 指向全局或 undefined
显式绑定:call、apply 和 bind
通过 call、apply 或 bind 可以强制指定 this 的值。
例子:
function logName() { console.log(this.name); } const person = {name: 'Bob'}; logName.call(person); // 输出 'Bob'
new 绑定:构造函数调用
使用 new 操作符 调用函数时,会创建一个新对象,this 指向这个新对象。
function Person(name) {this.name = name;} const p = new Person('Charlie'); console.log(p.name); // 输出 'Charlie'
箭头函数中的 this
箭头函数没有自己的 this,它会继承外层 作用域 的 this 值。这意味着它不会受上述四种绑定规则影响。
典型场景:
const obj = {name: 'Dana', regularFunc: function() {setTimeout(function() {console.log(this.name); // undefined,this 指向 window }, 100); }, arrowFunc: function() { setTimeout(() => {console.log(this.name); // 输出 'Dana',this 继承自 arrowFunc }, 100); } }; obj.arrowFunc();
因为箭头函数捕获的是定义时的 this,所以在需要动态 this 的场景(如 事件 处理器、构造函数)中应避免使用。
基本上就这些。掌握 this 的四种绑定规则,并理解箭头函数如何绕过它们,就能更准确地预测代码行为。不复杂但容易忽略细节。


