vue小记——this(2)

在Vue的方法中使用普通函数作为回调函数，那么在该回调函数中，this将不会指向Vue实例，而是指向全局对象（在浏览器中是window）。

错误 ：

export default {  
  data() {  
    return {  
      message: 'Hello Vue!'  
    };  
  },  
  methods: {  
    someAsyncMethod() {  
      setTimeout(function() {  
        // 在这里，`this` 指向全局对象（通常是 window）  
        console.log(this.message); // undefined，因为 this 不再指向 Vue 实例  
      }, 1000);  
    }  
  }  
}

因为 setTimeout 是一个全局函数，当它的回调函数被执行时，它是在全局作用域中运行的，而不是在 Vue 实例的作用域中。因此，除非你显式地绑定 this（如使用 bind 方法），否则 this 将会指向全局对象。

为了解决这个问题，通常有两种方法：

使用箭头函数：

export default {  
  data() {  
    return {  
      message: 'Hello Vue!'  
    };  
  },  
  methods: {  
    someMethod() {  
      setTimeout(() => {  
        // 在这里，`this` 指向 Vue 实例  
        this.message = 'Updated message';  
      }, 1000);  
    }  
  }  
}

手动绑定 this 

export default {  
  data() {  
    return {  
      message: 'Hello Vue!'  
    };  
  },  
  methods: {  
    someMethod() {  
      setTimeout(function() {  
        // 在这里，`this` 指向 Vue 实例  
        this.message = 'Updated message';  
      }.bind(this), 1000);  
    }  
  }  
}

原生 JavaScript 中，如果需要回调函数中的 this 指向外部对象或闭包中的变量，那么使用箭头函数可能更合适。但如果不需要这样的绑定，或者希望 this 指向调用回调函数时的上下文（如 DOM 元素），那么使用普通函数可能更合适。

// 原生 JavaScript 中的回调函数示例  
const element = document.getElementById('myElement');  
  
// 使用普通函数，`this` 指向 element  
element.addEventListener('click', function() {  
  console.log(this); // 输出 element  
});  
  
// 使用箭头函数，`this` 指向定义时的上下文（通常是外部对象或全局对象）  
const myObject = {  
  message: 'Hello World!'  
};  
  
// 如果我们希望箭头函数内部的 `this` 指向 myObject，那么可以这样做  
element.addEventListener('click', () => {  
  console.log(this.message); // 输出 "Hello World!"  
});  
  
// 如果我们希望箭头函数内部的 `this` 指向元素本身（就像普通函数一样），  
// 我们需要手动绑定，但箭头函数在这里没有优势  
element.addEventListener('click', (() => {  
  console.log(this); // 输出 element  
}).bind(element));