this浅谈之窥斑见豹

前端

2023-10-31 21:07:56

前言

在JavaScript中，this是一个非常重要的概念，它经常出现在代码中，也经常引起混淆。本文将深入浅出地探讨this的本质及其在不同场景下的用法，帮助读者更好地理解和掌握this。

this的本质

this是一个特殊的，它指向当前执行代码的对象。在JavaScript中，this的值由调用该代码的方式决定。在不同的场景下，this的值可能是不同的。

this的用法

1. 方法中的this

当在一个对象的方法中使用this时，this的值就是该对象本身。例如：

const person = {
  name: 'John',
  age: 30,
  greet: function() {
    console.log(`Hello, my name is ${this.name} and I am ${this.age} years old.`);
  }
};

person.greet(); // Hello, my name is John and I am 30 years old.

在这个例子中，当我们调用person对象的greet方法时，this的值就是person对象本身，因此我们可以使用this.name和this.age来访问person对象的属性。

2. 函数中的this

当在一个函数中使用this时，this的值就取决于该函数的调用方式。

如果该函数作为对象的方法被调用，那么this的值就是该对象本身。
如果该函数作为独立的函数被调用，那么this的值就是global对象。

例如：

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

const person = {
  name: 'John'
};

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

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

在这个例子中，当我们调用person对象的greet方法时，this的值就是person对象本身，因此我们可以使用this.name来访问person对象的属性。

当我们直接调用greet函数时，this的值就是global对象，因此this.name的值是undefined。

3. 构造函数中的this

当在一个构造函数中使用this时，this的值就是即将创建的新对象。例如：

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

const person = new Person('John', 30);

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

在这个例子中，当我们调用Person构造函数时，this的值就是即将创建的新person对象，因此我们可以使用this.name和this.age来设置person对象的属性。

this的特殊情况

1. 箭头函数中的this

箭头函数是没有this的，因为箭头函数是作为匿名函数来定义的，所以它没有自己的this值。如果在一个箭头函数中使用this，那么this的值就是该箭头函数所在的上下文中this的值。

例如：

const person = {
  name: 'John',
  age: 30,
  greet: () => {
    console.log(`Hello, my name is ${this.name} and I am ${this.age} years old.`);
  }
};

person.greet(); // Hello, my name is undefined and I am undefined years old.

在这个例子中，greet方法是一个箭头函数，因此它没有自己的this值，所以当我们调用person对象的greet方法时，this的值就是global对象，因此this.name和this.age的值都是undefined。

2. bind、call和apply

bind、call和apply都是用来改变函数的this值的方法。

bind方法可以创建一个新的函数，该函数的this值被固定为指定的值。
call方法可以立即调用一个函数，并指定该函数的this值。
apply方法可以立即调用一个函数，并指定该函数的this值和参数。

例如：

const person = {
  name: 'John',
  age: 30
};

function greet() {
  console.log(`Hello, my name is ${this.name} and I am ${this.age} years old.`);
}

const boundGreet = greet.bind(person);

boundGreet(); // Hello, my name is John and I am 30 years old.

greet.call(person); // Hello, my name is John and I am 30 years old.

greet.apply(person); // Hello, my name is John and I am 30 years old.

在这个例子中，我们使用bind、call和apply来改变greet函数的this值，使之指向person对象，因此当我们调用boundGreet、greet.call(person)和greet.apply(person)时，this的值都是person对象，因此我们可以使用this.name和this.age来访问person对象的属性。