之前在看Vue2.0的时候，就被很多的箭头函数困扰，一直不知道是怎么回事，虽然箭头函数四个字在我耳边一直转圈，今天小编整理整理箭头函数里面的常见用法和表现形式，在这个Vue3.0已经到来的一段时间，希望大家也可以一起搭上箭头函数的大风飞起来。大家也可以关注我的微信公众号，蜗牛全栈。
一、es5中函数的声明方式
function sum(x,y){

    return x + y

}

console.log(sum(4,5)) // 9

let sum = function(x,y){

    return x + y

}

console.log(sum(4,5)) // 9

对于上面的两种方式，主要区别在于let 关键字声明函数的时候，不存在变量提升的问题（ps:具体可以参考小编的第一篇文章，关键字let和var的区别）

二、es6中的箭头函数：主要就是把function去掉，在参数和函数体之间用箭头分割

let sum = (x,y) => {

    return x+y

}

console.log(sum(3,4)) // 7

对于函数体只有一行代码的时候，上面代码可以简化为以下代码

let sum = (x,y) => x + y

对于返回值，可以省略return关键字并用圆括号扩起来

function addStr(str1,str2){

    return str1+str2

}

const addStr = (str1,str2) => (str1+str2)

// 以上两个函数功能是一样的，只是箭头函数在箭头右侧，省略了关键字return，并且在外面添加圆括号

三、箭头函数和普通函数之间的区别

1、this指向定义时所在的对象，而不是调用时所在的对象(箭头函数中没有this,this指向的是父级的this)

<html>

  <body>

    <button id="btn">点我</button>

    <script>

      let oBtn = document.querySelector("#btn")

        oBtn.addEventListener("click",function(){

            console.log(this) // <button id="btn">点我</button>

        })

    </script>

  </body>

</html>
<html>

  <body>

    <button id="btn">点我</button>

    <script>

      let oBtn = document.querySelector("#btn")

      oBtn.addEventListener("click",function(){

            setTimeout(function(){

                // call apply bind改变this指向

               console.log(this) // Window

            },1000)

      })

</script>

  </body>

</html>

通过bind改变this指向

<html>

  <body>

    <button id="btn">点我</button>

    <script>

      let oBtn = document.querySelector("#btn")

      oBtn.addEventListener("click",function(){

            setTimeout(function(){

                console.log(this) // <button id="btn">点我</button>

            }.bind(this),1000)

        })

</script>

  </body>

</html>

箭头函数中的this指向

<html>

  <body>

    <button id="btn">点我</button>

    <script>

      let oBtn = document.querySelector("#btn")

      oBtn.addEventListener("click",function(){

            setTimeout(() => {

                console.log(this) // <button id="btn">点我</button>

            },1000)

        })

</script>

  </body>

</html>

2、不可以作为构造函数

function People(name,age){

    console.log(this) // People{}

    this.name = name

    this.age = age

}

let p1 = People("lilei",34)

console.log(p1) // People{name:"lilei",age:34}

let People = (name,age) => {

    this.name = name

    this.age = age

}

let p1 = People("lilei",34)

console.log(p1) // 报错 People is not a constrator

3、不可以使用arguments对象

let foo = function(){

    console.log(arguments)

}

console.log(foo(1,2,3)) // Arguments[1,2,3]

let foo = () => {

    console.log(arguments)

}

console.log(foo(1,2,3)) // Arguments is not defined

箭头函数兼容类似es5中arguments对象：通过rest参数

let foo = (...args) => {

    console.log(args)

}

console.log(foo(1,2,3)) // [1,2,3]

