This绑定_JS上下文解析

this的指向由函数调用方式决定，遵循四种绑定规则及优先级：默认绑定中，非严格模式下独立调用指向window，严格模式为undefined；隐式绑定中，作为对象方法调用时指向该对象，但赋值后调用会丢失绑定；显式绑定通过call、apply或bind强制指定this，其中bind永久绑定；new绑定在构造函数调用时指向新创建的实例。优先级顺序为：new绑定 > 显式绑定 > 隐式绑定 > 默认绑定。箭头函数无自身this，继承外层作用域的this值，不受上述规则影响。掌握这些规则即可准确判断this指向。

在JavaScript中，this的指向问题一直是开发者容易混淆的核心概念之一。它不像其他语言那样固定指向当前实例，而是根据函数调用的方式动态决定。理解this绑定的关键，在于掌握其四种绑定规则以及优先级关系。

默认绑定

在非严格模式下，独立函数调用时，this会指向全局对象（浏览器中为window）。这是最基础的绑定规则。

• function sayHi() { console.log(this); }
• sayHi(); // 输出 window

如果使用严格模式（'use strict'），此时this为undefined。

隐式绑定

当函数作为对象的方法被调用时，this指向该对象。

• const person = { name: 'Alice', greet() { console.log(this.name); } };
• person.greet(); // 输出 Alice

但要注意，若将方法赋值给变量再调用，会丢失绑定：

• const fn = person.greet;
• fn(); // 输出 undefined（严格模式）或 window.name

显式绑定

通过call、apply或bind方法，可以强制指定this的指向。

• person.greet.call({ name: 'Bob' }); // 输出 Bob
• const boundFn = person.greet.bind({ name: 'Charlie' });
• boundFn(); // 输出 Charlie

bind会返回一个新函数，永久绑定this；call和apply立即执行并临时绑定。

Vinteo AI

利用人工智能在逼真的室内环境中创建产品可视化。无需设计师和产品照片拍摄

62

查看详情

new绑定

使用new操作符调用函数时，会创建一个新对象，this指向这个新实例。

• function Person(name) { this.name = name; }
• const p = new Person('David');
• console.log(p.name); // 输出 David

构造函数即使普通函数，通过new调用也会改变this指向。

优先级顺序

这四种绑定规则有明确的优先级：new绑定 > 显式绑定 > 隐式绑定 > 默认绑定。

例如，即便对一个已用bind绑定的函数使用new，仍会以new的实例为准（除非是硬绑定的箭头函数特殊情况）。

另外，箭头函数没有自己的this，它会继承外层作用域的this值，因此不受上述规则影响。

基本上就这些。掌握调用方式如何影响this，就能准确预测上下文。不复杂但容易忽略细节。

以上就是This绑定_JS上下文解析的详细内容，更多请关注php中文网其它相关文章！