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. 针对铁定浏览器的css选择符

    /***** Selector Hacks ******/ /* IE6 and below */ * html #uno { color: red } /* IE7 */ *:first-child ...

  2. WPF设置全局字体和字体嵌入

    原文:WPF设置全局字体和字体嵌入 版权声明:本文为博主原创文章,未经博主允许不得转载. https://blog.csdn.net/CLeopard/article/details/40590373 ...

  3. 04 - django的路由层 1

    1.路由控制简单配置 from django.conf.urls import url from . import views urlpatterns = [ url(r'^articles/2003 ...

  4. Webpack之Code Splitting 代码分块

    如何实现代码分块 默认情况webpack会将资源文件打包成一个js文件,比如app.bundle.js 实际情况我们需要按需加载 方法如下: require.ensure(dependencies, ...

  5. windows下启动与停止服务

    net start 服务名 例如:net start mysql net stop 服务名 例如:net stop mysql

  6. 模拟UNIX(linux)文件系统

    操作系统课程设计 一.实验内容 1. 题目:模拟UNIX(linux)文件系统                [问题描述] 在任一OS下,建立一个大文件,把它假象成一张盘,在其中实现一个简单的 模拟U ...

  7. flask 实现异步非阻塞----gevent

    我们都知道,flask不支持异步非阻塞的请求,我们可以创建一个新项目去测试一下,推荐大家使用pycharm去开发我们的flask  使用特别的方便. rom flask import Flask im ...

  8. How to access business objects with their related ObjectSpaces (Multi-Database Environment)

    https://www.devexpress.com/Support/Center/Question/Details/T565897/how-to-access-business-objects-wi ...

  9. jenkins+Gitlab持续集成环境配置教程

    环境简介: Jenkins 2.156(本地win10) GitLab Enterprise Edition 10.1.4-ee (远程服务器) Apache Ant 1.9.13 (本地win10) ...

  10. 记一个小bug的锅

    人生中的第一个线上bug 我参与的第一个项目就出现了.但是自己还觉得这锅也不全是自己的,毕竟那么明显的bug出现在历史模块中(不是我写的新模块),难道测试部就没一点责任?代码走查人员就没一点责任?不过 ...