手写函数二：理解JavaScript的this关键字

2023-12-23 18:45:31

this的本质

JavaScript中的this关键字是一个特殊的变量，它始终指向当前执行代码的上下文对象。上下文对象可以是全局对象、函数对象、对象实例等。this关键字在函数中使用时，它指向的是调用该函数的对象。如果函数不是作为对象的方法调用，则this指向全局对象。

this关键字的绑定机制

JavaScript中this关键字的绑定机制分为四种：静态绑定、隐式绑定、显式绑定和默认绑定。

静态绑定： 在函数定义时，this就指向了它的所属对象。静态绑定也称为硬绑定，它是一种最简单的绑定方式。
隐式绑定： 当函数作为对象的方法调用时，this指向该对象。隐式绑定也称为软绑定，它是一种最常用的绑定方式。
显式绑定： 使用call()、apply()或bind()方法可以显式地将this绑定到某个对象。显式绑定也称为硬绑定，它可以覆盖隐式绑定和默认绑定。
默认绑定： 如果函数不是作为对象的方法调用，也不是通过call()、apply()或bind()方法显式绑定，则this指向全局对象。

this关键字的作用域规则

JavaScript中this关键字的作用域规则与函数的作用域规则相同。也就是说，this关键字的作用域是函数的作用域。在函数内部，this关键字只能访问函数内部的变量和函数，而不能访问函数外部的变量和函数。

this关键字的使用技巧

在JavaScript中使用this关键字时，需要注意以下几点：

明确this的指向： 在使用this关键字之前，应明确this指向的是哪个对象。这可以通过静态绑定、隐式绑定、显式绑定或默认绑定来实现。
合理使用this 不要滥用this关键字。如果this关键字指向的对象不合适，可能会导致代码难以理解和维护。
注意this关键字的作用域： this关键字的作用域是函数的作用域。在函数内部，this关键字只能访问函数内部的变量和函数，而不能访问函数外部的变量和函数。

示例代码

// 静态绑定
function Person(name) {
  this.name = name;
}

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

const person1 = new Person('John');
person1.sayHello(); // Hello, my name is John.

// 隐式绑定
const object = {
  name: 'John',
  sayHello: function() {
    console.log(`Hello, my name is ${this.name}.`);
  }
};

object.sayHello(); // Hello, my name is John.

// 显式绑定
const sayHello = function() {
  console.log(`Hello, my name is ${this.name}.`);
};

const person2 = {
  name: 'John'
};

sayHello.call(person2); // Hello, my name is John.

// 默认绑定
const sayHello = function() {
  console.log(`Hello, my name is ${this.name}.`);
};

sayHello(); // Hello, my name is undefined.