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(); //张三
相关推荐
excel2 分钟前
webpack 核心编译器 十三 节
前端
腾讯TNTWeb前端团队7 小时前
helux v5 发布了,像pinia一样优雅地管理你的react状态吧
前端·javascript·react.js
范文杰10 小时前
AI 时代如何更高效开发前端组件?21st.dev 给了一种答案
前端·ai编程
拉不动的猪10 小时前
刷刷题50(常见的js数据通信与渲染问题)
前端·javascript·面试
拉不动的猪11 小时前
JS多线程Webworks中的几种实战场景演示
前端·javascript·面试
FreeCultureBoy11 小时前
macOS 命令行 原生挂载 webdav 方法
前端
uhakadotcom12 小时前
Astro 框架:快速构建内容驱动型网站的利器
前端·javascript·面试
uhakadotcom12 小时前
了解Nest.js和Next.js:如何选择合适的框架
前端·javascript·面试
uhakadotcom12 小时前
React与Next.js:基础知识及应用场景
前端·面试·github
uhakadotcom12 小时前
Remix 框架:性能与易用性的完美结合
前端·javascript·面试