526互联

【补充】箭头函数

发布时间 2023-08-06 22:33:31作者: Chimengmeng

【补充】箭头函数

  • 函数写法变简单
  • 箭头函数没有自己的this，在箭头函数中使用this，就是它上一层的

【1】简解

  • 箭头函数是ES6中的语法特性，它提供了一种更简洁的函数定义方式。
  • 相比传统函数，箭头函数具有以下特点：
    • 简化的语法：
      • 箭头函数的语法非常简洁，可以帮助我们更快速地编写函数。
    • 没有自己的this：
      • 箭头函数没有自己的this绑定，它的this指向的是它被定义时所处的词法环境中的this值。
      • 这就意味着在箭头函数中使用this，实际上是使用了上一层作用域中的this。
// 传统函数
function multiply(a, b) {
  return a * b;
}

// 箭头函数
const multiply = (a, b) => a * b;

// 传统函数
function printName(name) {
  console.log(`My name is ${name}`);
}

// 箭头函数
const printName = (name) => {
  console.log(`My nam
  • 我们可以看到箭头函数的语法更加简洁
    • 去掉了function关键字和花括号
    • 并且还可以省略return关键字（如果只有一个表达式的话）。
  • 同时，在箭头函数中，在使用this时，它会继承外部作用域的this值，而不是创建自己的this。
  • 需要注意的是，由于箭头函数没有自己的this，因此它也不能被用作构造函数，并且不能使用call、apply和bind方法来改变this的指向。
  • 另外，在箭头函数中也无法使用arguments对象，但可以使用 ...rest 参数来替代。

【2】演示

  • 无参数，无返回值
var f = function () {
    console.log('我是匿名函数')
}
var f = () => {
    console.log('我是匿名函数')
}
f()
  • 有一个参数，没有返回值 ,可以省略括号
var f = function (name) {
    console.log('我是匿名函数', name)
}
var f = name => {
    console.log('我是匿名函数', name)
}
f('dream')
  • 多个参数，不能省略括号
var f = (name, age) => {
    console.log('我是匿名函数', name, age)
}
f('dream', 19)
  • 多个参数，不能省略括号,一个返回值
var f = (name, age) => {
    return name + 'nb'
}

// 简写成  省了return和大括号
var f = (name, age) => name + 'nb'
var res=f('dream', 19)
console.log(res)
  • 一个参数，一个返回值
var f = name => name + 'nb'
var res = f('dream')
console.log(res)