Diverses méthodes courantes de définition de fonctions dans les astuces JavaScript_javascript

Cet article détaille diverses méthodes courantes de définition de fonctions en JavaScript et les partage avec vous pour votre référence. L'analyse spécifique est la suivante :

Tout d’abord, examinons les quatre définitions de fonctions les plus courantes en JavaScript :

La fonction définie à l'aide du constructeur Function, le code est le suivant :

var multiply = new Function('x', 'y', 'return x * y;');

Déclaration de fonction, cette méthode est aussi la plus courante :

function multiply(x, y) {
  return x * y;
}

Expression de fonction, déclarée comme fonction anonyme puis affectée à une variable, une manière très courante :

var multiply = function(x, y) {
  return x * y;
}

Expression de fonction, mais la fonction est déclarée comme fonction nommée puis assignée à une variable. Elle ressemble exactement à la méthode précédente :

var multiply = function multi(x, y) {
  return x * y;
}

Comparons d'abord la relation directe entre le nom de la fonction et la variable de fonction à laquelle la fonction est affectée. C'est vraiment déroutant... Pour être plus intuitif, parlons-en à partir de l'exemple 4 tout à l'heure. entre la variable de fonction multiplier et le nom de la fonction multi :

Le nom de la fonction ne peut pas être modifié. Au contraire, la variable de la fonction peut être réaffectée. Il devrait être facile de comprendre que les variables de fonction peuvent être réaffectées. La variable de multiplication que nous venons de définir dans notre quatrième exemple n'est pas agréable à l'œil, elle peut donc être réaffectée comme :

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

Immédiatement transformé de la multiplication à l'addition. Mais il est impossible de modifier la variable de fonction multi. La définition de la fonction est déjà là. Tant que la référence à celle-ci est conservée, elle ne changera pas. Ce n'est peut-être pas facile à comprendre ici. continuez à lire. Vous devriez être capable de le comprendre progressivement.

Le nom de la fonction ne peut pas être utilisé en dehors de la fonction. Il n'est visible qu'à l'intérieur du corps de la fonction. Un exemple très simple :

var foo = function bar() {
  alert('hello');
}
foo(); // 提示“hello”字符串
bar(); // 执行报错，bar未定义

Évidemment, bar ici est bien un nom de fonction, mais il ne peut pas être appelé de l'extérieur. À ce moment-là, certains enfants se demanderont certainement pourquoi cet exemple est toujours aussi beau. C'est le même que l'exemple 4. Pourquoi ne pas utiliser la méthode de l'exemple 2 ? Bonne question, laissez-moi la décomposer lentement.

En continuant avec l'exemple 4, nous pouvons voir que le nom de la fonction (multi) et la variable de la fonction (multiply) ne sont pas identiques. En fait, ils n'ont aucune relation, il n'est donc pas nécessaire de les garder cohérents. En parlant de cela, je pense que les quatre exemples ci-dessus peuvent être réduits à trois. Les exemples 2 et 4 devraient être essentiellement les mêmes. Quoi, tu n'y crois pas ? Hé hé, je dois continuer à dire la vérité~continue à lire~~

Nous avons constaté que par rapport à l'exemple 4, l'exemple 2 ne manque que de la variable de fonction var, et par rapport à l'exemple 4, l'exemple 3 ne manque que du nom de la fonction. Du point de vue du phénomène, l'exemple 2 et l'exemple 4 sont essentiellement. pareil, la preuve à toute épreuve est la suivante :

function foo() {}
alert(foo); // 提示包含“foo”的函数名
var bar = foo;
alert(bar); // 提示依然只包含“foo”的函数名，和bar半毛钱关系都没有

Est-ce effectivement une preuve irréfutable ? Le code similaire à l’exemple 2 ci-dessus peut-il être combiné et écrit de la même manière que l’exemple 4 ? C'est vrai, c'est ce que je viens de dire. L'essence des deux devrait être la même. C'est juste que lors de la définition de la fonction dans le cas d'utilisation 2, le moteur JS a fait certaines choses pour nous, comme déclarer une fonction nommée multiplier, et aussi. défini tranquillement une fonction appelée multiplier. Appelez la variable multiplier, puis attribuez-la à cette variable. Quand nous pensons que lorsque nous utilisons le nom de fonction multiplier, nous utilisons en fait la variable de fonction multiplier I. Je suis confus ~ Pour être honnête, je suis également confus ~ ~ En bref, lorsque nous appelons, nous utilisons en fait des variables de fonction pour appeler, et le nom de la fonction ne peut pas être appelé de l'extérieur, j'ai donc l'inférence ci-dessus.

