ES6 - 箭头函数

ES6 - 箭头函数 首页 / ES6入门教程 / ES6 - 箭头函数

箭头函数是JavaScript的ES6版本中引入的函数之一。与常规函数相比,它可以使您以更简洁的方式创建函数。例如, 该函数

// 函数表达式
let x = function(x, y) {
   return x * y;
}

可以写成

无涯教程网

// 使用箭头函数
let x = (x, y) => x * y;

使用箭头函数。

箭头函数语法

箭头函数的语法为:

let myFunction = (arg1, arg2, ...argN) => {
    statement(s)
}

这里,

  • myFunction是函数的名称
  • arg1,arg2,... argN是函数参数
  • statement是函数体

如果主体具有单个语句或表达式,则可以将箭头函数编写为:

let myFunction = (arg1, arg2, ...argN) => expression

示例1:无参数的箭头函数

如果函数不带任何参数,则应使用空括号。例如,

let greet = () => console.log('Hello');
greet();//Hello

示例2:具有一个参数的箭头函数

如果一个函数只有一个参数,则可以省略括号。例如,

let greet = x => console.log(x);
greet('Hello');//Hello 

示例3:箭头函数作为表达式

您还可以动态创建一个函数并将其用作表达式。例如,

let age = 5;

let welcome = (age < 18) ?
  () => console.log('Baby') :
  () => console.log('Adult');

welcome();//Baby

示例4:多行箭头函数

如果函数主体具有多个语句,则需要将它们放在大括号 {} 中。例如,

let sum = (a, b) => {
    let result = a + b;
    return result;
}

let result1 = sum(5,7);
console.log(result1);//12

箭头函数示例

在常规函数中,this关键字指向调用它的函数。

但是,this与箭头函数无关。箭头函数没有自己的this。因此,每当您调用this时,它都引用其父作用域。例如,

常规函数示例

function Person() {
    this.name = 'Jack',
    this.age = 25,
    this.sayName = function () {

       //这是可以访问的
        console.log(this.age);

        function innerFunc() {

           //this 指的是全局对象
            console.log(this.age);
            console.log(this);
        }

        innerFunc();

    }
}

let x = new Person();
x.sayName();

输出

25
undefined
Window {}

内部箭头函数示例

function Person() {
    this.name = 'Jack',
    this.age = 25,
    this.sayName = function () {

        console.log(this.age);
        let innerFunc = () => {
            console.log(this.age);
        }

        innerFunc();
    }
}

const x = new Person();
x.sayName();

输出

25
25

参数绑定

常规函数具有参数绑定。这就是为什么在将参数传递给常规函数时可以使用arguments关键字访问它们的原因。例如,

let x = function () {
    console.log(arguments);
}
x(4,6,7);//Arguments [4, 6, 7]

箭头函数没有参数绑定。当您尝试使用箭头函数访问参数时,它将给出错误。例如,

let x = () => {
    console.log(arguments);
}

x(4,6,7); 
// ReferenceError: Can't find variable: arguments

要解决此问题,可以使用 Spread 语法。例如,

let x = (...n) => {
    console.log(n);
}

x(4,6,7);//[4, 6, 7]

Promise箭头函数

箭头函数提供了更好的语法来编写promise和回调。例如,

// ES5
asyncFunction().then(function() {
    return asyncFunction1();
}).then(function() {
    return asyncFunction2();
}).then(function() {
    finish;
});

可以写成

无涯教程网

// ES6
asyncFunction()
.then(() => asyncFunction1())
.then(() => asyncFunction2())
.then(() => finish);

注意事项

1. 不应使用箭头函数在对象内部创建方法。

let person = {
    name: 'Jack',
    age: 25,
    sayName: () => {

       //this refers to the global .....
        //
        console.log(this.age);
    }
}

person.sayName();//undefined

2. 不能将箭头函数用作构造函数。例如,

let Foo = () => {};
let foo = new Foo();//TypeError: Foo is not a constructor

注意: ES6 中引入了箭头函数。某些浏览器可能不支持箭头函数的使用。访问 JavaScript箭头函数支持以了解更多信息。

祝学习愉快!(内容编辑有误?请选中要编辑内容 -> 右键 -> 修改 -> 提交!)

技术教程推荐

深入浅出gRPC -〔李林锋〕

编辑训练营 -〔总编室〕

浏览器工作原理与实践 -〔李兵〕

说透区块链 -〔自游〕

大数据经典论文解读 -〔徐文浩〕

攻克视频技术 -〔李江〕

朱涛 · Kotlin编程第一课 -〔朱涛〕

超级访谈:对话毕玄 -〔毕玄〕

B端体验设计入门课 -〔林远宏(汤圆)〕

好记忆不如烂笔头。留下您的足迹吧 :)
1 篇笔记
卡机龙 2023年03月20日 09:56

但是箭头函数没有自己的this,所以不能作为构造函数使用,也不能通过new操作符调用。