【补充】箭头函数

【补充】箭头函数

• 函数写法变简单
• 箭头函数没有自己的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)