JavaScript中this，bind，call，apply的使用详解

JavaScript中，this是一个很重要的概念，也是一个对初学者和学习其他语言的人来说晦涩难懂的概念。在JavaScript中，this是一个对象的引用。this指向的对象可以是基于全局的，在对象上的，或者在构造函数中隐式更改的，当然也可以根据Function原型方法的bind，call，apply来修改this的指向。

this

this在JavaScript中是一个很重要的概念，也是一个对初学者和学习其他语言的人来说晦涩难懂的概念。在JavaScript中，this是一个对象的引用。this指向的对象可以是基于全局的，在对象上的，或者在构造函数中隐式更改的。

• 基于全局的this： 当你在一个函数中没有使用任何对象来调用它时，this将指向全局对象。在浏览器中，全局对象是window对象。在Node.js中，全局对象是global对象。
• 对象上的this： 当你在一个对象的方法中调用一个函数时，this将指向该对象。例如，以下代码中，当我们调用person.greet()时，this将指向person对象。

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

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

• 构造函数中的this： 当你使用new调用一个构造函数时，this将指向新创建的对象。例如，以下代码中，当我们调用new Person()时，this将指向新创建的person对象。

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

const person = new Person('John');

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

bind

bind()方法创建一个新的函数，该函数在调用时将this关键字设置为指定的值。这意味着你可以将一个函数绑定到一个对象，即使该函数不是该对象的方法。例如，以下代码中，我们将greet()函数绑定到person对象，并创建一个新的函数boundGreet()。当我们调用boundGreet()时，this将指向person对象。

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!

call

call()方法调用一个函数，并将this关键字显式地设置为指定的值。这与bind()方法类似，但call()方法立即调用函数，而bind()方法返回一个新的函数。例如，以下代码中，我们使用call()方法将greet()函数绑定到person对象，并立即调用该函数。

const person = {
  name: 'John'
};

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

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

apply

apply()方法与call()方法类似，但它接受一个数组作为第二个参数，该数组包含要传递给函数的参数。例如，以下代码中，我们使用apply()方法将greet()函数绑定到person对象，并立即调用该函数，并将['John']数组作为参数传递给该函数。

const person = {
  name: 'John'
};

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

greet.apply(person, ['John']); // Hello, my name is John!

总结

this、bind、call和apply都是JavaScript中的重要方法，可以用来控制函数的this值。this值决定了函数内部this关键字指向的对象，从而影响函数的行为。bind、call和apply都可以用来改变this值，但它们的使用场景略有不同。

• bind()方法： 创建一个新的函数，该函数在调用时将this关键字设置为指定的值。
• call()方法： 调用一个函数，并将this关键字显式地设置为指定的值。
• apply()方法： 调用一个函数，并将this关键字显式地设置为指定的值，并立即调用该函数，并将一个数组作为第二个参数，该数组包含要传递给函数的参数。