ES6、7学习笔记（尚硅谷）-5-箭头函数

一，箭头函数的理解

作用：定义匿名函数
基本语法：

没有参数时需要（）
一个参数时可以省略（）
多个参数时必须（）
函数体一条语句或者表达式时，可以省略括号{}，省略后默认返回结果。
函数体多条语句时，必须用{}包围，此时结果不返回，如果想返回，需要手动return语句来返回。

没有参数时需要（）

     <script type="text/javascript">let fun1=function(){console.log("我是常规写法")}let fun2=()=>console.log("我是箭头函数")fun1()fun2()</script>

一个参数时可以省略（）

          let fun3=a=>a+5console.log(fun3(4))  //9

多个参数时必须（）

        let fun3=(x,y)=>x+yconsole.log(fun3(4,5))  //9

函数体一条语句或者表达式时，可以省略大括号{}，省略后默认返回结果。

省略大括号写法：

        let fun3=(x,y)=>x+yconsole.log(fun3(4,5))  //9

不省略大括号写法：

        let fun3=(x,y)=>{return x+y}console.log(fun3(4,5))  //9

函数体多条语句时，必须用{}包围，此时结果不返回，如果想返回，需要手动return语句来返回。

      let fun3=(x,y)=>{console.log(x)return x+y}console.log(fun3(4,5))  //9

二，箭头函数的this的指向

箭头函数没有自己的this，箭头函数的this不是调用的时候决定的，而是指向定义的时候所处的对象。
换句话说：
箭头函数的this是看外层是否有函数，如果有，外层函数的this就是内部箭头函数的this。如果没有，则this指向window。

        let btn1=document.getElementsByTagName("button")[0]let btn2=document.getElementsByTagName("button")[1]//正常函数的this指向：谁调用指向谁（这里的函数作为button对象的方法了）btn1.onclick=function(){alert(this)}                     //[object HTMLButtonElement]//箭头函数的this指向:定义时所处的对象是：window，所以this指向windowbtn2.onclick=()=>{alert(this)}                     //   没有外层函数，this直接指向window [object window]

再来：

      let obj={name:"箭头函数",getname:function(){btn2.onclick=()=>{       //现在它是一个箭头函数，alert(this)   //有外层函数，this和外层函数一样，于是去看外层函数}              //找到外层函数getname之后，发现它是正常函数，作为对象obj的方法了。//于是思维转化到正常函数的this指向上来！谁调用指向谁}}obj.getname()        //作为方法，谁调用就指向谁，所以箭头函数的this指向obj

再换种写法：

 let obj={name:"箭头函数",getname:()=>{btn2.onclick=()=>{       //现在它是一个箭头函数，alert(this)   //有外层函数，this和外层函数一样，于是去看外层函数}              //找到外层函数getname之后，发现它也是箭头函数，//于是再去找它的外层函数，结果是getname没有外层函数了。所以指向window}}obj.getname()  //上面的方法，等价于在window下直接定义//obj.getname=()=>{}

ES6、7学习笔记（尚硅谷）-5-箭头函数相关推荐

MySQL学习笔记——尚硅谷李玉婷经典版MySQL基础笔记（一）
MySQL学习笔记--尚硅谷李玉婷经典版MySQL基础笔记(一) MySQL学习笔记目录 MySQL学习笔记--尚硅谷李玉婷经典版MySQL基础笔记(一) 一.基础知识 1.MySQL的语法规范 2. ...
maven学习笔记——尚硅谷
文章目录 maven学习笔记--尚硅谷第一章 Maven概述第一节为什么要学习Maven 1.Maven 作为依赖管理工具 1.1 jar 包的规模 1.2 jar 包的来源 1.3 jar 包 ...
ES6学习笔记二arrow functions 箭头函数、template string、destructuring
接着上一篇的说. arrow functions 箭头函数 => 更便捷的函数声明 document.getElementById("click_1").onclick = ...
Rabbitmq学习笔记(尚硅谷2021)
Rabbitmq学习笔记 (尚硅谷) 1.MQ 的概念 1.1 什么是 MQ? 1.2 为什么要用 MQ? 削峰解耦异步 1.3 MQ 的分类 ActiveMQ Kafka RocketMQ Ra ...
【HBase学习笔记-尚硅谷-Java API shell命令谷粒微博案例】
HBase学习笔记 HBase 一.HBase简介 1.HBase介绍 2.HBase的逻辑结构和物理结构 3.数据模型 4.基本架构二.快速入门 1.配置HBase 2.命令三.API 1.获取 ...
Java学习笔记 | 尚硅谷项目三详解
该笔记基于B站视频:尚硅谷Java入门视频教程目录 1,目标 2,需求说明 2.1,功能实现 2.1,菜单显示 2.2,添加功能 2.3,删除功能 2.3,查看团队成员 3,软件设计结构 4,具体实 ...
[Java]Maven学习笔记(尚硅谷2022)
文章目录
javaWeb学习笔记(尚硅谷旧版+新版)
HTML基础目录 HTML基础 HTML书写规范 HTML标签简介特殊字符 a标签列表标签 img标签 table标签跨行跨列表格 iframe标签表单标签关于GET和POST请求 ...
Springboot学习笔记 | 尚硅谷雷神
一.springboot入门 1.导入依赖导入springboot版本仲裁中心 <parent><groupId>org.springframework.boot</g ...
Elasticsearch7学习笔记(尚硅谷)
文章目录一.ElasticSearch概述 1.ElasticSearch是什么 2.全文搜索引擎 3.ElasticSearch 和 Solr 3.1 概述 3.2 比较总结二.Elastics ...

ES6、7学习笔记（尚硅谷）-5-箭头函数

一，箭头函数的理解

二，箭头函数的this的指向

ES6、7学习笔记（尚硅谷）-5-箭头函数相关推荐

最新文章

热门文章