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

JavaScript10个月前发布 admin
1,787 0

初学者 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

结论

如您所见,声明函数的基础知识很简单——但有更高级的情况可能会变得稍微复杂一些。 了解这些差异是件好事,但新手开发人员可以专注于文章中列出的前几种技术并完成他们的大部分需求。

© 版权声明

相关文章

暂无评论

暂无评论...