17370845950

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立即执行并临时绑定。

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,就能准确预测上下文。不复杂但容易忽略细节。