zoukankan      html  css  js  c++  java
  • 深入理解ES6箭头函数中的this

    • 箭头函数看上去是匿名函数的一种简写,但实际上,箭头函数和匿名函数有个明显的区别
      • 箭头函数内部的this是词法作用域,由上下文确定
      • 箭头函数中的this是在定义函数的时候绑定,而不是在执行函数的时候绑定。
    • 由于this在箭头函数中已经按照词法作用域绑定了,所以,用call()或者apply()bind()调用箭头函数时,无法对this进行绑定(无法使用call()或者apply()bind()改变this的指向),即传入的第一个参数被忽略。内部的this指向父执行上下文里面的this。
    • 箭头函数中,this指向的固定化,并不是因为箭头函数内部有绑定this的机制,实际原因是箭头函数根本没有自己的this,导致内部的this就是外层代码块的this。正是因为它没有this,所以也就不能用作构造函数
    • 箭头函数中的this是在定义函数的时候绑定,看一个例子:

      var x = 11;
      var obj = {
          x: 22,
          say: ()=>{
              console.log(this.x);
          }
      }
      obj.say();  // 输出的值为11
    • 所谓的定义时候绑定,就是this是继承自父执行上下文中的this,比如这里的箭头函数中的this.x,箭头函数本身与say平级以key:value的形式,也就是箭头函数本身所在的对象为obj,而obj的父执行上下文就是window,因此这里的this.x实际上表示的是window.x,因此输出的是11。

    • 而对于下面的例子:

      var obj = {
          birth: 1990,
          getAge: function () {
              var b = this.birth; // 1990
              var fn = () => new Date().getFullYear() - this.birth; // this指向obj对象
              return fn();
          }
      };
      obj.getAge(); // 28
    • 例子中箭头函数本身是在getAge方法中定义的,因此,getAge方法的父执行上下文是obj,因此这里的this指向则为obj对象。

  • 相关阅读:
    UML简介
    Servlet过滤器基础及使用场景
    eclipse maven配置问题:org.apache.maven.archiver.mavenarchiver.getmanifest
    maven中的groupId和artifactId 区分
    Spring中的控制反转和依赖注入
    SQL语句、PL/SQL块和SQL*Plus命令之间的区别
    Mybatis核心类生命周期和管理
    MyBatis Generator 下划线转驼峰命名
    修改maven默认仓库(即repository)的路径
    MyBatis SqlSessionFactory的几种常见创建方式
  • 原文地址:https://www.cnblogs.com/itgezhu/p/12022415.html
Copyright © 2011-2022 走看看