原生与Vue中的this深度解析，一文消除困惑

2023-10-28 23:07:24

作为JavaScript语言中的核心概念，this经常让人迷惑。它是一个指代当前执行代码的上下文对象。在原生JavaScript和Vue.js中，this的行为可能有所不同，因此理解其差异至关重要。

##原生JavaScript中的this

在原生JavaScript中，this的值由调用函数的方式决定。当函数作为对象的方法调用时，this指向该对象。例如：

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

person.greet(); // 输出: Hello, my name is John

在这种情况下，this指向person对象，因为greet方法是作为person对象的方法调用的。但是，如果我们直接调用greet函数，情况就会有所不同：

greet(); // 输出: undefined

这是因为greet函数没有作为对象的方法调用，因此this的值是undefined。

##Vue.js中的this

在Vue.js中，this的值由当前组件的实例决定。组件的实例是一个对象，它包含了组件的数据、方法和生命周期钩子。this指向组件的实例，可以使用它来访问组件的数据和方法。例如：

Vue.component("my-component", {
  data() {
    return {
      message: "Hello, world!"
    };
  },
  methods: {
    greet() {
      console.log(this.message); // 输出: Hello, world!
    }
  }
});