Compréhension approfondie des fonctions en JavaScript

Cet article a pour objectif de fournir des connaissances de base sur toutes les fonctions JavaScript qu'un développeur web doit connaître.

Les fonctions ne sont pas un monde fantastique pour les développeurs de logiciels. Si vos activités quotidiennes impliquent du codage, ne serait-ce qu'un petit peu, alors en fin de compte, vous devez avoir créé/modifié une ou plusieurs fonctions.

En bref, une fonction est simplement un ensemble d'instructions qui effectuent une opération. Une fonction peut avoir certains paramètres d'entrée (utilisés dans le corps de la fonction) et renvoyer une valeur après exécution.

Les fonctions JavaScript ont également ces propriétés, mais ce ne sont pas de simples fonctions normales. Les fonctions JavaScript sont des objets. Vous pouvez consulter l'article que j'ai écrit un jour sur les objets JavaScript, dans lequel j'ai mentionné que presque tout en JavaScript est un objet.

En tant qu'objets, les fonctions JavaScript peuvent avoir des propriétés et d'autres fonctions (méthodes). Jetons un coup d'œil à une définition de fonction typique en JavaScript.

function myNotSoGreatFunc(visitor) {
   console.log("Welcome to Code Morning Mr. " + visitor);
}

C'est vrai. La fonction ci-dessus n'implique rien de grand, car elle accueille simplement les visiteurs du blog. Mais cela montre à quoi ressemblent les fonctions JavaScript. Une définition de fonction commence par le mot-clé function, suivi du nom de la fonction, vide ou entre parenthèses avec paramètres. Le code de fonction réel (instruction JavaScript) est entouré d'une paire d'accolades { }. Pour les fonctions, l'instruction return est facultative. Les fonctions JavaScript renvoient toujours une valeur. Lorsqu'il n'y a pas d'instruction function dans le corps return, alors function renvoie undefined.

Le code suivant appelle une fonction passant le nom du visiteur en paramètre.

myNotSoGreatFunc("Bob Martin");
// Output: 
// Welcome to Code Morning Mr. Bob Martin.

Jusqu'à présent, nous comprenons les caractéristiques très basiques des fonctions. Nous allons maintenant examiner quelques concepts avancés des fonctions JavaScript.

Fonctions anonymes

Les fonctions JavaScript peuvent être anonymes. Cela signifie que vous pouvez omettre le nom de la fonction dans la déclaration de fonction. Cependant, les fonctions doivent être stockées dans des variables.

var addNumbers = function (x, y) { return x + y; }

La syntaxe ci-dessus est également appelée expression de fonction. Vous pouvez utiliser la variable addNumbers comme nom de fonction et appeler la fonction comme ci-dessous.

var sum = addNumbers(2, 3);

Les expressions de fonction sont très pratiques lorsque vous souhaitez passer une fonction en paramètre à une autre fonction. Essayons de comprendre cela à l'aide d'un exemple simple.

var add = function (first, second) { return first + second };
var multiply = function (first, second) { return first * second };

function calculate(fun, a, b) {
    return fun(a, b);
}

J'ai d'abord créé deux fonctions anonymes. Le premier renvoie l’addition de deux nombres et le second renvoie la multiplication de deux nombres. Assez simple, rien à montrer. Ensuite, je définis la fonction calculate, qui accepte une fonction comme premier argument suivie de deux arguments acceptant deux nombres.

Je peux appeler la fonction calculer en passant n'importe quelle fonction comme premier argument.

var sum = calculate(add, 2, 3); // sum = 5
var multiplication = calculate(multiply, 2, 3); // multiplication = 6

Vous pouvez voir à quel point il est facile de passer des fonctions comme arguments. Ce modèle est largement utilisé dans AJAX lorsque vous transmettez une fonction de rappel pour gérer les scénarios de réussite ou d'échec une fois l'appel AJAX terminé.

En savoir plus sur les paramètres

JavaScript est très flexible lorsqu'il s'agit de transmettre ou d'accéder aux paramètres de fonction. Examinons comment les paramètres de fonction peuvent être manipulés.

Paramètres manquants

