洞悉函数this绑定的奥妙，揭秘调用方法的决定性影响

前端

2024-01-06 13:21:46

函数this绑定的基本概念

每个函数的this值是在调用时被绑定的，完全取决于函数的调用位置（也就是函数的调用方法）。this值可以是全局对象、一个对象、一个类或者undefined。

函数this绑定的不同调用方法

函数this绑定的不同调用方法主要包括：

隐式绑定：当函数作为对象的方法被调用时，它的this值被隐式地绑定到该对象。
显式绑定：当函数使用call()、apply()或bind()方法被调用时，它的this值可以被显式地绑定到一个指定的对象。
new绑定：当函数使用new被调用时，它的this值被绑定到一个新创建的对象。
箭头函数绑定：箭头函数的this值总是绑定到它所在作用域的this值。

函数this绑定的示例代码

为了更好地理解函数this绑定的概念，我们来看一些示例代码：

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

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

在这个示例中，greet()方法被隐式地绑定到person对象，因此this值等于person对象。

// 显式绑定
const person = {
  name: 'John Doe'
};

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

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

在这个示例中，greet()方法使用call()方法被显式地绑定到person对象，因此this值等于person对象。

// new绑定
function Person(name) {
  this.name = name;
}

const person = new Person('John Doe');

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

在这个示例中，Person()函数使用new关键字被调用，因此this值被绑定到一个新创建的Person对象。

// 箭头函数绑定
const person = {
  name: 'John Doe',
  greet: () => {
    console.log(`Hello, my name is ${this.name}.`);
  }
};

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

在这个示例中，greet()方法是一个箭头函数，因此它的this值总是绑定到它所在作用域的this值，也就是person对象。但是，由于箭头函数没有自己的this值，因此this值等于undefined。