zoukankan      html  css  js  c++  java
  • arrow function

    简介

    JavaScript 中,函数可以用箭头语法(”=>”)定义,有时候也叫“lambda表达式”。这种语法主要意图是定义轻量级的内联回调函数。例如:

    // Arrow function:
    [5, 8, 9].map(item => item + 1); // -> [6, 9, 10]
    
    // Classic function equivalent:
    [5, 8, 9].map(function(item) {
      return item + 1;
    }); // -> [6, 9, 10]
    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7

    当箭头函数有一个参数时,参数两边的括号是可有可无的,但是还是有括号看起来看清楚。

    const foo = bar => bar + 1;
    const bar = (baz) => baz + 1;
    • 1
    • 2

    箭头函数不带参数时,必须要用括号,比如:

    const foo = () => "foo";
    • 1

    如果函数体不是只一行,应该用花括号,并显式地返回(如果需要返回值)。

    const foo = bar => {
      const baz = 5;
      return bar + baz;
    };
    foo(1); // -> 6
    • 1
    • 2
    • 3
    • 4
    • 5

    arguments object

    箭头函数不会暴露 argument 对象,所以,argument 将简单地指向当前scope内的一个变量。

    arguments object 是所有函数中的一个本地变量。你可以通过 arguments 对象引用函数的入参。这个对象包含传给这个函数的每个入参的入口,索引从0开始,例如: 
    arguments[0] 
    arguments[1] 
    arguments[2]

    const arguments = [true];
    const foo = x => console.log(arguments[0]);
    
    foo(false); // -> true
    • 1
    • 2
    • 3
    • 4

    基于此,箭头函数也不知道它的调用者。 
    当缺少arguments object时,可能会有所限制(极少数情况),其余的参数一般可以做为替代。

    const arguments = [true];
    const foo = (...arguments) => console.log(arguments[0]);
    
    foo(false); // -> false
    • 1
    • 2
    • 3
    • 4

    绑定this的值

    箭头函数是 lexically scoped,这意味着其 this 绑定到了附近scope的上下文。也就是说,不管this指向什么,都可以用一个箭头函数保存。

    看下面的例子, Cow 类有一个方法在1秒后输出sound。

    class Cow {
      constructor() {
        this.sound = "moo";
      }
      makeSoundLater() {
        setTimeout(() => {
           console.log(this.sound);
        }, 1000);
      }
    }
    
    var myCow = new Cow();
    var yourCow = new Cow();
    
    yourCow.sound = "moooooo";
    
    myCow.makeSoundLater();
    yourCow.makeSoundLater();
    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16
    • 17
    • 18

    在 makeSoundLater() 方法中,this 指向当前 Cow 对象的实例。所以在这个例子中当我们调用 myCow.makeSoundLater(), this 指向 myCow。然后,通过使用箭头函数,我们保存了 this,这样我们就可以在需要时引用 this.sound 了。将会输出 “moo”,而不是yourCow.makeSoundLater()输出的“moooooo”。

    隐式返回值

    箭头函数可以通过省略掉小括号做到隐式返回值。

    const foo = x => x + 1;
    foo(1); // -> 2
    • 1
    • 2

    当使用隐式返回时,Object Literal 必须用花括号括起来。

    Object Literal 是用花括号括起来的,分号隔开的 k-v 对象列表。

    const foo = () => { bar: 1 } // foo() returns undefined
    const foo = () => ({ bar: 1 }) // foo() returns {bar: 1}
    • 1
    • 2

    显示返回值

    const foo = x => {
      return x + 1;
    }
    
    foo(1); // -> 2
    • 1
    • 2
    • 3
    • 4
    • 5

    语法

    
    x => y // Implicit return
    
    
    x => { return y } // Explicit return
    
    
    (x, y, z) => { ... } // Multiple arguments
    
    
    (() => { ... })() // Immediately-invoked function expression
  • 相关阅读:
    c# 网络编程
    .net基础------抽象类和接口区别
    自己开发插件-------- 待续...........
    js 学习笔记 (this ,扩展方法,匿名函数)
    meta
    微信公众号支付接口-JSAPI
    跨境电商-311xml报文生成 更新到2018-10
    MooTools 异步请求验证
    微信JS-SDK 接口调用与 php 遇到的坑
    php 与 jquery中$.post()与attr()方法的简单实例 amaze modal 模态窗口
  • 原文地址:https://www.cnblogs.com/NineKit/p/9943995.html
Copyright © 2011-2022 走看看