ES6函数参数的更多相关文章

  1. ES6 函数参数的默认值

    基本用法 在ES6之前,不能直接为函数的参数指定默认值,只能采取变通的方法. function log(x,y){ y = y||'world'; console.log(x,y); } log('k ...

  2. ES6函数参数默认值作用域的模拟原理实现与个人的一些推测

    一.函数参数默认值中模糊的独立作用域 我在ES6入门学习函数拓展这一篇博客中有记录,当函数的参数使用默认值时,参数会在初始化过程中产生一个独立的作用域,初始化完成作用域会消失:如果不使用参数默认值,不 ...

  3. ES6——函数-参数

    函数的参数: 1.参数扩展/数组展开      1)收集(剩余的)参数          function show(a,b,...args){}   // 三点运算符           *Rest ...

  4. ES6 函数参数的解构赋值

    function add([x, y]){ return x + y; } add([1, 2]); // 3

  5. ES6学习 --函数参数默认值与解构赋值默认值

    1. ES6的解构ES6中引入了解构赋值的操作,其作用是:将值从数组Array或属性从对象Object提取到不同的变量中 即分为两种情况:从数组Array中解构,以及从对象Object中解构 ①.从数 ...

  6. ES6之函数参数

    ES6中对于函数参数主要增加了以下内容: 1.参数的扩展/数组的展开: 2.默认参数. 什么是参数的扩展? 看下面代码: <!DOCTYPE html> <html lang=&qu ...

  7. ES6 学习笔记之三 函数参数默认值

    定义函数时为参数指定默认值的能力,是现代动态编程语言的标配.在ES6出现之前,JavaScript是没有这种能力的,框架为了实现参数默认值,用了很多技巧. ES6 的默认参数值功能,与其他语言的语法类 ...

  8. ES6—带默认值的函数参数及其作用域

    在学习ES6函数一章时,发现了一个有意思的现象,原文描述如下: 这段话主要state了3个事实: ①函数参数有默认值时,会在声明初始化阶段形成一个单独的作用域 ②这个作用域在初始化结束后消失 ③没默认 ...

  9. ES6 - 函数扩展（函数参数默认值）

    函数参数默认值 ES6 之前,不能直接为函数的参数指定默认值,只能采用变通的方法. function log(x, y) { y = y || 'World'; console.log(x, y); ...

随机推荐

  1. Win64 驱动内核编程-24.64位驱动里内嵌汇编

    64位驱动里内嵌汇编 讲道理64位驱动是不能直接内链汇编的,遇到这种问题,可以考虑直接把机器码拷贝到内存里,然后直接执行. 获得机器码的方式,可以写好代码之后,直接通过vs看反汇编,然后根据地址在看内 ...

  2. <JVM下篇：性能监控与调优篇>补充：使用OQL语言查询对象信息

    笔记来源:尚硅谷JVM全套教程,百万播放,全网巅峰(宋红康详解java虚拟机) 同步更新:https://gitee.com/vectorx/NOTE_JVM https://codechina.cs ...

  3. 【vue-09】axios

    [vue-09]axios 文档:Axios中文文档 官网 为什么要使用axios 功能特点: 支持发送ajax异步 支持在NodeJs中发送ajax请求. 支持Promise 支持拦截器请求和响应 ...

  4. ImageIo.read 返回null

    一.问题描述 今天收到一个bug就是imageio读取图片会返回null,具体如下 但是其他的图片就没有问题 二.问题分析 结合百度发现这张图片原本的后缀并非是jpg,使用notpard++打开就可以 ...

  5. BUA软件工程个人博客作业

    写在前面 项目 内容 所属课程 2020春季计算机学院软件工程(罗杰 任健) (北航) 作业要求 个人博客作业 课程目标 培养软件开发能力 本作业对实现目标的具体作用 阅读教材,了解软件工程,并比较各 ...

  6. 项目展示$\beta$

    项目 内容 课程:北航-2020-春-软件工程 博客园班级博客 要求 Beta阶段项目展示 我们在这个课程的目标是 提升团队管理及合作能力,开发一项满意的工程项目 这个作业在哪个具体方面帮助我们实现目 ...

  7. Redis6.x学习笔记（四）复制

    复制概述 Redis支持复制的功能,以实现当一台服务器的数据更新后,自动将新的数据异步同步到其它数据库. Redis复制实现中,把数据库分为主数据库master和从数据库slave,主数据库可以进行读 ...

  8. [并发编程 - 多线程：信号量、死锁与递归锁、时间Event、定时器Timer、线程队列、GIL锁]

    [并发编程 - 多线程:信号量.死锁与递归锁.时间Event.定时器Timer.线程队列.GIL锁] 信号量 信号量Semaphore:管理一个内置的计数器 每当调用acquire()时内置计数器-1 ...

  9. EventSource的自定义实现

    前言: 前面两篇文章都介绍了.NET Core 性能诊断工具,其中诊断工具都用到了EventCounters来实时的收集服务器性能指标. 那么收集指标能否自己定义呢? 一.What's EventCo ...

  10. Win7通过cmd进入d盘的方法

    Win7通过cmd进入d盘的方法 时间:2016-05-13 15:06:03 作者:yunchun 来源:系统之家  手机查看 评论 我们在使用Win7系统过程中,对于经常使用DOS程序的朋友们来说 ...