JS中的this指向

在 JavaScript 中，this 关键字的值取决于函数的调用方式，以下是一些常见的情况：

1.全局上下文：在全局上下文（非函数中或者严格模式下），this 指向全局对象。在浏览器中，全局对象是 window。

console.log(this);  // 输出：Window

2.函数调用：当一个函数被作为普通函数调用时（即不是作为对象的方法、构造函数或者 call / apply / bind 调用），this 指向全局对象（非严格模式）或者 undefined（严格模式）。

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

myFunc();  // 输出：Window（非严格模式）或 undefined（严格模式）

3.方法调用：当一个函数被作为对象的方法调用时，this 指向调用该方法的对象(也就是myObj)

let myObj = {
  name: 'Alice',
  greet: function() {
    console.log(`Hello, ${this.name}`);
  }
};

myObj.greet();  // 输出：Hello, Alice

4.构造函数：当一个函数被作为构造函数调用（使用 new 关键字）时，this 指向新创建的对象。

function MyConstructor() {
  this.name = 'Alice';
}

let myObj = new MyConstructor();
console.log(myObj.name);  // 输出：Alice

5.call / apply / bind 调用：当一个函数通过 call、apply 或 bind 方法调用时，this 指向传入这些方法的第一个参数。

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

let myObj = { name: 'Alice' };

greet.call(myObj);  // 输出：Hello, Alice

6.箭头函数：箭头函数没有自己的 this，它的 this 值继承自包含它的函数或全局作用域。

let myObj = {
  name: 'Alice',
  greet: function() {
    setTimeout(() => {
      console.log(`Hello, ${this.name}`);
    }, 1000);
  }
};

myObj.greet();  // 输出：Hello, Alice

在 Vue 2 中，this 在方法和生命周期钩子中通常指向 Vue 实例。

例如，如果你在 Vue 实例的方法或生命周期钩子中使用 this，它将指向该 Vue 实例：

new Vue({
  data: {
    message: 'Hello Vue!'
  },
  created: function () {
    console.log(this.message) // 输出：Hello Vue!
  },
  methods: {
    greet: function () {
      console.log(this.message) // 输出：Hello Vue!
    }
  }
})

然而，在 Vue 3 的 Composition API 中，this 不再指向 Vue 实例。这是因为 Composition API 使用 setup 函数，这是一个普通的 JavaScript 函数，不是 Vue 实例的方法，所以 this 不会指向 Vue 实例。因此，在 Vue 3 中，你应该避免在 setup 函数和 Composition API 中使用 this。