美文网首页
ES6 箭头函数

ES6 箭头函数

作者: sandy2017 | 来源:发表于2019-02-14 19:34 被阅读0次

首先,我们先来初步了解箭头函数的使用,请看以下代码:

function foo(x,y) {
  return x+y;
}

//对比
var foo = (x,y)=> x+y; //如果只有一个表达式,并且沈略掉{ ...} 的话,则意味着表达式前面有一个隐含的 return

在前面的代码中 箭头函数就是 (x,y) => x+y; 直观上给人的感觉就是更短的语法表达相同的意思。那 es6 的箭头函数只是为了节省输入的字符数吗?答案当然是否定的。

箭头函数的主要设计目的就是以特定的方式改变 this 的行为特征。

接下来我们来观察它是如何实现的,请看以下代码:

var controller = {
      make:function(...) {
          btn.addEventListener ("click",function(){
                this.make();
        },false)
      }
}

以上代码运行时是会报语法错误的。错误的原因即是:this 绑定是动态性的,代码中的 this 和make()本身的this绑定是不同的,所以会造成错误。

以下是上面代码的正确写法,使用 var self = this 这一hack(变量 self 依赖于词法作用域的可预测性)

var controller = {
      make:function(...) {
          var self = this;
          btn.addEventListener ("click",function(){
                self.make();
        },false)
      }
}

在前面的代码中,如果使用箭头函数作为回调, this 则如我们所愿是可预测的。
考虑:

var controller = {
      make:function(...) {
          btn.addEventListener ("click",()=>{
                this.make();
        },false)
      }
}

前面代码的箭头函数回调中的词法 this 现在与封装函数 make()指向同样的值,也就是说,=> 是 var self = this 的词法替代形式

假使用 => 替代 var self=this 或者 .bind(this) 的情况有所帮助,那么猜测一下一个支持 this 的函数中使用 => ,而这个函数不需要 var self=this会怎么样呢?答案是:会把事情搞乱。
考虑:

var  controller = {
        make:(...) => {
                 this.help()
        },
        help:(...) {
              //dosomething
        }
}
controller.make(...);

虽然 我们以 controller.make()的形式调用,但是 this.help() 调用还是会失败。因为这里的 this 并不像平常一样指向 controller 。那么他指向哪里呢?它指向全局作用域,因为他是从包围的作用域中词法继承而来的 this。

除了词法 this,箭头函数还有词法 arguments--它们没有自己的 arguments 数组,而是继承自父层。

现在给出一组详细的 => 适用时机的规则

1.如果你有一个简短单据在线函数表达式,其中唯一的语句是 return 某个计算出的值,且这个函数内部没有 this 的引用,且没有自身引用(递归,事件绑定,解绑定),且不会要求函数执行这些,那么就可以安全的把它重构为 => 箭头函数
2.如果你有一个内层函数表达式,依赖于包含它的函数中调用 var self = this或者 .bind(this) 来确保适当的 this 的绑定,那么这个内层函数表达式应该可以安全的转换为 => 箭头函数
3.如果内层函数表达式依赖于封装函数中某种像 var args = Array.prototype.slice.call(arguments) 来保证 argumengts 的词法复制,那么这个内层函数应该可以安全的转换为 => 箭头函数
4.所有其他情况--函数声明,较长的多语句的函数表达式,需要词法名称标识符的函数,以及人物不符合以上几个特征的函数--一般都应该避免 => 函数语法

以上,如果发现有错误的地方,麻烦在评论区指出,谢谢~
喜欢的点个赞呗~

相关文章

  • ES6箭头函数简介

    @(JS技巧)[ES6|箭头函数] ES6箭头函数(Arrow Functions) ES6可以使用“箭头”(=>...

  • es6全家桶(二)—— 箭头函数

    es6全家桶(二)—— rest参数、箭头函数 箭头函数 ES6 允许使用“箭头”(=>)定义函数。 var f ...

  • es6、js、css、jquery、vue以及程序设计 知识点总

    es6 列举常用的es6特性。 箭头函数this的指向。 eg:箭头函数的特性 箭头函数内部没有construc...

  • 箭头函数

    ES6允许使用“箭头”(==>)定义函数。 箭头函数 等同于

  • 学习 ES 6 箭头函数

    箭头函数的用法 ES6 允许使用“箭头”(=>)定义函数。 箭头函数的一个用处是简化回调函数。 箭头函数 this...

  • JavaScript箭头函数

    ES6新语法箭头函数 箭头函数是ES6新语法,因为语法简单、可读性好,所以使用的也很多。箭头函数也是匿名函数,区别...

  • 关于ES6箭头this的指向问题

    ES6 允许使用 “ 箭头 ” (=>)定义函数。 箭头函数 填 坑。 this的指向是 向上查找 非箭头函数的...

  • ES6箭头函数(Arrow Functions)

    箭头函数是什么?(What) 箭头函数 (Arrow Functions)也称“胖箭头函数”,是ES6全新的特性。...

  • 2019-01-11

    ES6 箭头函数 箭头函数表示法:()=>console.log('Hello') 箭头函数和普通函数的区别 和普...

  • js学习笔记4(函数)

    1.箭头函数 ES6新增属性。箭头函数特别适合嵌入函数的场景。 箭头函数虽然语法简介,但是很多场合不适用。箭头函数...

网友评论

      本文标题:ES6 箭头函数

      本文链接:https://www.haomeiwen.com/subject/zsmkqftx.html