Apprentissage avancé des fonctions JavaScript et explication détaillée des exemples de codes de fonctions avancées

Fonctions anonymes et fonctions imbriquées

En JavaScript, vous pouvez déclarer une fonction sans nom, appelée fonction anonyme (Anonymouse Function). Dans le même temps, JavaScript permet également de déclarer des fonctions à l'intérieur de fonctions, appelées fonctions imbriquées. La portée d'une fonction imbriquée est la fonction parent entière.

Dans la section précédente sur la déclaration de fonction, nous avons vu une utilisation de fonctions anonymes et de fonctions imbriquées. Puisque les fonctions anonymes n'ont pas de nom, elles n'introduiront pas de nouvelles variables pour polluer le contexte, et apporteront de nouveaux effets de variable. , les fonctions anonymes sont donc souvent utilisées pour prévenir la pollution de l'environnement mondial.

Il existe un environnement global spécial (objet global) dans le runtime JavaScript. Cet objet stocke des fonctions et des variables globales. Dans le développement réel, plusieurs bibliothèques tierces ou plusieurs fichiers js sont souvent utilisés. introduire des déclarations répétées de variables ou de fonctions dans l'objet global, ce qui entraînera une confusion dans l'exécution du code. Par exemple, deux fichiers js sont introduits l'un après l'autre et chacun définit son propre journal de fonction pour un usage interne. La deuxième fonction introduite écrasera la première définition et ne générera aucune erreur. L'appel de la fonction log lors des exécutions ultérieures peut causer des problèmes. provoquant des erreurs. À l'heure actuelle, l'utilisation d'une fonction anonyme pour envelopper la logique dans l'intégralité du js peut éviter cette erreur. Cette méthode a été utilisée par la plupart des bibliothèques js open source.

(function() { // 匿名函数

 function log(msg) {
     console.log(msg);
 }

 // 其他代码

 }()); // 立即执行

Le code ci-dessus est un exemple simple. La portée de la fonction log est limitée à cette fonction anonyme, et la fonction anonyme est entourée d'une paire de parenthèses () pour former une fonction. la valeur de l'expression est une fonction, suivie d'une paire de parenthèses pour indiquer que la fonction sera exécutée immédiatement, permettant au code d'origine d'être exécuté normalement. Cependant, les fonctions déclarées de cette manière, les variables déclarées via var, etc. sont internes et ne sont accessibles par aucun code autre que les fonctions anonymes. Si vous devez exposer certaines fonctions en tant qu'interface, il existe plusieurs méthodes :

var mylib = (function(global) {

function log(msg) {
  console.log(msg);
}

log1 = log;  // 法一：利用没有var的变量声明的默认行为，在log1成为全局变量（不推荐）

global.log2 = log;  // 法二：直接在全局对象上添加log2属性，赋值为log函数（推荐）

return {  // 法三：通过匿名函数返回值得到一系列接口函数集合对象，赋值给全局变量mylib（推荐）
   log: log
};

}(window));

Fonction d'ordre élevé (fonction d'ordre élevé)

Si la fonction est utilisée comme un paramètre ou une valeur de retour Lorsqu'il est utilisé, on l'appelle une fonction d'ordre supérieur. Les fonctions en JavaScript peuvent être utilisées comme fonctions d'ordre supérieur. C'est également une caractéristique du premier type de fonction. Ci-dessous, nous analyserons respectivement ces deux méthodes d’utilisation.

function negative(n) {
  return -n; // 取n的相反值
}

function square(n) {
  return n*n; // n的平方
}

function process(nums, callback) {
  var result = [];

  for(var i = 0, length = nums.length; i < length; i++) {
    result[i] = callback(nums[i]); // 对数组nums中的所有元素传递给callback进行处理，将返回值作为结果保存
  }

  return result;
}

var nums = [-3, -2, -1, 0, 1, 2, 3, 4];
var n_neg = process(nums, negative);
// n_neg = [3, 2, 1, 0, -1, -2, -3, -4];
var n_square = process(nums, square);
// n_square = [9, 4, 1, 0, 1, 4, 9, 16];

Le code ci-dessus montre un exemple de passage d'une fonction en tant que paramètre dans un autre appel de processus de fonction. Dans l'implémentation de la fonction de processus, le rappel est traité comme une boîte noire, chargée de transmettre les paramètres. à lui, puis Obtenez la valeur de retour. L'implémentation spécifique du rappel n'est pas claire avant l'appel. Ce n'est que lorsque les lignes 20 et 22 sont exécutées que le rappel est représenté respectivement par un négatif ou un carré, et l'opération de valeur opposée ou carrée est effectuée sur chaque élément respectivement.

function generator() {
  var i = 0;
  return function() {
    return i++;
  };
}

var gen1 = generator(); // 得到一个自然数生成器
var gen2 = generator(); // 得到另一个自然数生成器
var r1 = gen1(); // r1 = 0
var r2 = gen1(); // r2 = 1
var r3 = gen2(); // r3 = 0
var r4 = gen2(); // r4 = 1

Le code ci-dessus montre un exemple d'utilisation d'une fonction comme générateur de valeur de retour est une fonction génératrice de nombres naturels, et la valeur de retour est une fonction génératrice de nombres naturels. Chaque fois que le générateur est appelé, une fonction anonyme est renvoyée comme résultat. Cette fonction anonyme renvoie tour à tour chaque nombre naturel lorsqu'elle est réellement appelée.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!