JavaScript系列02--this关键字实现与理解，进阶代码规范！

2024-01-14 04:43:48

1. this函数执行上下文

在函数被调用时，会创建一个执行上下文，这个执行上下文包含函数被调用时的相关信息，包括调用栈、函数调用方式、传入的参数等。this就是执行上下文中记录的一个属性，会在函数执行过程中被用到。当函数引用上下文对象时，隐式绑定规则会将函数调用中的this绑定到上下文对象。注意，this值是动态绑定的，这意味着它可以在函数执行过程中改变。

2. 隐式绑定

隐式绑定是this最常用的绑定方式。在隐式绑定中，this值由函数的调用方式决定。如果函数作为对象的方法被调用，那么this值就是这个对象。例如：

function Person(name) {
  this.name = name;
}

Person.prototype.greet = function() {
  console.log(`Hello, my name is ${this.name}`);
};

const person = new Person('John');
person.greet(); // 输出：Hello, my name is John

在上面的例子中，greet()方法作为person对象的方法被调用，所以this值就是person对象。因此，console.log()语句会输出Hello, my name is John。

3. 显式绑定

显式绑定是指通过使用call()、apply()或bind()方法来明确指定this值。这三种方法都接受两个参数：第一个参数是this值，第二个参数是函数参数列表。例如：

function greet() {
  console.log(`Hello, my name is ${this.name}`);
}

const person = {
  name: 'John'
};

greet.call(person); // 输出：Hello, my name is John
greet.apply(person); // 输出：Hello, my name is John
const boundGreet = greet.bind(person);
boundGreet(); // 输出：Hello, my name is John

在上面的例子中，greet()函数没有作为任何对象的属性被调用，所以如果直接调用，this值将是undefined。但是，通过使用call()、apply()或bind()方法，我们可以显式地将this值指定为person对象。因此，console.log()语句都会输出Hello, my name is John。