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. JavaWeb基础—HTML小结

    ---是什么?超文本标记语言---能干什么?描述网页的一种语言---怎么干?一套标签 前端三剑客的关系: 1. HTML是网页内容的载体. 2. CSS样式是表现. 3. JavaScript是用来实 ...

  2. spring boot 资料

    http://412887952-qq-com.iteye.com/blog/2344171 http://study.163.com/course/courseMain.htm?courseId=1 ...

  3. Bash shell 常用快捷键

    1,ctrl+c  :强制终止当前命令 2,ctrl+l   :清屏 3,ctrl+a  :光标移动到行首 4,ctrl+e   :光标移动到行尾 5,ctrl+u   :从光标所在位置删除到行首 6 ...

  4. CSS过渡动画之transition

    O(∩_∩)O~ 这两天在看看CSS的相关内容,关于transition动画感觉很有意思,分享一下. CSS负责给html加效果,自然少不了各种动画,今天介绍一下transition. 概述 看一段比 ...

  5. C++构造函数深度探究

    1.引子: 以下代码中的输出语句输出0吗,为什么? struct Test { int _a; Test(int a) : _a(a) {} Test() { Test(0); } }; Test o ...

  6. python的变量的命名规则以及定义

    1.变量,指计算机中存储数据的空间 2.变量的命名方式:变量名 = 值 3.变量的命名规定(标识符的命名规定): 只能由数字,字母,下划线组成(可以用中文但是不推荐) 不能以数字开头 不能与关键词重名 ...

  7. REVIT个人学习笔记——1.简介及熟悉界面

    此贴并非教学,主要是自学笔记,所述内容只是些许个人学习心得的记录和备查积累,难以保证观点正确,也不一定能坚持完成. 如不幸到访,可能耽误您的时间,也难及时回复,贴主先此致歉.如偶有所得,相逢有缘,幸甚 ...

  8. SecureCRT 用法总结

    SecureCRT 用法总结   1.下载与破解方法: Mac:https://www.jianshu.com/p/9427f12b1fdb Window:https://drive.google.c ...

  9. 六边形地图Cube coordinates理解

    1.这个是 Axial coordinates,可以实现六边形4个方向上的移动 2.但是六边形还有两个方向需要移动,所以引入了Cube coordinates,这个坐标系多了一个轴向,Y轴,X轴沿水平 ...

  10. NIO - Buffer

    NIO —— Buffer源码分析 Buffer的类结构 底层的基础类是抽象类-Buffer,其中定义了四个变量:capacity(容量),limit(限制),position(位置),mark(标记 ...