7个在 JavaScript 中编写函数的基础知识

JavaScript1年前 (2023)发布 admin

2,128 0 3

初学者 JavaScript 开发人员了解在 JavaScript 中创建函数的三种主要方法。我将从这些开始，然后逐步介绍更多技巧，以便在您获得经验时充分利用您的功能。

01、函数声明

这可能是大多数新开发人员使用的第一个。您只需使用关键字 function 后跟一个名称，括号中的任何参数，然后用花括号括住它的代码。

这是一个简单的例子。

function sayHello(name) {
console.log(“hello, “ + name);
}

sayHello(“Dev”); //hello, Dev

虽然我不会在大多数示例中说明它是如何返回值的，但函数确实可以返回值——甚至是其他函数，如果你愿意的话（我们将在后面讨论嵌套函数）。不过现在，我将仅举一个例子说明如何返回值。

function getHelloMessage(name) {
const message = “hello, “ + name;
return message;
}

const msg = getHelloMessage(“Dev”);
console.log(msg); //hello, Dev

在这个例子中，我在函数的第一行声明了一个消息变量，然后在下一行返回了它的值。这也可以在一行中完成——return “hello,” + name;

02、函数表达式

这一个与上一个非常相似。这次虽然我们声明了一个变量并为其分配了一个函数。在功能上，没有太大变化。在任何一种情况下，我们都有一个可以通过名称调用的函数。

const sayHello = function(name) {
console.log(“hello, “ + name);
}

sayHello(“Dev”); //hello, Dev

03、箭头功能

这个看起来有点不同，在某些（更高级的）情况下实际上也有点不同。这是语法。

const sayHello = (name) => {
console.log(“hello, “ + name);
}

sayHello(“Dev”); //hello, Dev

如您所见，我们使用了简写“=>”来表示它是一个函数，并将使用左侧的参数来执行右侧的代码。如果您将代码包含在同一行中，这种速记语法还暗示了一个返回语句。这使得它成为在调用其他函数时作为匿名函数（没有变量名）包括在内的流行选择，例如这个 Array.filter 操作：

const myArray1 = [0, 1, 3, 4, 5];
const myArray2 = myArray1.filter((value) => value > 3);

console.log(myArray2); // [4,5]

以这种方式定义一个函数确实有一些不同，但这些通常只适用于在另一个函数的范围内使用时，使用 new 关键字（这对这些函数不起作用）或引用内置参数变量（其中此处也不可用）。

04、函数变量

如前面的大多数示例所示，函数基本上像任何其他值一样存储在变量（包括对象属性）中。这意味着我们可以像使用其他变量一样使用它们，例如将它们包含在数组中或将它们作为变量传递给其他函数。

我们在上一节中传递了一个函数参数，所以让我们看一下这里的数组。

const greetEnglish = (name) => console.log(“Hello, “ + name);
const greetSpanish = (name) => console.log(“Hola, “ + name);
const greetFrench = (name) => console.log(“Bonjour, “ + name);

const greetArray = [greetEnglish,greetSpanish,greetFrench];
greetArray.forEach(func => func(“Dev”));

// Hello, Dev
// Hola, Dev
// Bonjour, Dev

说到翻译，如果您的网站需要支持多种语言，我推荐这个简单的 Gatsby 插件。

05、嵌套函数（闭包）

函数可以嵌套在其他函数中。这允许他们访问该外部函数的环境，包括变量。这些通常被称为闭包。这是一个例子。

function outerFunction() {
this.outerVariable = “Hello, “;

this.innerFunction1 = function(name) {
console.log(this.outerVariable + name);
};

this.innerFunction2 = function() {
console.log(“This is innerFunction2”);
};
}

let greeting = new outerFunction();
greeting.innerFunction1(“John”); // Output: Hello, John
greeting.innerFunction2(); // Output: This is innerFunction2

06、函数原型

我们可以使用 prototype 关键字将函数定义为 outerFunction 的一部分，而不是像前面的示例那样使用闭包，如下所示：

function outerFunction() {
this.outerVariable = “Hello, “;
}

outerFunction.prototype.innerFunction1 = function(name) {
console.log(this.outerVariable + name);
};

outerFunction.prototype.innerFunction2 = function() {
console.log(“This is innerFunction2”);
};

let greeting = new outerFunction();
greeting.innerFunction1(“John”); // Output: Hello, John
greeting.innerFunction2(); // Output: This is innerFunction2

最后这两种方法之间有一个重要的区别。在闭包方法中，outerFunction 的每个实例都有自己的内部函数副本，而在原型方法中，内部函数将在 outerFunction 的所有实例之间共享。

因此，如果我们要使用闭包方法创建 outerFunction 的多个实例，每个实例都会有自己唯一的 innerFunction1 和 innerFunction2 副本。

另一方面，如果我们要使用原型方法创建 outerFunction 的多个实例，所有实例将共享相同的 innerFunction1 和 innerFunction2。

07、ES6 类中的函数

虽然它们仍然有其用途，但不可否认，在类出现在 JavaScript 之前，前两种情况更受欢迎。以下是您可以如何在类中重写相同的功能。

class outerFunction {
constructor() {
this.outerVariable = “Hello, “;
}

innerFunction1(name) {
console.log(this.outerVariable + name);
}

innerFunction2() {
console.log(“This is innerFunction2”);
}
}

let greeting = new outerFunction();
greeting.innerFunction1(“John”); // Output: Hello, John
greeting.innerFunction2(); // Output: This is innerFunction2