返回

JavaScript中this的指向,一个陌生而熟悉的老朋友

前端







JavaScript 中的 this 指向,就像是一个贯穿始终的老朋友,它在不同的场景下,有着不同的指向。理解 this 指向,是理解 JavaScript 程序运行机制的关键。

这道菜的主料是 JavaScript 中的 this ,它决定了函数中 this 的指向,这将影响函数的行为和访问到的数据。这道菜的配料是 this 指向的四种情况,它们分别是:默认指向、隐式指向、显示指向和 new 指向。

**默认指向** 

当一个函数作为普通函数调用时,this 指向全局对象,在浏览器中,this 指向 window 对象,在 Node.js 中,this 指向 global 对象。

```javascript
function sayHello() {
  console.log(this); // window 或 global
}

sayHello();

隐式指向

当一个函数作为对象的方法调用时,this 指向该对象。

const person = {
  name: 'John',
  sayHello: function() {
    console.log(this.name); // John
  }
};

person.sayHello();

显示指向

可以使用 call()、apply() 或 bind() 方法来显示地设置函数的 this 指向。

const person = {
  name: 'John'
};

const sayHello = function() {
  console.log(this.name);
};

sayHello.call(person); // John
sayHello.apply(person); // John
const boundSayHello = sayHello.bind(person);
boundSayHello(); // John

new 指向

当一个函数使用 new 关键字调用时,this 指向一个新创建的对象,该对象是该函数的实例。

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

const person = new Person('John');

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

最后,我们用实际的代码演示如何烹饪这道菜,体会 this 指向的美味。

// 创建一个对象
const person = {
  name: 'John',
  sayHello: function() {
    console.log(this.name); // John
  }
};

// 调用对象的 sayHello 方法
person.sayHello();

// 使用 call() 方法显示地设置 sayHello 方法的 this 指向
sayHello.call(person); // John

// 使用 apply() 方法显示地设置 sayHello 方法的 this 指向
sayHello.apply(person); // John

// 使用 bind() 方法显示地设置 sayHello 方法的 this 指向
const boundSayHello = sayHello.bind(person);
boundSayHello(); // John

// 使用 new 关键字创建一个 Person 对象
const person = new Person('John');

// 访问 Person 对象的 name 属性
console.log(person.name); // John

通过这道菜,我们体会到了 JavaScript 中 this 指向的魅力。掌握 this 指向,可以帮助我们更好地理解 JavaScript 程序的运行机制,并编写出更健壮的代码。