Mais il y a une petite différence à mentionner ici. La différence entre les fonctions définies en mode de déclaration de fonction et la déclaration de constructeur ou la déclaration d'expression de fonction est que les fonctions en mode de déclaration de fonction peuvent être appelées avant que la fonction ne soit définie...I. ne parle plus, regardons le code :

foo(); // 提示Foo
function foo() {
  alert('Foo');
}
bar(); // 哥们，和上面确实不一样，就不要逞能，这不报错了？提示bar未定义
var bar = function() {
  alert('Bar');
}

Parlons de la fonction déclarée par le constructeur. La fonction déclarée de cette manière n'héritera pas de la portée de la position de déclaration actuelle. Elle n'aura que la portée globale par défaut. Cependant, cela est également disponible dans plusieurs autres fonctions. méthodes de déclaration, comme suit :

function foo() {
  var hi = 'hello';
  //return function() {
  //  alert(hi);
  //};
  return Function('return hi;');
}
foo()(); // 执行效果大家自己跑一下看看

可以想见，用构造函数声明返回的这个函数执行必然报错，因为其作用域（即全局作用域）中没有hi这个变量。

还有一点，就是往往大家要说构造函数方式声明的函数效率要低，这是为什么呢？今天从文档是得知是因为另外3种方式申明的函数只会被解析一次，其实他们存在于闭包中，但是那也只与作用域链有关，函数体是只会被解析一次的。但是构造函数方式呢，每次执行函数的时候，其函数体都会被解析一次，我们可以想想这样声明的函数是一个对象，其中存放了参数以及函数体，每次执行的时候都要先解析一次，参数和函数体，才会执行，这样必然效率低下。具体实验不知道如何做？

最后说一个大家都不怎么注意的地方，什么时候看似函数声明方式的方式却不是函数生命方式（还是这么绕~简单点儿说，就是例2的方式什么时候在不经意间就成其他方式了）：

当成为表达式的一部分，就如同例3和例4。
不再是脚本本身或者函数的“源元素”（source element）。什么是源元素呢？即在脚本中的非嵌套语句或者函数体（A "source element" is a non-nested statement in the script or a function body），例如：

var x = 0;        // source element 
if (x == 0) {      // source element 
  x = 10;        // not a source element, 因为嵌套在了if语句里
  function boo() {}   // not a source element, 因为嵌套在了if语句里
} 
function foo() {     // source element 
  var y = 20;      // source element 
  function bar() {}   // source element 
  while (y == 10) {   // source element 
   function blah() {} // not a source element, 因为嵌套在了while语句里
   y++;        // not a source element, 因为嵌套在了while语句里
  } 
}

源元素的概念大概有了理解，继续刚刚说的函数声明，请看：

// 函数声明
function foo() {} 
  
// 函数表达式
(function bar() {}) 
  
// 函数表达式
x = function hello() {} 
 
if (x) { 
  // 函数表达式
  function world() {} 
}
 
// function statement 
function a() { 
  // function statement 
  function b() {} 
  if (0) { 
   // 函数表达式
   function c() {} 
  } 
}

最后这里说一下我自己的理解，之所以要区分函数声明与非函数声明，因为在我看了，函数声明方式的函数定义，在JS解析引擎执行的时候会将其提前声明，也就是像我们刚刚上面说的那样，可以在函数定义之前使用，实际上是解析引擎在我们使用前已经将其解析了，但是非函数声明式，就像表达式函数声明，JS解析引擎只会把var声明的变量提前定义，此时变量值为undefined，而真正对这个变量的赋值是在代码实际所在位置，因此上述提到报错都是undefined，实际变量已经定义了，只是还没有赋值，JS解析引擎不知道它为函数。

相信本文所述对大家javascript WEB程序设计的有一定的借鉴价值。