Expressions de fonctions JavaScript (tutoriel graphique)-js tutoriel-php.cn

Cet article présente principalement l'explication détaillée et des exemples d'expressions de fonctions JavaScript. Les amis dans le besoin peuvent se référer à

Expressions de fonctions JavaScript

Il existe deux façons de définir une fonction : l'une est une déclaration de fonction et l'autre est une expression de fonction

1.1 Déclaration de fonction

function functionName(arg){
   //函数体
}

Copier après la connexion

Concernant la déclaration de fonction, l'une de ses caractéristiques importantes est la promotion de la déclaration de fonction, ce qui signifie que la déclaration de fonction sera lue avant d'exécuter le code. Cela signifie que la fonction peut être placée après l'instruction qui l'appelle. Comme indiqué ci-dessous :

helloworld(); //在代码执行之前会先读取函数声明
function helloworld(){
  console.log("hello world");
}

Copier après la connexion

1.2 Expression de fonction

var functionName=function(arg){
   //函数体
}

Copier après la connexion

Ceci Le formulaire ressemble à une instruction d'affectation de variable classique, qui crée une fonction et l'attribue à la variable functionName. La fonction créée dans ce cas est appelée fonction anonyme. Parce qu'il n'y a pas d'identifiant après le mot-clé function.

Les expressions de fonction, comme les autres expressions, doivent se voir attribuer une valeur avant utilisation ; le code suivant provoquera une erreur ;

helloworld(); //错误，还未赋值，函数不存在

var helloworld=function(){
  console.log("hello world");
}

Copier après la connexion

Avec les expressions de fonction, nous pouvons attribuer dynamiquement des valeurs aux expressions de fonction ; comme indiqué dans le code suivant :

var helloworld; //声明
if(condition){ //条件
  helloworld=function(){ //赋值
    console.log("hello world"); 
  }
}
else{
  helloworld=function(){ //赋值
    console.log("你好，世界");
  }
}

Copier après la connexion

2. Fonctions récursives