Lorsqu'une fonction est appelée, la fonction peut avoir moins ou plus de paramètres que requis. Si vous appelez une fonction avec moins d'arguments que ceux déclarés, les arguments manquants sont définis comme non définis.

function callMe(a, b, c) {
   console.log("c is " + typeof c);
}

callMe("Code", "Morning"); 
// Output: "c is undefined"
callMe("Learn", "JavaScript", "Functions"); 
// Output: "c is string"

Objet Arguments

Toutes les fonctions JavaScript ont un objet spécial appelé arguments, qui est le tableau d'arguments transmis lors de l'appel de fonction. Cet objet peut être utilisé pour accéder à des paramètres individuels ou pour obtenir le nombre total de paramètres transmis à une fonction.

function callMe() {
   var i;
   for (i = 0; i < arguments.length; i++) {
      console.log(arguments[i]);
   }
   console.log("Total arguments passed: " + arguments.length);
}

Cette fonction suppose qu'aucun paramètre n'est transmis, mais comme je l'ai dit, vous pouvez transmettre n'importe quel nombre de paramètres à une fonction JavaScript. Je peux appeler cette fonction comme ceci :

callMe("Code", "Morning", "Mr. Programmer");
// Output":
// Code
// Morning
// Mr. Programmer
// Total arguments passed: 3

Chaque argument est accessible en tant qu'élément de tableau à partir de l'objet arguments. Le nombre total de arguments passés à la fonction est disponible à partir de la propriété arguments.length.

Paramètres par défaut

Êtes-vous un programmeur C ou C# ? Avez-vous déjà vu une fonction qui utilise des paramètres par défaut ? Peut-être que vous répondrez oui ! ECMAScript 6 apporte cette fonctionnalité de JavaScript, c'est-à-dire que vous pouvez définir des fonctions avec des paramètres par défaut.

function greetMyVisitors(name, profession = "The cool programmer") {
    alert("Welcome Mr. " + name + ", " + profession);
}

Cette fonction accueille poliment les visiteurs du blog. Il possède deux paramètres name et profession et affiche un message de bienvenue dans la boîte de message. Si aucun argument (ou « non défini ») n'est passé lors de l'appel, le deuxième argument prend la valeur par défaut.

greetMyVisitors("Justin Bieber", "The singer"); 
// Shows the message "Welcome Mr. Justin Bieber, The singer"

greetMyVisitors("Bob Martin"); 
// Shows the message "Welcome Mr. Bob Martin, The cool programmer"

greetMyVisitors("John Papa", undefined); 
// Shows the message "Welcome Mr. John Papa, The cool programmer"

Fonctions imbriquées

Une fonction peut contenir une ou plusieurs fonctions à l'intérieur. Les fonctions internes peuvent à nouveau contenir des fonctions en interne. Jetons un coup d'œil aux opérations suivantes.

function wakeUpAndCode() {
   function wakeUp() {
      console.log("I just woke up");
   }

   function code() {
      console.log("I am ready to code now");
   }

   wakeUp();
   code();
}

wakeUpAndCode();

// Output:
// I just woke up
// I am ready to code now

函数wakeUpAndCode包含两个内部函数wakeUp和code。当调用wakeUpAndCode时，函数主体开始执行函数主体。在外部函数中只有两个可执行语句，调用wakeUp和code的方法。调用wakeUp将执行内部wakeUp函数，这将写入string“I just woke up”到控制台。调用code将会写入“I am ready to code now”string到控制台。

内部函数可以访问所有外部函数的变量和参数。内部函数是函数内部某种private实现，并且不能从外部函数以外被调用。内部函数的使用生成了JavaScript闭包，这个我将另起一篇文章讨论。

立即执行函数表达式（IIFE，发音iffy）

IIFE是被立即调用执行的匿名函数表达式。IIFE看上去像这样：

(function() {
   // Your awesome code here
}());

所有你要做的就是创建一个匿名函数，在函数定义后马上放一对圆括号以调用函数，最后将所有代码封装在另一对圆括号中。最外层的括号将它里面的所有一切转变成一个表达式，因为括号不能包含JavaScript语句。函数定义后面的圆括号则立即调用函数。

IIFE块中定义的任何变量或函数对块而言是本地的，并且不能被这个范围以外的任何代码改变。

