“揭秘JavaScript中的this：从死记硬背到彻底理解“

"this" 是一个关键字，用于表示当前正在执行代码的对象，通常是指调用当前方法或函数的对象。在 JavaScript 中，this 的值在运行时动态确定，取决于函数的调用方式和上下文，因此它可以指向不同的对象。

this 的行为取决于它所在的上下文。在全局作用域中使用 this 时，它会指向全局对象（在浏览器中是 window 对象，在 Node.js 中是 global 对象）。在函数内部使用 this 时，它的值取决于函数的调用方式。如果函数是作为对象的方法调用的，则 this 指向该对象。如果函数作为普通函数调用，则 this 指向全局对象。如果函数使用了 "strict" 模式，则在函数内部默认不会将 this 绑定到全局对象。

除了函数的上下文之外，this 的值还可以通过 JavaScript 的显示绑定方法（call、apply 和 bind）进行更改。这些方法可以显式地指定函数内的 this 值，而不依赖于函数的调用方式和上下文。

this的各种情况

在 JavaScript 中，this 可以指向不同的对象，根据使用场景不同，可以分为以下几种类型:

1. 全局对象：当 this 用在全局作用域中时，它将指向全局对象（在浏览器中是 window，Node.js 中是 global）。
2. 函数上下文对象：当函数被作为对象的方法调用时，this 将指向该对象。例如：

const obj = {
  name: "John",
  sayName() {
    console.log(this.name);
  }
};

obj.sayName();  // 输出 "John"

1. 构造函数上下文对象：当函数被用作构造函数时，this 将指向新创建的对象。

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

const person = new Person("John");
console.log(person.name);  // 输出 "John"

1. 显示绑定对象：通过 call、apply 或 bind 方法，可以显式地指定函数内部的 this 指向特定的对象。

function sayName() {
  console.log(this.name);
}

const obj1 = { name: "John" };
const obj2 = { name: "Mary" };

sayName.call(obj1);  // 输出 "John"
sayName.apply(obj2);  // 输出 "Mary"

const sayNameForObj1 = sayName.bind(obj1);
sayNameForObj1();  // 输出 "John"

1. 箭头函数上下文对象：箭头函数没有自己的 this 值，它会从定义它时所处的作用域中继承 this 值。

const obj = {
  name: "John",
  sayName: () => {
    console.log(this.name);
  }
};

obj.sayName();  // 输出 undefined

ChatGpt 写了这么多，感觉要是死记硬背的话挺难的，除开箭头函数外，其实改变 this 指向就2种方法，一种是new，一种是使用 call、apply 或 bind 方法改变。那么我们研究一下他们的实现，是不是就能找出this指向的原理呢

function myNew(constructor, ...args) {
  const obj = Object.create(constructor.prototype);
  const result = constructor.apply(obj, args);
  return (typeof result === 'object' && result !== null) ? result : obj;
}

这是 new 的简易实现，可以看出其实就是使用 apply 改变了 this 指向，那 apply 是怎么改变 this 指向的呢

Function.prototype.myApply = function(context, args) {
  context = context || window;
  context.fn = this;
  const result = context.fn(...args);
  delete context.fn;
  return result;
};

这是 apply 的简易实现，其实改变 this 指向就是在 const result = context.fn(...args)这一行起了作用，思考一下我们是为了实现将 this 改为 context，

context.fn = this 其实就是把函数挂到 context 上，然后调用函数 context.fn(...args)这样函数的this就指向了 context。所以就是一句话，谁调用函数，this指向谁。换句话说谁在 .前，谁是 this 。

练习题

const person1 = {
  name: 'Alice',
  greet: function() {
    const myMethod = function() {
      console.log('Hello, ' + this.name);
    };

    return myMethod;
  }
};

person1.greet()(); // 输出什么？如何更改以输出 'Hello, Alice'？

function getName(){
  console.log(this.name)
}
getName.bind({name:'a'}).bind({name:'b'})() // 输出什么？为什么？

function Person(name) {
  this.name = name;
  this.regularFunc = function () {
    return this.name;
  };
  this.arrowFn = () => {
    return this.name;
  };
  this.arrowFn2 = // ?
}

function getNames() {
  const names = ["Alice", "Bob", "Charlie"];
  const randomName = names[Math.floor(Math.random() * names.length)];
  return randomName;
}

const person1 = new Person(getNames());
const person2 = new Person("John");

// 补充 arrowFn2 实现以下效果
console.log(person1.arrowFn() === person1.arrowFn2()); // true
console.log(person1.arrowFn.call(person2) === person1.arrowFn2.call(person2)); // true