Une fonction récursive est formée lorsqu'une fonction s'appelle par son nom (comme C# et d'autres langages, donc l'idée de base du programme est similaire, mais il existe quelques différences de syntaxe. Bien apprendre une langue (les bases, il sera beaucoup plus facile d'apprendre d'autres choses). Prenez une question d'entretien récursive classique. Les règles pour une série de nombres sont les suivantes : 1, 1, 2, 3, 5, 8, 13, 21, 34... Trouver le 30ème chiffre : Combien, implémenté à l'aide d'un algorithme récursif, le code est le suivant :

   function foo(n) {
      if (n <= 0)
        return 0;
      else if (n > 0 && n <= 2)
        return 1;
      else
        return foo(n - 1) + foo(n - 2);
    }

Copier après la connexion

Bien que cette fonction montre qu'il ne semble y avoir aucun problème, le code suivant peut provoquer des erreurs It :

   var foo1 = foo;
    foo = null;
    console.log(foo1(34));

Copier après la connexion

Le code ci-dessus enregistre d'abord la fonction foo() dans le variable foo1, puis définit la variable foo sur null et le résultat pointe vers la fonction d'origine. Il ne reste qu'une seule référence. Mais lorsque foo1() est appelé ensuite, puisque foo() doit être exécuté et foo est déjà nul, une erreur se produira dans ce cas, l'utilisation de arguments.callee peut résoudre ce problème ; arguments.callee est un pointeur vers la fonction en cours d'exécution, vous pouvez donc l'utiliser pour implémenter des appels récursifs aux fonctions

 function foo(n) {
      if (n <= 0)
        return 0;
      else if (n > 0 && n <= 2)
        return 1;
      else
        return arguments.callee(n - 1) + arguments.callee(n - 2);
    }

Copier après la connexion

Vous pouvez également utiliser des fonctions nommées expression pour obtenir le même résultat. Par exemple :

 var foo = (function f(n) {
      if (n <= 0)
        return 0;
      else if (n > 0 && n <= 2)
        return 1;
      else
        return f(n - 1) + f(n - 2);
    });

Copier après la connexion

3. Fermeture

3.1 La fermeture désigne le droit d'accéder à une autre fonction Une commune La façon de créer des fermetures est de créer une fonction à l’intérieur d’une autre fonction. Pour comprendre les fermetures, vous devez d'abord comprendre la portée des variables spéciales JavaScript. La portée des variables n'est rien de plus que deux types, les variables globales et les variables locales ; écrivons quelques démos pour l'exprimer intuitivement

lisons directement les variables globales à l'intérieur de la fonction :

 var n = 100; //定义一个全局变量
    function fn() {
      console.log(n); //函数内部直接读取全局变量
    }

    fn();

Copier après la connexion

Les variables locales ne peuvent pas être lues directement en dehors de la fonction :

    function fn() {
      var n = 100;
    }

    console.log(n); //n is not defined

Copier après la connexion

Il y a quelque chose à noter ici, Lorsque vous déclarez des variables à l'intérieur d'une fonction, assurez-vous d'utiliser var. Si elle n'est pas utilisée, elle deviendra une variable globale :

 function fn() {
       n = 100;
    }
    fn();
    console.log(n); //100

Copier après la connexion

Parfois, nous en avons besoin. pour obtenir les variables déclarées à l'intérieur de la fonction, vous pouvez donc utiliser la méthode courante de création de fermetures mentionnée ci-dessus pour créer une autre fonction à l'intérieur de la fonction :

   function fn() {
      n = 100;

      function fn1() {
        console.log(n);
      }

      fn1();
    }
    fn(); //100

Copier après la connexion

ci-dessus Dans le code, la fonction fn1 est incluse dans la fonction fn. À ce stade, toutes les variables locales à l'intérieur de fm sont visibles par fn1. Mais l'inverse ne fonctionne pas. Les variables locales à l'intérieur de fn1 sont invisibles pour fn. Il s'agit de la structure unique de « portée de chaîne » du langage Javascript. L'objet enfant recherchera les variables de tous les objets parents niveau par niveau. Par conséquent, toutes les variables de l’objet parent sont visibles par l’objet enfant, mais l’inverse n’est pas vrai.

Il s'avère que fn1 peut lire les variables internes de fn, donc tant que fn1 est utilisé comme valeur de retour, nous pouvons lire les variables de fn en externe

function fn() {
      n = 100;

      function fn1() {
        console.log(n);
      }

      return fn1;
    }
    
    var result=fn();
    result(); //100

Copier après la connexion

Ici fn1 est une fermeture, et une fermeture est une fonction qui peut lire les variables internes d'autres fonctions. Puisque dans le langage Javascript, seules les sous-fonctions d'une fonction peuvent lire les variables locales, les fermetures peuvent être simplement comprises comme des « fonctions définies à l'intérieur d'une fonction ». Ainsi, par essence, la fermeture est un pont reliant l’intérieur de la fonction à l’extérieur de la fonction.

3.2 Le but de la fermeture

Elle a deux utilisations principales L'une est de lire les variables à l'intérieur de la fonction comme mentionné précédemment, et l'autre est de conserver les valeurs de ces variables à. en mémoire. Comme indiqué dans le code suivant :

function fn() {
      n = 100;

      nadd = function () {
        n += 1;
      }

      function fn1() {
        console.log(n);
      }

      return fn1;
    }

    var result = fn();
    result(); //100
    nadd();
    result(); //101

Copier après la connexion

注意：由于闭包函数会携带包含它的函数的作用域，因此会比其他函数占用更多的内存，过度使用闭包可能会导致内存占用过多，所以在退出函数之前，将不使用的局部变量全部删除。

四、块级作用域

块级作用域（又称为私有作用域）的匿名函数的语法如下所示：

(function(){
   //块级作用域
})();

Copier après la connexion

无论在什么地方，只要临时需要一些变量，就可以使用私有作用域，比如：

(function () {
      var now = new Date();
      if (now.getMonth() == 0 && now.getDate() == 1) {
        alert("新年快乐");
      }
    })();

Copier après la connexion

把上面这段代码放到全局作用域中，如果到了1月1日就会弹出“新年快乐”的祝福；这种技术经常在全局作用域中被用在函数外部，从而限制向全局作用域中添加过多的变量和函数。一般来说,我们都应该尽量少向全局作用域中添加变量和函数。在一个由很多开发人员共同参与的大型应用程序中，过多的全局变量和函数很容易导致命名冲突。而通过创建私用作用域，每个开发人员既可以使用自己的变量，又不必担心搞乱全局作用域。

上面是我整理给大家的，希望今后会对大家有帮助。

关于如何优化你的JS代码（图文教程）

畅谈HTML+CSS+JS（详细讲解）

原生JS+AJAX做出三级联动效果（附代码）

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!