看看IIFE的这个例子。此函数没有调用也会自动执行。

(function() {
   console.log("I run on my own.");
}());

只需在plunker中复制并粘贴代码，看看在浏览器控制台中的输出。如果你不知道去哪里找浏览器控制台，那么只要在浏览器窗口中按下F12就会出现开发者工具。跳转console选项卡以查看console.log语句的所有输出。

IIFE是一个在代码中创建局部范围的很好方法。它们可以帮助你保护变量和函数，以避免被应用程序的其他部分更改或覆盖。JavaScript中IIFE的其他优势？它们是如何解决全局范围污染问题的？欢迎点击查看我关于立即执行函数表达式的文章。

构造函数

函数可以充当构造器的角色，并且可以使用构造函数来创建新的对象。这是使JavaScript面向对象的特点之一。使用构造函数的好处是，你将能够通过预定义的属性和方法，创造尽可能多的对象。如果你由此关联到其他语言中的类和对象，那么你做的对。

让我们创建一个带有一些属性和方法的构造函数Programmer。你可以假设它在你最喜欢的语言中是一个类。

function Programmer(name, company, expertise) {
   this.name = name;
   this.company = company;
   this.expertise = expertise;

   this.writeCode = function() {
      console.log("Writing some public static thing..");
   }

   this.makeSkypeCall = function() {
      console.log("Making skype call..");
   }

   this.doSalsa = function() {
      console.log("I'm a programmer, I can only do Gangnam style..");
   }

   this.canWriteJavaScript = function() {
      return expertise === "JavaScript";
   }
}

函数有三个参数，并创建了一个具有三个属性和四种方法的对象。我不认为上面的代码需要任何解释。此外，我可以创建任意数量程序员对象。

var javaProgrammer = new Programmer("Mohit Srivastava", "Infosys", "Java");
var dotnetProgrammer = new Programmer("Atul Mishra", "Prowareness", ".NET");

虽然也可以创建一个使用对象文本语法带有相同属性和方法的对象，但我们需要多次编写相同的代码，这可不是什么伟大的实践。如果你知道编程DRY原则，那么你就不会不赞同我。构造函数使得可以一次定义对象，并创建真正的实例，无论什么时候你想要。

警告！

始终使用new关键字来从构造器创建新的对象。忘记了new而像这个创建一个实例->

var jsProgrammer = Programmer("Douglas Crockford", "Yahoo", "JavaScript")

最终将添加所有属性和方法到全局的window对象，哇哦，这将是太可怕了。原因是，除非明确指定，否则“this”指向全局的window对象。使用new 设置“this”上下文到被创建的当前对象。

然而，有一种变通方法可以来克服这个问题。你可以改变构造函数的实现以使域安全，然后在创建新的对象时，你就可以愉快地忽略new 关键字了。请参见以下修改了的构造函数代码。为了便于查看，我已删除了一些方法。

function Programmer(name, company, expertise) {
   if(!(this instanceof Programmer)) {
      return new Programmer(name, company, expertise);
   }

   this.name = name;
   this.company = company;
   this.expertise = expertise;

   this.writeCode = function() {
      console.log("Writing some public static thing..");
   }
}

if 条件检查了this 对象是否是Programmer的一个实例。如果不是，它会创建一个新的Programmer对象，并通过再次调用构造器返回相同的内容。

注意：你无法在不使用’new’关键字的情况下，在Strict模式下从构造器创建一个新的对象。Strict模式强制一些编码准则，并且在你写的东西不安全的情况下会抛出错误。要启用Strict模式，你只需要添加在你的代码开头添加字符串 ‘use strict’。在Strict模式下运行代码是一个良好的实践。

'use strict'
 function doSomething() { ... }
 ....
 ....

在这篇文章中，我几乎已经涵盖了有关函数的所有内容。函数被认为是JavaScript中的一等公民。理解函数可能是最重要的事情，如果你想掌握JavaScript的话。

欢迎各位指正。

Ce qui précède est le contenu d'une compréhension approfondie des fonctions en JavaScript. Pour plus de contenu connexe, veuillez faire attention au site Web PHP chinois (www.php.cn) !