JavaScript中的this、apply、call、bind新姿势🍊

JavaScript中的this

在JavaScript中，this是一个非常重要的概念，也是特别令人迷惑的。this是什么？首先记住this不是指向自身！this 就是一个指针，总是指向最后调用它的对象，即代表着它的直接调用者。

当一个函数被调用时，应该立马看()左边的部分。如果代码都那么简单，那么this的指向就很容易理解了。

JavaScript中的apply、call和bind方法

在JavaScript中，apply、call和bind方法是函数调用的三种特殊方式。这三种方法都可以改变函数的调用者，从而改变this的指向。

apply方法

apply方法接受两个参数：第一个参数是this的指向，第二个参数是一个数组，其中包含要传递给函数的参数。

function greet(name) {
  console.log(`Hello, ${name}!`);
}

const person = {
  name: 'John'
};

greet.apply(person, ['Jane']); // Hello, Jane!

call方法

call方法与apply方法非常相似，唯一区别在于call方法的参数是单个值，而不是数组。

function greet(name) {
  console.log(`Hello, ${name}!`);
}

const person = {
  name: 'John'
};

greet.call(person, 'Jane'); // Hello, Jane!

bind方法

bind方法与apply和call方法不同，bind方法不立即调用函数，而是返回一个新的函数。这个新的函数的this指向已经被绑定到了第一个参数，并且参数也已经被绑定到了后面的参数。

function greet(name) {
  console.log(`Hello, ${name}!`);
}

const person = {
  name: 'John'
};

const greetJohn = greet.bind(person);

greetJohn(); // Hello, John!

箭头函数

箭头函数是ES6中引入的一种新的函数语法。箭头函数没有自己的this，它的this总是指向其父函数的this。

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

person.greet(); // Hello, John!

总结

本文介绍了JavaScript中的this、apply、call、bind方法以及箭头函数。这些方法可以帮助我们改变函数的调用者，从而改变this的指向。箭头函数没有自己的this，它的this总是指向其父函数的this。