揭秘JavaScript中的this对象，拨开迷雾见晴空

2023-12-17 19:38:38

this是JavaScript中一个非常重要的概念，它可以帮助你访问函数中的对象。然而，this在JavaScript中的表现也有一些细微的不同，在严格模式和非严格模式之下也会有一些差别。绝大多数情况下，this的指向由函数的调用方式决定。它不能被赋值，并且每次函数调用，它也有可能会不同。ES5引入了bind方法来设置函数的this，这让this的用法更加灵活。

this的指向

this的指向由函数的调用方式决定。有以下几种常见的调用方式：

作为对象的方法调用

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

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

person.greet(); // 输出: Hello, my name is John.

作为独立函数调用

当一个函数作为独立函数被调用时，this指向window对象。例如：

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

greet(); // 输出: Hello, my name is undefined.

使用call()、apply()或bind()方法调用

这三种方法允许你显式地设置函数的this。例如：

const person = {
  name: 'John'
};

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

greet.call(person); // 输出: Hello, my name is John.
greet.apply(person); // 输出: Hello, my name is John.
greet.bind(person)(); // 输出: Hello, my name is John.

严格模式下的this

在严格模式下，this的指向更加严格。当一个函数在严格模式下被调用时，如果this没有被显式地设置，那么它将指向undefined。例如：

"use strict";

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

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

非严格模式下的this

在非严格模式下，this的指向更加宽松。当一个函数在非严格模式下被调用时，如果this没有被显式地设置，那么它将指向window对象。例如：

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

greet(); // 输出: Hello, my name is undefined.

bind方法

ES5引入了bind方法，它允许你设置函数的this。bind方法返回一个新的函数，该函数的this被绑定到第一个参数。例如：

const person = {
  name: 'John'
};

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

const boundGreet = greet.bind(person);

boundGreet(); // 输出: Hello, my name is John.