JavaScript中this的绑定规则详解

目前golang学习网上已经有很多关于文章的文章了，自己在初次阅读这些文章中，也见识到了很多学习思路；那么本文《JavaScript中this的绑定规则解析》，也希望能帮助到大家，如果阅读完后真的对你学习文章有帮助，欢迎动动手指，评论留言并分享~

this的指向由函数调用方式决定，分为四种绑定规则：1. 默认绑定中全局环境this指向window（严格模式为undefined）；2. 隐式绑定中对象方法的this指向调用它的对象；3. 显式绑定通过call、apply、bind手动指定this；4. new绑定中构造函数的this指向新创建的实例。优先级为new > 显式 > 隐式 > 默认。箭头函数无自身this，继承外层作用域的this值。

JavaScript中的this关键字指向函数执行时的上下文对象，它的值不是由函数定义的位置决定，而是由函数调用的方式决定。理解this的绑定规则，关键在于掌握四种绑定类型：默认绑定、隐式绑定、显式绑定和new绑定。

1. 默认绑定（Default Binding）

在全局环境中或普通函数调用中，this指向全局对象。浏览器环境下是window，Node.js中是global。

function sayHi() {
  console.log(this);
}
sayHi(); // 输出 window（浏览器环境）

严格模式下，this为undefined。

'use strict';
function sayHello() {
  console.log(this);
}
sayHello(); // 输出 undefined

2. 隐式绑定（Implicit Binding）

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

const person = {
  name: 'Alice',
  greet: function() {
    console.log('Hello, I am ' + this.name);
  }
};
person.greet(); // 输出 "Hello, I am Alice"

注意：如果将方法赋值给变量再调用，会丢失绑定。

const fn = person.greet;
fn(); // 输出 "Hello, I am undefined"（严格模式下this为undefined）

3. 显式绑定（Explicit Binding）

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

function introduce(age) {
  console.log(`I am ${this.name}, ${age} years old.`);
}

const user = { name: 'Bob' };

introduce.call(user, 25); // 使用call
introduce.apply(user, [30]); // 使用apply
const boundFn = introduce.bind(user); // 使用bind，返回新函数
boundFn(28); // 输出 "I am Bob, 28 years old."

4. new绑定（New Binding）

使用new操作符调用构造函数时，this指向新创建的实例对象。

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

new的过程会创建一个新对象，并将this绑定到这个对象上。

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

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

const obj = {
  name: 'Dana',
  normalFunc: function() { console.log(this.name); },
  arrowFunc: () => { console.log(this.name); }
};
obj.normalFunc(); // 输出 "Dana"
obj.arrowFunc(); // 输出 undefined（this来自外层作用域）

基本上就这些。掌握调用方式，就能判断this的指向。不复杂但容易忽略细节。

理论要掌握，实操不能落！以上关于《JavaScript中this的绑定规则详解》的详细介绍，大家都掌握了吧！如果想要继续提升自己的能力，那么就来关注golang学习网公众号吧！