【补充】箭头函数

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

本文来自互联网用户投稿，文章观点仅代表作者本人，不代表本站立场，不承担相关法律责任。如若转载，请注明出处。 如若内容造成侵权/违法违规/事实不符，请点击【内容举报】进行投诉反馈！