JavaScript中的函数调用方式及其对this的影响

翻滚的胖子
2023-06-20 10:18:18
JavaScript Java

在JavaScript中，函数是一等公民，它可以像其他类型的数据一样被传递、赋值和操作。函数的调用方式有多种，而不同的调用方式会对函数内部的this指向产生不同的影响。本文将详细介绍JavaScript中的函数调用方式及其对this的影响，以及如何使用apply、call和bind方法来改变函数内部的this指向。

一、函数调用方式

JavaScript中的函数调用方式包括以下四种：

作为函数调用
作为方法调用
通过构造函数调用
通过apply、call或bind调用

1. 作为函数调用

当函数作为普通函数调用时，函数中的this指向全局对象window。

function test() {
  console.log(this);
}
test(); // 输出：window

2. 作为方法调用

当函数作为对象的方法调用时，函数中的this指向该对象。

var obj = {
  name: 'Tom',
  sayName: function() {
    console.log(this.name);
  }
};
obj.sayName(); // 输出：Tom

3. 通过构造函数调用

当函数通过new关键字来创建对象时，函数中的this指向该新创建的对象。

function Person(name) {
  this.name = name;
}
var person = new Person('Tom');
console.log(person.name); // 输出：Tom

4. 通过apply、call或bind调用

apply、call和bind是三个用于改变函数内部this指向的方法。其中，apply和call可以立即执行函数，而bind方法会返回一个新的函数，并且可以在稍后调用。

apply和call的用法是类似的，只是传递参数的方式不同。apply方法接受一个包含参数的数组，而call方法接受多个参数列表。当使用apply或call调用函数时，函数中的this指向传递给它们的第一个参数。

function test() {
  console.log(this.name);
}
var obj1 = {
  name: 'Tom'
};
var obj2 = {
  name: 'Jerry'
};

// 使用apply调用函数
test.apply(obj1); // 输出：Tom
test.apply(obj2); // 输出：Jerry

// 使用call调用函数
test.call(obj1); // 输出：Tom
test.call(obj2); // 输出：Jerry

bind方法可以用于创建一个新的函数，并且可以在稍后调用。bind方法返回的新函数中的this指向它的第一个参数，而它的其他参数将作为原函数的参数传递。

function test(greeting) {
  console.log(greeting + '，' + this.name);
}
var obj1 = {
  name: 'Tom'
};
var obj2 = {
  name: 'Jerry'
};

// 使用bind创建新函数
var newTest1 = test.bind(obj1, 'Hello');
var newTest2 = test.bind(obj2, 'Hi');

newTest1(); // 输出：Hello，Tom
newTest2(); // 输出：Hi，Jerry