ES6箭头函数(箭头函数和普通函数的区别)
箭头函数
一个参数
// 只有一个参数
// f : 函数名称
// v : 函数参数
// v+v : 函数内容
let f=v=> v+v
console.log(f(10)) //20
两个参数
// 两个参数需加小括号
let ff=(v1,v2)=> v1+v2
console.log(ff(10,20))
多个语句
// 有多个语句的时候需要加大括号
// 有多个语句的时候return不能省略
let fff=(a,b,c)=>
{
console.log(a)
return a+b+c
}
console.log(fff(1,1,1))
返回对象
// 返回对象需要在对象的外面加小括号包起来
let p=(name,age)=>({name:name,age:age})
console.log(p('张三',18))
演示数组排序
//给数组里面的值排序
let numbers=[10,2,11,15,22,36]
// let res=numbers.sort(function(a,b){
// return a-b
// })
let res=numbers.sort((a,b)=>a-b)
console.log(res)
注意事项
- ES6允许使用箭头(=>)定义
- 不需要参数或者多个参数,需要加上()
- 函数体有多条语句时,需要使用大括号{},且必须使用return返回
- 箭头函数返回对象时,需要用小括号包起来
- 箭头函数使得表达更简洁
- 箭头函数能够简化回调函数
箭头函数this指向
普通函数中的this
- this总是代表它的直接调用者(js的this时执行上下文),例如obj.func,那么func中的this就是obj
- 在默认情况(非严格模式下,未使用‘use strict’),没有找到直接调用者,则this指的是window(约定俗成)
- 在严格模式下,没有直接调用者的函数中的this是underfined
- 使用call,apply,bind绑定的this指的是绑定对象
箭头函数中的this
- 箭头函数没有自己的this,它的this是继承而来的,默认指向在定义它时所处的对象(宿主对象),而不是执行时的对象,定义它的时候,可能环境是window,箭头函数可以方便地让我们在setTimeout,setInterval中方便的使用this
- 在箭头函数中,this指向的固定化,并不是因为箭头函数内部有绑定this的机制,实际原因是箭头函数根本没有自己的this,导致内部的this就是外层代码块的this
// var p={
// name:"张三",
// say(){
// console.log("姓名:"+this.name)
// }
// }
// p.say()
// var p={
// name:"张三",
// say(){
// var a=function(){
// console.log(this,this.name) //找不到name underfind
// }
// a()
// }
// }
// p.say()
//通过定义全局变量
// var p={
// name:"张三",
// say(){
// let self=this //把this赋值给变量量self
// var a=function(){
// console.log(self,self.name) //通过self调用
// }
// a()
// }
// }
// p.say()
//使用bind 绑定
// var p={
// name:"张三",
// say(){
// var a=function(){
// console.log(this.name)
// }.bind(this) //找不到this对象时,通过bind绑定this
// a()
// }
// }
// p.say()
//箭头函数
var p={
name:"张三",
say(){
var a=()=>{
console.log(this.name)
}
a()
}
}
p.say()
箭头函数和普通函数的区别
第一点:写法上:箭头函数相比普通函数写法较为简介
第二点:
- 普通函数this代表直接调用者,例如:person.name的this代表perspn
- 在严格模式下('use strict'),没有找到直接调用者的话,this则为undefined
- 在非严格模式下,没有找到直接调用者的话,this则为window
- 箭头函数this没有明确指向,它的this直接继承父类,如果父类也没有明确指向this那么this代表undefinded
箭头函数注意事项:
- 1.当参数只有一个时可以省略小括号
- 2.当参数有多个/没有时不能省略小括号
- 3.当函数体只有一句话时,可以省略大括号和return
- 4.当函数体有多句话时,不能省略大括号和return
- 5.this没有明确指向,直接继承父类this
ES6箭头函数(箭头函数和普通函数的区别)的更多相关文章
- [js高手之路] es6系列教程 - 箭头函数详解
箭头函数是es6新增的非常有意思的特性,初次写起来,可能会觉得别扭,习惯之后,会发现很精简. 什么是箭头函数? 箭头函数是一种使用箭头( => )定义函数的新语法, 主要有以下特性: 不能通过n ...
- 前端项目中常用es6知识总结 -- 箭头函数及this指向、尾调用优化
项目开发中一些常用的es6知识,主要是为以后分享小程序开发.node+koa项目开发以及vueSSR(vue服务端渲染)做个前置铺垫. 项目开发常用es6介绍 1.块级作用域 let const 2. ...
- JS ES6中的箭头函数(Arrow Functions)使用
转载这篇ES6的箭头函数方便自己查阅. ES6可以使用“箭头”(=>)定义函数,注意是函数,不要使用这种方式定义类(构造器). 一.语法 基础语法 (参数1, 参数2, …, 参数N) => ...
- ES6学习之箭头函数
ES6学习笔记--箭头函数 箭头函数一直在用,最近突然想到重新看一下箭头函数的用法,所以这里做一些总结. 箭头函数长这个样子: let fn = a => a++; // fn 是函数名, a= ...
- es6学习笔记--箭头函数
基本用法 ES6允许使用“箭头”(=>)定义函数. var f = v => v; 上面的箭头函数等同于: var f = function(v) { return v; }; 如果箭头函 ...
- 从 ES6 高阶箭头函数理解函数柯里化
前言:第一次看到多个连续箭头函数是在一个 react 项目中,然鹅确认了下眼神,并不是对的人,因为看得一脸懵逼.em......于是开始各种搜索,先是知道了多个连续箭头函数就是 es6 的多次柯里化的 ...
- ES6——函数-箭头函数
箭头函数: 1.普通函数 function 函数名(){...} 2.箭头函数 注意: 1)如果只有一个返回值,{}return可以省略: let arr = [12,5,8,99,33,14,26 ...
- es6中的(=>)箭头函数
x => x * x 上面的箭头函数相当于: function (x) { return x * x; } 箭头函数相当于匿名函数,并且简化了函数定义. 箭头函数有两种格式,一种像上面的,只包含 ...
- ES6中的箭头函数的语法、指向、不定参数
箭头函数的语法 function fn1() { console.log(1); } let fn2 = () => { console.log(2); } fn1()//1 fn2()//2 ...
- ES6中的箭头函数与普通函数的区别
箭头函数与普通函数的区别 1.语法上更加简洁.清晰 基本语法: // 关于箭头函数的参数 // 如果箭头函数没有参数,直接写一个括号即可 let fun1 = () => { console.l ...
随机推荐
- redis并发锁
1.应对并发场景 避免操作数据不一致 将对redis加锁 2.考虑到异常状况无法释放锁,导致死锁 将代码块进行try-catch处理 3.考虑try时宕机依然导致死锁 对锁添加时效性,添加过期时间 4 ...
- SqlServer 数据库备份到服务器,及删除
一:备份 1.在数据库管理下 新建一个维护计划,然后下图中点击 标红的按钮 新建计划作业,建好后就可以 SqlServer 代理下的作业里可以看到刚新建的作业. 2.SqlServer 代理下的作业 ...
- 关于Mybatis中表中字段名和POJO中字段名不同的解决方法
项目结构: POJO中: package com.domain; /** * @author mzy * 定义orders表对应的实体类 */ public class Order { /** * C ...
- MAC下Jetbrains编译器无法打开问题解决
这段时间不知道怎么回事,每次打开Rider必定闪退,毫无头绪,只好暂时放弃使用Rider,试用了一段时间Visual Studio. 可惜...虽然大学时候觉得VS天下第一,但是用惯了JB的编译器,再 ...
- 移动端动画——requestAnimationFrame
window.requestAnimationFrame() 告诉浏览器--你希望执行一个动画,并且要求浏览器在下次重绘之前调用指定的回调函数更新动画.该方法需要传入一个回调函数作为参数,该回调函数会 ...
- VPS系统后台性能优化实战
作者: 刘用, 现任新东方APP团队高级软件工程师 2019年开始,新东方APP团队启动了长达半年以上的稳定性建设工作,为什么稳定性如此重要?因为随着每年30%以上的高速增长,现有的后端服务完全扛不住 ...
- 笔记本+ubuntu18.04 关闭触摸板touchpad
方法1: Settings -> Devices -> Mouse&Touchpad -> Touchpad OFF 方法2: 终端运行如下命令 touchpad off: ...
- RabbitMQ-进阶
目录 过期时间TTL 设置队列TTL 消息确认机制的配置 死信队列 内存磁盘的监控 RabbitMQ的内存控制 命令的方式 配置文件方式 rabbitmq.conf RabbitMQ的内存换页 Rab ...
- Geode member发现机制
Geode member发现机制 Apache Geode 为集群和客户端服务器间提供了多种member 发现机制,具体如下: Peer Member Discovery Standalone Mem ...
- 20210715 noip16
考场 乍一看 T1 像是二分答案,手玩样例发现可以 \(O(k^2)\) 枚举点对,贪心地更新答案,完了?有点不信,先跳了 T2 的形式有点像逆序对,但没啥想法 T3 的式子完全不知道如何处理,一看就 ...