聊聊javascript中令人头大的this

在JavaScript中，this是一个非常重要的关键字，可以用来访问对象中的属性和方法。它指向当前函数的执行上下文。由于 JavaScript 可以是面向对象的，也可以是基于原型的语言，所以 this 的含义有时会有些复杂，它的行为有时候会让人感到困惑。

一、让人头痛的this

在JavaScript中，this的值取决于它在哪个上下文中被调用。上下文可以是全局对象、函数、对象等。下面我们来详细聊聊这些情况：

1. 全局上下文中的this

在全局上下文中，this指向全局对象。在浏览器环境中，这个全局对象是window对象。在Node.js环境中，这个全局对象是global对象。

console.log(this === window); // true

需要注意的是，虽然this指向全局对象，但是在严格模式下，this为undefined。此外，在函数内部，this的值取决于函数是如何被调用的。如果函数被作为对象的方法调用，那么this指向该对象。如果函数是作为普通函数调用，那么this指向全局对象。如果函数是作为构造函数调用，那么this指向新创建的对象。

2. 函数上下文中的this

在函数中，this的值取决于函数是如何被调用的。当一个函数被作为普通函数调用时，this指向全局对象。例如：

function myFunction() {
  console.log(this);
}

myFunction(); // 输出全局对象（window或global）

但是，当一个函数作为对象的方法调用时，this指向调用该方法的对象。例如：

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

myObject.myMethod(); // 输出myObject对象

3. 构造函数中的this

当一个函数被用作构造函数时，this指向新创建的对象。例如：

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

const person = new Person('张三');
console.log(person.name); // 输出 '张三'

4. 箭头函数中的this

箭头函数中的this与普通函数不同，它没有自己的执行上下文，而是与其所在的执行上下文共享同一个执行上下文。在箭头函数中，this指向函数定义时所在的上下文。例如：

const myObject = {
  myMethod: function() {
    const myArrowFunction = () => {
      console.log(this);
    }
    myArrowFunction();
  }
};

myObject.myMethod(); // 输出myObject对象

箭头函数在定义时会捕获其所在的执行上下文中的 this值。因此，箭头函数的执行上下文中的 this 值与定义它时所在的执行上下文中的 this 值相同，且无法通过 call()、apply()、bind()改变箭头函数中的 this 指向。

二、改变this的值

有时候，我们需要显式地改变this的值，这时就可以使用call()、apply()或bind()以及new操作符方法。

1. call()和apply()方法

call()和apply()方法可以用来改变函数中this的值，并立即调用该函数。两者的区别在于传参方式不同，call()方法传参以逗号分隔，apply()方法传参以数组形式。例如：

function myFunction(a, b) {
  console.log(this, a, b);
}

const myObject = {
  myProperty: 'Hello'
}

myFunction.call(myObject, 1, 2); // 输出myObject对象，1，2
myFunction.apply(myObject, [1, 2]); // 输出myObject对象，1，2

2. bind()方法

bind()方法可以用来改变函数中this的值，并返回一个新的函数，不会立即调用该函数。例如：

function myFunction(a, b) {
  console.log(this, a, b);
}

const myObject = {
  myProperty: 'Hello'
}

const boundFunction = myFunction.bind(myObject, 1, 2);
boundFunction(); // 输出myObject对象，1，2

3. new绑定

在JavaScript中，new操作符用于创建一个新的对象，并将构造函数中的this指向该新对象。new操作符执行以下操作：

1. 创建一个新的空对象
2. 将该空对象的原型指向构造函数的prototype属性
3. 将构造函数中的this指向该新对象
4. 执行构造函数中的代码，并给该新对象添加属性和方法
5. 返回该新对象

例如：

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

const person = new Person('张三');
console.log(person.name); // 输出 '张三'

在这个例子中，new操作创建了一个新的对象，并将构造函数Person中的this指向该新对象。在构造函数中，this.name = name将新对象的name属性设置为'张三'。最后，new操作返回该新对象，将其赋值给变量person。

new绑定是一种特殊的方式，它可以使this指向新创建的对象。在JavaScript中，new操作符是一种常用的创建新对象的方式，使用它能够方便地创建新的对象并初始化它们的属性和方法。

三、写在最后

JavaScript中的this关键字是非常重要的，它可以用来访问对象中的属性和方法。由于this的行为有时候会让人感到困惑，因此需要对它有一个全面而深入的理解。只有理解了this的行为，才能更好地使用它，写出更加高效和可读性强的JavaScript代码。