通过实例了解 javascript中的箭头函数

前端js学习过程中,对js箭头函数this绑定机制产生了较大疑问.主要是对于:

1. 箭头函数中this绑定到了谁?
2. 普通函数在内含异步函数时,为何会出现this指针跟丢,进而导致this.data报错:undined的现象

前导: 箭头函数基本知识

1.箭头函数相当于匿名函数，并且简化了函数定义。箭头函数有两种格式，一种像上面的，只包含一个表达式，连{ … }和return都省略掉了。还有一种可以包含多条语句，这时候就不能省略{ … }和return：
2. 箭头=>前面是形参，箭头后面是函数体，函数匿名
如果参数不是一个，就需要用括号()括起来：
如果要返回一个对象，就要注意，如果是单表达式，这么写的话会报错：
x => { foo: x }应该改为
x => ({ foo: x })
3.(this函数) 箭头函数看上去是匿名函数的一种简写，但实际上，箭头函数和匿名函数有个明显的区别：箭头函数内部的this是词法作用域，由上下文确定
现在，箭头函数完全修复了this的指向，this总是指向词法作用域，也就是外层调用者obj
参考:javascript中的箭头函数

华点:

现在，箭头函数完全修复了this的指向，this总是指向词法作用域，也就是外层调用者obj
牢记这句话:箭头函数的this指正总是指向语法作用域!这点后面的图片中,有文字注释,会结合实例解释它的意思。

实例1：：

实例二：

来源：
JavaScript箭头函数与普通函数的区别

视频的核心实际上就是上述两张图，我的理解已在图中文字标注出来