this在Es5和Es6的区别

本文主要是介绍this在Es5和Es6的区别，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！

在ES5和ES6中，this的指向有所不同。

在ES5中，this的默认指向是全局对象（在浏览器环境中通常是window对象）。在函数中，this的指向取决于函数的调用方式。例如，在方法调用中，this指向调用该方法的对象；在构造函数中，this指向构造出来的新对象；在定时器或事件处理函数中，this指向全局对象。此外，在ES5中，如果在回调函数中使用this，通常会使用var that = this来保存当前的this值。

而在ES6中，this的默认指向发生了变化。在ES6的类（Class）中，以及Vue等框架的实例方法中，this的默认指向变成了Vue实例（或者类的实例）。不过，在ES6的箭头函数中，this的指向则是由定义时所在的对象决定的，而不是由函数的调用者决定。这意味着箭头函数中的this是静态的，不会因为函数的调用方式而改变。

在ES5和ES6中，this的使用有较大差异，主要体现在以下几个方面：

在ES5中，this的默认指向是全局对象（如window）。例如，在浏览器环境中，如果在代码中直接使用console.log(this)，将会输出全局对象。在函数中，this的指向取决于函数的调用方式。例如，在方法调用中，this指向调用该方法的对象；在构造函数中，this指向构造出来的新对象。如果在回调函数中使用this，通常会使用var that = this来保存当前的this值。

在ES6中

举例说明：

假设我们有一个Vue组件，该组件包含一个方法：

javascript
复制
methods: {
  someMethod() {
    console.log(this); // 在ES5中，this指向全局对象；在ES6中，this指向Vue实例
  }
}

在ES5中，如果在一个非严格模式的全局环境中直接调用这个方法（如someMethod()），this将指向全局对象（如window）。如果在一个严格模式的全局环境中直接调用这个方法（如"use strict"; someMethod()），this将是undefined。

在ES6中，如果在一个Vue组件的方法中调用这个方法（如通过组件实例调用），由于ES6的默认行为是将this指向Vue实例，因此this将指向该Vue实例。

需要注意的是，由于箭头函数中的this是静态的，因此在使用箭头函数作为回调函数时需要注意其行为。例如：

javascript
复制
someMethod: function() {
  setTimeout(() => {
    console.log(this); // 在ES5中，this指向全局对象；在ES6中，this仍然是箭头函数被定义时的上下文中的对象
  }, 1000);
}

在这个例子中，由于使用了箭头函数作为回调函数，即使在ES6中，箭头函数中的this也不会自动绑定到Vue实例。因此，在使用箭头函数作为回调函数时，需要特别注意其行为和上下文。

 

 

这篇关于this在Es5和Es6的区别的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！

---