JavaScript中箭头函数

执宁
190 阅读3分钟

持续创作，加速成长！这是我参与「掘金日新计划 · 10 月更文挑战」的第3天，点击查看活动详情

JavaScript 箭头函数

箭头函数是 ES6 版本的 JavaScript 中引入的特性之一。它帮助我们编写常规 JavaScript 函数的简单、干净和紧凑的版本。但它是有限的，不能在所有情况下都使用。

普通函数 ES5

function newUser(name) {
    return "Hello " + name;
}

箭头函数 ES6

const newUser = name => "Hello " + name;

 

箭头函数语法

对于单个参数和表达式

const functionName = argument => expression;

对于多个参数和表达式

const functionName = (arg1, arg2, ...arg3) => {
    console.log(arg1,arg2,arg3);
};

多个参数需要括号()，多行语句需要大括号{}和return

示例 1：不带参数的箭头函数

如果函数不接受任何参数，那么我们应该放置空括号()。

const newUser = () => console.log("Hello");
newUser(); // Hello

示例 2：带一个参数的箭头函数

如果函数只接受一个参数，那么我们可以省略括号()。

const newUser = name => console.log("Hello " + name);
newUser("小明"); // Hello 小明

示例 3：具有多个参数的箭头函数

如果函数接受多个参数，那么我们应该将它们放在括号内()。

const newUser = (name, age) => console.log("姓名:" + name + " 年龄: " + age);
newUser("小明", 22); // 姓名:小明 年龄: 22

示例 4：带有一条语句的箭头函数

如果函数体只有一个语句，那么我们可以省略花括号{}和return关键字。

const newUser = () => console.log("Hello");
newUser(); // Hello

示例 5：具有多个语句的箭头函数

如果函数体有多个语句，那么我们需要将它们放在花括号内{}。

const newUser = (name) => {
    let greeting = "Hello " + name;
    console.log(greeting);
}
newUser("小明"); // Hello 小明

 

this带箭头功能

this与常规函数相比，箭头函数对关键字的处理不同。

具有常规功能

在常规函数内部，this关键字是指调用它的函数。因此this，常规函数中的关键字表示调用该函数的对象。

function User() {
    this.name = '小明',
    this.age = 22,
    this.sayAge = function () {
        console.log(this.age); // 22
        function innerFunc() {
            console.log(this.age); // undefined
            console.log(this); // Window {}
        }
        innerFunc();

    }
}

let newUser = new User();
newUser.sayAge();

输出

22
undefined
Window {}

带箭头功能

this但是，与箭头函数没有绑定。所以对于箭头函数，this关键字总是指定义箭头函数的对象\

function User() {
    this.name = '小明',
    this.age = 22,
    this.sayAge = function () {
        console.log(this.age); // 22
        let innerFunc = () => {
            console.log(this.age); // 22
            console.log(this); // User { name: '小明', age: 22, sayAge: [Function] }
        }

        innerFunc();

    }
}

let newUser = new User();
newUser.sayAge();

输出

22
22
User { name: '小明', age: 22, sayAge: [Function] }

 

参数绑定

常规函数具有arguments绑定，这意味着当您将参数传递给常规函数时，您可以使用arguments关键字访问它们。

例如

function numbers(){
    console.log(arguments)
}
numbers(2, 4, 6); // [Arguments] { '0': 2, '1': 4, '2': 6 }

然而，箭头函数没有它们的arguments对象。当我们尝试访问它时，它会抛出一个错误。 简而言之，箭头函数没有arguments绑定。

例如

let numbers = () => {
    console.log(arguments)
}
numbers(2, 4, 6);
// ReferenceError: Can't find variable: arguments

在大多数情况下，使用传播是使用arguments对象的一个很好的替代方法。

let numbers = (...n) => {
    console.log(n)
}
numbers(2, 4, 6); // [ 2, 4, 6 ]

 

使用箭头函数要避免的事情

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

let User = {
    name : 'Moz',
    age : 22,
    sayAge : () => {
        console.log(this.age);
    }
}
User.sayAge(); // undefined
  1. 不能将箭头功能用作constructor
let User = () => {};
let newUser = new User(); // TypeError: User is not a constructor
  1. 箭头函数无法访问new.target关键字。
  2. 箭头函数不适用于call,apply和bind方法，这些方法通常依赖于建立作用域。

 

结论

有时常规函数的行为是您想要的，如果不是，请使用箭头函数。此外，在 ES6 中引入了箭头函数。某些浏览器可能不支持使用箭头功能。 谢谢阅读！

avatar
文章
阅读
粉丝