深入解析Vue forEach循环中this指向的坑与解决方案

人亦已歌

深入解析Vue forEach循环中this指向的坑与解决方案

vue 使用forEach的过程中，关于 this 的指向问题。

2. function PhpernoteChart(data) {
3. this.data = data;
4. this.width = 0;
5. this.data.list.forEach(function (item) {
6. if (this.width > parseInt(item.x)) {
7. this.width = parseInt(item.x);
8. }
9. });
10. }
11. var a = new PhpernoteChart(data);

复制代码

每一个用function声明的函数在调用时都会在函数内创建自己的this。this一般是函数所操作的对象。如果没有操作的对象。this在"use strict";严格模式下是 undefined，非严格模式下是 window。
也就是说，function声明的函数总是有自己的this。从而遮盖外层作用域中的this。
如果用es6的箭头函数()=>{}就没有自己的this。在箭头函数()=>{}中访问this，是访问外层作用域中的this

2. function PhpernoteChart(data) {
3. this.data = data;
4. this.width = 0;
5. this.data.list.forEach(item => {
6. if (this.width > parseInt(item.x)) {
7. this.width = parseInt(item.x);
8. }
9. });
10. }

复制代码