在前端开发过程中，函数调用是必不可少的一部分。在 ES6 中，我们不仅可以使用传统的方式来调用函数，还可以使用一些新的语法来优化代码和增强可读性。在本文中，我们将介绍一些 ES6 中的函数调用方式，并提供一些代码示例来帮助你更好地理解这些技术。
基本函数调用
我们先来看一下传统的函数调用方式。在 ES6 之前，当我们需要调用一个函数时，通常会使用以下代码：
function doSomething() {
// some code here
}
doSomething();这段代码首先定义了一个名为 doSomething 的函数，然后调用该函数。这种方式是传统的、常用的 JS 代码风格，因为它可读性好、易于理解。在大多数情况下，这种方式会满足我们的需求。
箭头函数
在 ES6 中，箭头函数是一种新的语法，它使得我们在编写函数时可以更加简洁和直观。箭头函数使用 => 符号来定义函数，下面是一个简单的示例：
const doSomething = () => {
// some code here
}
doSomething();在该例子中，我们定义了一个名为 doSomething 的箭头函数，并调用该函数。箭头函数的优点是可以将函数体放在一行中，这样代码看起来更加简洁。此外，箭头函数中的 this 关键字也具有不同的含义，这将在后文中详细介绍。
参数默认值
在 ES6 中，我们可以为函数的参数指定默认值。这意味着，如果我们调用函数时没有传递参数，函数将使用预定义的默认值作为参数。以下是一个简单的示例：
const doSomething = (name = 'world') => {
console.log(`Hello, ${name}!`);
}
doSomething(); // Hello, world!
doSomething('John'); // Hello, John!在上面的代码中，我们为 doSomething 函数的 name 参数指定了默认值为 'world'。因此，如果我们调用该函数时没有传递参数，函数将使用 'world' 作为参数。此外，如果我们传递一个字符串 'John'，函数将使用 'John' 作为参数。
剩余参数
在函数中，有时候我们需要处理任意数量的参数。在 ES6 中，我们可以使用剩余参数语法来实现这一功能。以下是一个简单的示例：
const doSomething = (a, b, ...args) => {
console.log(a, b, args);
}
doSomething(1, 2, 3, 4, 5); // 1 2 [3, 4, 5]在上面的代码中，我们定义了一个带有三个参数的函数：a、b 和 args。当我们调用该函数时，可以传递任意数量的参数，因为它们都将被存储在 args 参数数组中。
this 关键字
在函数中，this 关键字指向当前函数的上下文。在传统的函数调用方式中，this 指向的是函数本身。但是，在箭头函数中，this 关键字指向的是外部作用域的 this 值。以下是一个简单的示例：
-- -------------------- ---- -------
----- ------ - -
----- -------
--------- -------- -- -
------------------- -- ---- -- ----------------
--
-------------- -- -- -
------------------- -- ---- -- ----------------
-
--
------------------ -- ------ -- ---- -- -----
----------------------- -- ------ -- ---- -- ----------在上面的代码中，我们定义了一个名为 person 的对象，它包含两个函数 sayHello 和 sayHelloArrow。sayHello 函数使用传统的函数声明方式来定义，而 sayHelloArrow 则使用箭头函数。当我们调用 person 对象的 sayHello 时，this 关键字指向的是 person 对象本身，因此它可以访问 name 属性的值。但是，在调用 person 对象的 sayHelloArrow 函数时，this 关键字指向的是全局 this 值，因此它无法访问 person 对象的属性。
箭头函数的简写语法
在箭头函数中，如果只有一个表达式，我们可以省略花括号。例如，以下两个函数是等价的：
const add = (a, b) => {
return a + b;
}
const addShort = (a, b) => a + b;在 addShort 函数中，我们省略了花括号和 return 关键字。这使得代码更加简洁。
总结
在本文中，我们介绍了 ES6 中一些有关函数调用的新特性，包括箭头函数、参数默认值、剩余参数和 this 关键字。我们还提供了一些示例代码来演示这些技术的使用方式。希望本文能够帮助你更好地理解这些 ES6 的特性，从而在日常的前端开发工作中更加得心应手。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/64e85804f6b2d6eab33def69