JavaScript中 this 的绑定指向规则

JavaScript中的this是一个非常重要的概念。对于初学者来说，经常会困惑它的绑定指向规则。在本篇攻略中，我们将对JavaScript中this的绑定规则进行详细讲解，并提供两个示例以帮助读者更好地理解。

一、什么是this

在JavaScript中，this是一个关键字，用于引用当前函数的执行上下文。尽管this看似简单，但它的绑定规则确实困扰了很多初学者。

二、this的绑定规则

this的绑定规则十分复杂，但可以总结如下：

1. 默认绑定：如果在一个函数中使用this，而且没有任何其他的绑定规则适用，那么this就会默认绑定到全局对象（在浏览器中为window，在Node.js中为global）。

function myFunction() {
  console.log(this);  // 全局对象
}

myFunction();

1. 隐式绑定：当函数作为一个对象的方法被调用时，this会被隐式绑定到该对象。

const myObject = {
  myMethod: function () {
    console.log(this);  // myObject对象
  }
};

myObject.myMethod();

1. 明确绑定：在明确绑定中，我们使用call()或apply()方法来指定this的绑定对象。

function myFunction() {
  console.log(this);  // myObject对象
}

const myObject = {
  myMethod: function () {
    myFunction.call(this);
  }
};

myObject.myMethod();

1. new绑定：在使用new关键字调用函数时，JavaScript会自动将函数中的this绑定到新创建的对象上。

function myFunction() {
  console.log(this);  // 新创建的对象
}

const myInstance = new myFunction();

三、示例说明

为了更好地理解this的绑定规则，我们提供以下两个示例。注意，这里的代码都是经过简化和修改以便更好地理解。

1. 示例一

const myObject = {
  myMethod: function () {
    console.log(this);  // myObject对象
  }
};

const myFunction = myObject.myMethod;
myFunction();

在这个示例中，我们使用myObject对象的myMethod方法来定义一个函数myFunction。由于myFunction不是作为myObject的方法被调用，而是直接作为函数被调用，因此它的默认绑定规则会被应用，this会默认绑定到全局对象。因此，这个示例会在控制台输出全局对象。

2. 示例二

function myFunction(value) {
  this.value = value;
}

const myObject = {}
const myInstance = new myFunction('hello');

console.log(myInstance.value);  // 'hello'
console.log(myObject.value);    // undefined

在这个示例中，我们定义了一个构造函数myFunction。当使用new关键字创建一个myFunction实例时，JavaScript会将myFunction中的this隐式绑定到新创建的对象上。因此，在这个示例中，myInstance.value会输出'hello'，而myObject.value是未定义的。