1. 具有一个参数的简单函数

    var single = a => a
    single('hello, world') // 'hello, world'
  2. 没有参数的需要用在箭头前加上小括号

    var log = () => {
    alert('no param')
    }
  3. 多个参数需要用到小括号,参数间逗号间隔,例如两个数字相加

    var add = (a, b) => a + b
    add(3, 8) // 11
  4. 函数体多条语句需要用到大括号

    var add = (a, b) => {
    if (typeof a == 'number' && typeof b == 'number') {
    return a + b
    } else {
    return 0
    }
    }
  5. 返回对象时需要用小括号包起来,因为大括号被占用解释为代码块了

    var getHash = arr => {
    // ...
    return ({
    name: 'Jack',
    age: 33
    })
    }
  6. 直接作为事件handler

    document.addEventListener('click', ev => {
    console.log(ev)
    })
  7. 作为数组排序回调

    var arr = [1, 9 , 2, 4, 3, 8].sort((a, b) => {
    if (a - b > 0 ) {
    return 1
    } else {
    return -1
    }
    })
    arr // [1, 2, 3, 4, 8, 9]

特性

  1. this:用function生成的函数会定义一个自己的this,而箭头函数没有自己的this,而是会和上一层的作用域共享this。

  2. apply & call:由于箭头函数已经绑定了this的值,即使使用apply或者call也不能只能起到传参数的作用,并不能强行改变箭头函数里的this。

  3. arguments:普通函数里arguments代表了调用时传入的参数,但是箭头函数不然,箭头函数会把arguments当成一个普通的变量,顺着作用域链由内而外地查询。

  4. 不能被new:箭头函数不能与new关键字一起使用,会报错。

  5. typeof运算符和普通的function一样:

    var func = a => a
    console.log(typeof func); // "function"
  6. instanceof也返回true,表明也是Function的实例:

    console.log(func instanceof Function); // true

es6箭头函数的注意要点的更多相关文章

  1. es6箭头函数讲解

    es6箭头函数的用法 箭头函数是es6的一种函数的简写方法. 如下: var f = v = > v; //等同于 var f = function(v){ return v; } var su ...

  2. es6箭头函数 this 指向问题

    es5中 this 的指向 var factory = function(){ this.a = 'a'; this.b = 'b'; this.c = { a:'a+', b:function(){ ...

  3. ES6 — 箭头函数

    一 为什么要有箭头函数 我们在日常开发中,可能会需要写类似下面的代码 const Person = { 'name': 'little bear', 'age': 18, 'sayHello': fu ...

  4. 前端分享----JS异步编程+ES6箭头函数

    前端分享----JS异步编程+ES6箭头函数 ##概述Javascript语言的执行环境是"单线程"(single thread).所谓"单线程",就是指一次只 ...

  5. ES6 箭头函数 this 指向

    ES6 箭头函数 this 指向 箭头函数有几个使用注意点: 函数体内的this对象,就是定义时所在的对象,而不是使用时所在的对象. 不可以当作构造函数,也就是说,不可以使用new命令,否则会抛出一个 ...

  6. ES6 箭头函数(Arrow Functions)

    ES6 箭头函数(Arrow Functions) ES6 可以使用 "箭头"(=>)定义函数,注意是函数,不要使用这种方式定义类(构造器). 一.语法 具有一个参数的简单函 ...

  7. ES6箭头函数基本用法

    ES6箭头函数基本用法 ``` window.onload = function(){ alert(abc); } //箭头函数 window.onload = ()=>{ alert(&quo ...

  8. ES6 箭头函数this指向问题

    var name = "window"; var person1 = { name: "person1", show1: function() { consol ...

  9. Vue ES6箭头函数使用总结

    Vue ES6箭头函数使用总结   by:授客 QQ:1033553122   箭头函数 ES6允许使用“箭头”(=>)定义函数: 函数不带参数 定义方法:函数名称 = () => 函数体 ...

随机推荐

  1. SAP交货单增强MV50AFZ1问题

    在MV50AFZ1这个出口的子程序FORM USEREXIT_SAVE_DOCUMENT_PREPARE.中进行了一些控制 当VL01N创建交货单点击保存的时候检查行项目的信息,如果有问题给出TYPE ...

  2. Taming the asynchronous beast with ES7

    https://pouchdb.com/2015/03/05/taming-the-async-beast-with-es7.html We have a problem with promises ...

  3. 仙人掌&圆方树

    仙人掌&圆方树 Tags:图论 [x] [luogu4320]道路相遇 https://www.luogu.org/problemnew/show/P4320 [ ] [SDOI2018]战略 ...

  4. 【转载】COM 组件设计与应用(十)——IDispatch 接口 for VC.NET

    原文:http://vckbase.com/index.php/wv/1225.html 一.前言 终于写到了第十回,我也一直期盼着写这回的内容耶,为啥呢?因为自动化(automation)是非常常用 ...

  5. 2-7 hash

    1.Hash Hash函数处理流程Hash,一般翻译做"散列",也有直接音译为"哈希"的,就是把任意长度的输入(又叫做预映射, pre-image),通过散列算 ...

  6. C#中如果类的扩展方法和类本身的方法签名相同,那么会优先调用类本身的方法

    新建一个.NET Core项目,假如我们有如下代码: using System; namespace MethodOverload { static class DemoExtension { pub ...

  7. request不能接受前端传来的参数的问题

    这是因为设置了 disabled ,所以接收不到参数,只需要去掉disabled即可.

  8. shell命令注意点

    unset 不能删除readonly的变量 实例: #!/bin/bash name="lalala" readonly name unset name 执行结果: line5:u ...

  9. 细说 Django — web 前后端分离

    一.所谓的前后端分离 1.渊源 前端发展史 2.特点 前端:负责 View 和 Controller 层 后端:只负责 Model 层,业务处理/数据等 3.优缺点 优点:解耦,解放前端,职责明确 缺 ...

  10. 沧桑巨变中焕发青春活力-记极1s HC5661A 打怪升级之路

    最近发现一个新货umaxhosting年付10美元的便宜VPS.2杯喜茶的价格可以让你在国外拥有一个1024MB (1GB) DDR3 RAM.1024MB (1GB) vSwap.70GB RAID ...