• 技术文章 >web前端 >前端问答

    es6箭头方法中this的指向是什么

    青灯夜游青灯夜游2022-11-21 17:55:45原创142

    在es6中,箭头函数体内的this对象,就是定义该函数时所在的作用域指向的对象。箭头函数中this的指向就是上下文里对象this指向,偶尔没有上下文对象,this就指向window;即使是call、apply、bind等方法也不能改变箭头函数this的指向。

    大前端成长进阶课程:进入学习

    本教程操作环境:windows7系统、ECMAScript 6版、Dell G3电脑。

    箭头函数相信大家在日常开发中用到的地方非常之多,因为它很简洁,可读性强,但是它最大的好处,其实是解决了匿名函数的this指向问题,有利于封装回调函数。

    先来个总结:

    箭头函数体内的this对象,就是定义该函数时所在的作用域指向的对象,而不是使用时所在的作用域指向的对象。

    ES6箭头函数中this

    下面是普通函数的列子:

    var name = 'window'; // 其实是window.name = 'window'
    
    var A = {
       name: 'A',
       sayHello: function(){
          console.log(this.name)
       }
    }
    
    A.sayHello();// 输出A
    
    var B = {
      name: 'B'
    }
    
    A.sayHello.call(B);//输出B
    
    A.sayHello.call();//不传参数指向全局window对象,输出window.name也就是window

    从上面可以看到,sayHello这个方法是定义在A对象中的,当当我们使用call方法,把其指向B对象,最后输出了B;可以得出,sayHello的this只跟使用时的对象有关。

    改造一下:

    var name = 'window'; 
    var A = {
       name: 'A',
       sayHello: () => {
          console.log(this.name)
       }
    }
    A.sayHello();// 还是以为输出A ? 错啦,其实输出的是window

    我相信在这里,大部分同学都会出错,以为sayHello是绑定在A上的,但其实它绑定在window上的,那到底是为什么呢?

    一开始,我重点标注了“该函数所在的作用域指向的对象”,作用域是指函数内部,这里的箭头函数,也就是sayHello,所在的作用域其实是最外层的js环境,因为没有其他函数包裹;然后最外层的js环境指向的对象是winodw对象,所以这里的this指向的是window对象。

    那如何改造成永远绑定A呢:

    var name = 'window'; 
    
    var A = {
       name: 'A',
       sayHello: function(){
          var s = () => console.log(this.name)
          return s//返回箭头函数s
       }
    }
    
    var sayHello = A.sayHello();
    sayHello();// 输出A 
    
    var B = {
       name: 'B';
    }
    
    sayHello.call(B); //还是A
    sayHello.call(); //还是A

    OK,这样就做到了永远指向A对象了,我们再根据“该函数所在的作用域指向的对象”来分析一下:

    所以箭头函数s 中this就是指向A啦 ~~

    ----------------finish-------------

    最后是使用箭头函数其他几点需要注意的地方

    【推荐学习:javascript视频教程

    以上就是es6箭头方法中this的指向是什么的详细内容,更多请关注php中文网其它相关文章!

    声明:本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn核实处理。

    前端(VUE)零基础到就业课程:点击学习

    清晰的学习路线+老师随时辅导答疑

    自己动手写 PHP MVC 框架:点击学习

    快速了解MVC架构、了解框架底层运行原理

    专题推荐:箭头函数 javascript ES6
    上一篇:es6 if包裹的变量算块内吗 下一篇:自己动手写 PHP MVC 框架(40节精讲/巨细/新人进阶必看)

    相关文章推荐

    • ❤️‍🔥共22门课程,总价3725元,会员免费学• ❤️‍🔥接口自动化测试不想写代码?• 箭头函数是es6的新功能吗• es6箭头函数有哪些特性• ES6中箭头函数的详细梳理• 实例代码之ES6箭头函数实践• JavaScript怎么拿捏箭头函数
    1/1

    PHP中文网