ES6箭头函数

1.箭头函数的写法

如果函数内有返回值

javascript 复制代码
var fn = v => v + 1

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

javascript 复制代码
var fn = v => ({ obj: v })

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

javascript 复制代码
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 函数

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

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

箭头函数使用默认值

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

1.箭头函数使用默认值

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

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

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

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

javascript 复制代码
function fn (x, ...y) {
  console.log(x)
  console.log(y)
}
fn(1, 2, 3, 4)
javascript 复制代码
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

javascript 复制代码
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

javascript 复制代码
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

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

var res = user.fn(); //张三
相关推荐
逐·風2 小时前
unity关于自定义渲染、内存管理、性能调优、复杂物理模拟、并行计算以及插件开发
前端·unity·c#
Devil枫3 小时前
Vue 3 单元测试与E2E测试
前端·vue.js·单元测试
尚梦3 小时前
uni-app 封装刘海状态栏(适用小程序, h5, 头条小程序)
前端·小程序·uni-app
GIS程序媛—椰子4 小时前
【Vue 全家桶】6、vue-router 路由(更新中)
前端·vue.js
前端青山4 小时前
Node.js-增强 API 安全性和性能优化
开发语言·前端·javascript·性能优化·前端框架·node.js
毕业设计制作和分享5 小时前
ssm《数据库系统原理》课程平台的设计与实现+vue
前端·数据库·vue.js·oracle·mybatis
从兄5 小时前
vue 使用docx-preview 预览替换文档内的特定变量
javascript·vue.js·ecmascript
清灵xmf7 小时前
在 Vue 中实现与优化轮询技术
前端·javascript·vue·轮询
大佩梨7 小时前
VUE+Vite之环境文件配置及使用环境变量
前端
GDAL7 小时前
npm入门教程1:npm简介
前端·npm·node.js