js中的this，理解起来很容易，为什么还是难以精通？

2023-10-28 21:36:21

前言

在JavaScript中，this是一个非常重要的概念，也是一个很容易混淆的概念。this的指向会随着函数的执行环境而改变，这使得它在不同的情况下可能指向不同的对象。

`this`的指向

在JavaScript中，this的指向主要取决于函数的执行环境，即函数被调用的方式。有四种常见的方式可以调用函数：

作为对象的方法调用

const person = {
  name: 'John Doe',
  greet: function() {
    console.log(`Hello, my name is ${this.name}.`);
  },
};

person.greet(); // Hello, my name is John Doe.

在这种情况下，this指向调用该方法的对象，即person对象。

作为函数调用

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

greet(); // TypeError: Cannot read property 'name' of undefined

在这种情况下，this指向undefined，因为函数不是作为对象的方法调用的。

作为构造函数调用

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

const person = new Person('John Doe');

console.log(person.name); // John Doe

在这种情况下，this指向新创建的对象，即person对象。

使用箭头函数调用

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

greet(); // TypeError: Cannot read property 'name' of undefined

在这种情况下，this指向undefined，因为箭头函数没有自己的this值。

改变`this`的指向

在某些情况下，我们需要改变this的指向。有以下几种方法可以改变this的指向：

使用bind()方法

const person = {
  name: 'John Doe',
  greet: function() {
    console.log(`Hello, my name is ${this.name}.`);
  },
};

const greet = person.greet.bind(person);

greet(); // Hello, my name is John Doe.

bind()方法可以创建一个新的函数，该函数的this值被绑定到指定的对象。

使用call()方法

const person = {
  name: 'John Doe',
  greet: function() {
    console.log(`Hello, my name is ${this.name}.`);
  },
};

greet.call(person); // Hello, my name is John Doe.

call()方法可以将一个函数应用于指定的对象，并设置该函数的this值。

使用apply()方法

const person = {
  name: 'John Doe',
  greet: function() {
    console.log(`Hello, my name is ${this.name}.`);
  },
};

greet.apply(person); // Hello, my name is John Doe.