之前在看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. Linux配置NTP时间服务器(date、hwclock、NTP服务器的配置)

    目录 date命令 hwclock命令 NTP服务的部署 服务端 客户端 date命令 date 命令的作用是查看和设置Linux中的系统日期时间 date                      ...

  2. hdu4930 模拟斗地主

    题意:        模拟斗地主,出牌有一下规则,1张,1对,3张,3带1,3带2,炸弹(包括两个猫),4带2,这写规则,没有其他的,然后给你两幅牌,只要第一个人出了一次牌对方管不上,那么或者第一个人 ...

  3. 通过修改EIP寄存器实现强行跳转并且注入DLL到目标进程里

    /* 描述 功能:通过修改EIP寄存器实现32位程序的DLL注入(如果是64位,记得自己对应修改汇编代码部分) 原理: 挂起目标进程,停止目标进程EIP的变换,在目标进程开启空间,然后把相关的指令机器 ...

  4. Mybatis-Plus02 CRUD

    先将快速开始01看完,再看这个文档 配置日志 我们所有的sql现在都是不可见的,我们希望知道它是怎么执行的,所以我们就必须看日志,开发的时候打开,上线的时候关闭 在application.proper ...

  5. windows的SEH异常处理以及顶层异常处理

    前言 windows的SEH结构化异常处理是基于线程的,传统的SEH结构化异常会基于堆栈形成一条包含异常回调函数地址的链(SEH链).而fs:[0](TEB的第一个字段)指向这条链的链头,当有异常发生 ...

  6. FHE-Toolkit 安装

    什么是FHE-Toolkit? FHE-Toolkit-linux是用于Linux的IBM全同态加密工具包, 该工具包是一个基于Linux的Docker容器,可演示对加密数据的计算而无需解密, 该工具 ...

  7. Java_接口回调与匿名内部类

    匿名内部类 警告:匿名内部类本质上是一个对象 如果有一个接口或者抽象类,必须要用class定义一个实现类写重写抽象方法,才能创建对象并使用. 匿名内部类就是省略了用class定义子类的过程,直接使用父 ...

  8. [OS] 操作系统课程(三)

    工具 源码阅读:understand 源码文档自动生成工具:Doxygen 编译环境:gcc 运行环境:x86机器或QEMU 调试工具:QEMU+(GDB or IDE) IDE:Eclipse-CD ...

  9. 变体 variety 计算机学科中的改变类型;输入法的 类型

    变体_百度百科 中文为改变原来的体式.或者计算机学科中的改变类型. 变体 variety 输入法的 类型

  10. 8.4 parted:磁盘分区工具

    parted     对于小于2TB的磁盘可以用fdisk和parted命令进行分区,这种情况一般采用flisk命令,但对于大于2TB的磁盘则只能用parted分区,且需要将磁盘转换为GPT格式. p ...