ES5是怎么实现箭头函数的效果的

640 阅读1分钟

箭头函数没有它自己的 this 值,箭头函数内的 this 值继承自外围作用域,谁定义的函数this 指向谁

箭头函数要实现类似纯函数的效果,必须剔除外部状态。所以箭头函数不具备普通函数里常见的 this、arguments 等,当然也就不能用 call ()、apply ()、bind () 去改变 this 的指向

对于箭头函数来说,并没有自己的 this ,它的 this 将始终指向让它生效的对象,即它的外部调用者:

 ES6 function foo() { 
     setTimeout(() => { 
         console.log('id:', this.id); 
     }, 100); 
   } 
 
 ES5 function foo() { 
     var _this = this; 
     setTimeout(function () { 
         console.log('id:', _this.id); 
     }, 100); 
 }
  • 箭头函数转换插件
  • 插件其实就是一个钩子函数,在遍历语法树的过程中,可以捕获某些特别类型的节点并进行转换
  • 每个es6的语法都会对应一个插件
  • 每个插件都会捕获自己的语法节点,转成对应的es5语法
  • 所有的插件打成一个包,就是preset @babel/preset-env 是插件集合,包含着基本上大部分的es6语法转换插件
  • 插件的格式是定死的,就是一个对象,对象里有一个visitor的访问器(设计模式:访问者模式)

blog.51cto.com/u_14115828/…