当前位置: 首页 > news >正文

ES6箭头函数

1.箭头函数的写法

如果函数内有返回值

var fn = v => v + 1

返回值如果不是表达式(是对象),用()括号返回

var fn = v => ({ obj: v })

返回值如果不是表达式(也不是对象)方法体内按正常写

var fu = () => {var a = 1;var b = a+1;return b;
}

2.箭头函数和普通函数的区别

this指向不同:

箭头函数的this指向继承自其上一层作用域的this,无法通过call和apply改变this指向。

箭头函数的this指向由函数定义位置所决定而不是函数调用位置决定

不能作为构造函数(不能new) ,也没有prototype属性

1. this指向的问题

箭头函数本身是没有this的,他的this是从他作用域链的上一层继承来的,并且无法通过call和apply改变this指向

箭头函数的this,是看箭头函数定义位置所在的作用域,而不是函数调用的位置(也可以说继承上一级作用域的this)

2. 不能作为构造函数(不能new) 没有prototype属性

3. 没有arguments对象(函数传入的实参的集合),可以利用rest参数:...arguments

4. 不能使用yield命令,因此箭头函数不能用作 Generator 函数

function* fn(){yeild 1;yeild 2;return 3;
}
var f = fn();
f.next();// Generator 函数调用

5.函数新扩展的方法——给函数的参数指定默认值;与解构赋值默认值配合使用;通过rest参数获取函数的多余参数

箭头函数使用默认值

普通函数: 使用短路运算来给默认值

1.箭头函数使用默认值

function fn (x, y) {y = y || 1console.log('合计:'x + y)
}
//箭头函数
function fn (x, y = 1) {console.log('合计:'x + y)
}

2.与解构赋值默认值配合使用

// 与解构赋值默认值配合使用
function fn1 ({x, y = 1}) {console.log('合计:'x + y)
}
fn1({x: 1})

3.通过rest参数获取函数的多余参数 (rest参数只能放在末尾,不能再首位或中间)

function fn (x, ...y) {console.log(x)console.log(y)
}
fn(1, 2, 3, 4)
function m1({x = 0, y = 0} = {}) {return [x, y];
}
function m2({x, y} = { x: 0, y: 0 }) {return [x, y];
}
console.log(m1())
console.log(m2())
console.log(m1({x: 3}))
console.log(m2({x: 3})) // 3, undefined

 

6.箭头函数的实际运用

vue项目中的实际运用:点击按钮时,打开msgbox的窗口。在普通函数和this函数下不同写法

7.箭头函数相关面试题

面试题1

var name = 'window'
var obj = {name: 'obj',methods: () => {console.log(this.name)},fn: function (cb) {cb()}
}
obj.fn1 = function () {obj.fn(() => { console.log(this.name) })
}
var fn1 = obj.fn1
obj.methods() //箭头函数this取决于定义位置的作用域的this,定义在obj对象(而对象没有作用域),所以只能是window,所以打印window
obj.fn(() => { console.log(this.name) })//箭头函数作为参数传入,定义在函数调用位置,还是在全局作用域,所以还是window
fn1() // 定义在obj.fn()中定义的,而obj.fn()是指向window
obj.fn1() //obj

面试题2

var fn = function () {return () => { console.log(this.name) }
}
var obj1 = {name: '张三'
}
var obj2 = {name: '李四'
}
var name = '王五'
obj1.fn = fn
obj2.fn = fn
obj1.fn()() //obj1.fn()先执行,再将执行结果作为方法名进行执行
obj2.fn()()
fn()()

面试题3

var user = {name: '张三',fn: function () {var obj = {name: '李四'}var f = () => this.name// 箭头函数this取决于定义位置所在的位置,即和fn的this指向保持一直return f.call(obj)}
}var res = user.fn(); //张三

http://www.lryc.cn/news/196064.html

相关文章:

  • 毫米波雷达在环境监测中的关键作用
  • print() 函数
  • PyQt 小程序
  • 大模型技术实践(五)|支持千亿参数模型训练的分布式并行框架
  • [正式学习java②]——数组的基本使用,java内存图与内存分配
  • ESP32网络开发实例-TCP服务器数据传输
  • 四川天蝶电子商务有限公司抖音电商服务引领行业标杆
  • 复制活动工作表和计数未保存工作簿进行
  • ORA-12541:TNS:no listener 无监听程序
  • UE 多线程
  • BootStrap5基础入门
  • 企业文件防泄密软件!好用的文件加密系统推荐
  • 【LLM微调范式1】Prefix-Tuning: Optimizing Continuous Prompts for Generation
  • 实验2.1.3 交换机的远程配置
  • 基于边缘网关构建水污染监测治理方案
  • Spring事件ApplicationEvent源码浅读
  • 51单片机点阵
  • 远程VPN登录,IPsec,VPN,win10
  • “零代码”能源管理平台:智能管理能源数据
  • 【SA8295P 源码分析 (一)】06 - SA8295P XBL Loader 阶段 sbl1_main_ctl 函数代码分析
  • Java版本spring cloud + spring boot企业电子招投标系统源代码
  • 软考高级信息系统项目管理师系列论文一:论信息系统项目的整体管理
  • 【前端】JS - WebAPI
  • H5+Vue3编写官网,并打包发布到同一个域名下
  • 黑马mysql教程笔记(mysql8教程)基础篇——函数(字符串函数、数值函数、日期函数、流程函数)
  • Python武器库开发-基础篇(一)
  • Qt (QFileDialogQColorDialogQFontDialog) 对话框实战
  • 2.SpringSecurity - 处理器简单说明
  • AGI热门方向:国内前五!AI智能体TARS-RPA-Agent落地,实在智能打造人手一个智能助理
  • 运动品牌如何做到“全都要”?来看看安踏的答案