ES6 中新增了箭头函数这种语法, 箭头函数以其简洁性和方便获取 this 的特性, 接下来通过本文给大家分享 ES6 箭头函数中的 this, 写的十分的全面细致, 具有一定的参考价值, 对此有需要的朋友可以参考学习下. 如有不足之处, 欢迎批评指正.
简要介绍: 箭头函数中的 this, 指向与一般 function 定义的函数不同, 箭头函数 this 的定义: 箭头函数中的 this 是在定义函数的时候绑定, 而不是在执行函数的时候绑定.
(1)一般函数 this 指向在执行是绑定 当运行 obj.say()时候, this 指向的是 obj 这个对象.
- var x=11;
- var obj={
- x:22,
- say:function(){
- console.log(this.x)
- }
- }
- obj.say();
- //console.log 输出的是 22
(2)所谓的定义时候绑定, 就是 this 是继承自父执行上下文!! 中的 this, 比如这里的箭头函数中的 this.x, 箭头函数本身与 say 平级以 key:value 的形式, 也就是箭头函数本身所在的对象为 obj, 而 obj 的父执行上下文就是 Windows, 因此这里的 this.x 实际上表示的是 Windows.x, 因此输出的是 11.
- var x=11;
- var obj={
- x:22,
- say:()=>{
- console.log(this.x);
- }
- }
- obj.say();
- // 输出的值为 11
类似的还有:
- (3)
- var a=11
- function test1(){
- this.a=22;
- let b=function(){
- console.log(this.a);
- };
- b();
- }
- var x=new test1();
- // 欢迎加入前端全栈开发交流圈一起吹水聊天学习交流: 864305860
输出 11
箭头函数情况:
- var a=11;
- function test2(){
- this.a=22;
- let b=()=>{console.log(this.a)}
- b();
- }
- var x=new test2();
- // 输出 22
- // 欢迎加入前端全栈开发交流圈一起吹水聊天学习交流: 864305860
很奇怪对不对, 我是这样理解的, ES6 中定义的时候绑定 this 的具体含义, 应该继承的是父执行上下文里面的 this, 切忌是父执行上下文!!! 这样就很多箭头函数中的指向不明确就迎刃而解了.
注意: 简单对象 (非函数) 是没有执行上下文的!
深入理解箭头函数中的 this
箭头函数中, this 指向的固定化, 并不是因为箭头函数内部有绑定 this 的机制, 实际原因是箭头函数根本没有自己的 this, 导致内部的 this 就是外层代码块的 this. 正是因为它没有 this, 所以也就不能用作构造函数.
我们可以来模拟 ES5 中的箭头函数转化:
- // ES6
- function foo() {
- setTimeout(() => {
- console.log('id:', this.id);
- }, 100);
- }
- // ES5
- function foo() {
- var _this = this;
- setTimeout(function () {
- console.log('id:', _this.id);
- }, 100);
- }
- // 欢迎加入前端全栈开发交流圈一起吹水聊天学习交流: 864305860
所以在定义对象的时候, 定义对象属性, 里面的 this 指向的一般是全局, 或者这个对象所在的那个环境中的 this.
结语
感谢您的观看, 如有不足之处, 欢迎批评指正.
来源: http://www.qdfuns.com/article/51117/ea371d4b6c5bfa4b73d4cda42bd6a91e.html