Verschiedene gängige Methoden zur Funktionsdefinition in JavaScript_Javascript-Tipps

Dieser Artikel beschreibt verschiedene gängige Funktionsdefinitionsmethoden in JavaScript und stellt sie Ihnen als Referenz zur Verfügung. Die spezifische Analyse lautet wie folgt:

Werfen wir zunächst einen Blick auf die vier häufigsten Funktionsdefinitionen in JavaScript:

Die mit dem Funktionskonstruktor definierte Funktion, der Code lautet wie folgt:

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

Funktionsdeklaration, diese Methode ist auch die gebräuchlichste:

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

Funktionsausdruck, der als anonyme Funktion deklariert und dann einer Variablen zugewiesen wird, eine sehr gängige Methode:

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

Funktionsausdruck, aber die Funktion wird als benannte Funktion deklariert und dann einer Variablen zugewiesen. Sie sieht genauso aus wie die vorherige Methode:

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

Vergleichen wir zunächst die direkte Beziehung zwischen dem Funktionsnamen und der Funktionsvariablen, der die Funktion zugewiesen ist. Um intuitiver zu sein, sprechen wir gerade über die Beziehung zwischen der Funktionsvariablen multiplizieren und dem Funktionsnamen multi :

Der Funktionsname kann nicht geändert werden, im Gegenteil, die Funktionsvariable kann neu zugewiesen werden. Es sollte leicht zu verstehen sein, dass Funktionsvariablen neu zugewiesen werden können. Die Multiplikationsvariable, die wir gerade in unserem vierten Beispiel definiert haben, ist für das Auge nicht angenehm und kann daher wie folgt neu zugewiesen werden:

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

Sofort von der Multiplikation zur Addition umgewandelt. Es ist jedoch nicht möglich, die Funktionsvariable multi zu ändern, solange der Verweis darauf erhalten bleibt. Vielleicht ist es hier nicht einfach, darüber nachzudenken Lesen Sie weiter. Sie sollten es nach und nach verstehen können.

Der Funktionsname kann nicht außerhalb der Funktion verwendet werden. Er ist nur innerhalb des Funktionskörpers sichtbar:

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

Natürlich handelt es sich bei bar hier tatsächlich um einen Funktionsnamen, der jedoch nicht extern aufgerufen werden kann. Zu diesem Zeitpunkt werden sich einige Kinder sicherlich fragen, warum dieses Beispiel immer noch so gut aussieht wie Beispiel 4. Warum nicht die Methode von Beispiel 2 verwenden? Gute Frage, lassen Sie es mich langsam aufschlüsseln.

Wenn wir mit Beispiel 4 fortfahren, können wir sehen, dass der Funktionsname (Multi) und die Funktionsvariable (Multiplikation) nicht identisch sind. Tatsächlich besteht zwischen ihnen überhaupt keine Beziehung, sodass keine Notwendigkeit besteht, sie konsistent zu halten. Apropos: Ich denke, die oben genannten vier Beispiele können auf drei reduziert werden. Die Beispiele 2 und 4 sollten im Wesentlichen gleich sein. Was, glauben Sie es nicht? Hihi, ich muss weiterhin die Wahrheit sagen~lesen Sie weiter~~

Wir haben festgestellt, dass Beispiel 2 im Vergleich zu Beispiel 4 nur die Funktionsvariable var fehlt und Beispiel 3 im Vergleich zu Beispiel 4 nur den Funktionsnamen fehlt. Aus der Perspektive des Phänomens, Beispiel 2 und Beispiel 4 Das Wesentliche ist das Gleiche, der eiserne Beweis lautet wie folgt:

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

Ist es tatsächlich ein unwiderlegbarer Beweis? Kann der Code, der dem obigen Beispiel 2 ähnelt, auf die gleiche Weise wie Beispiel 4 kombiniert und geschrieben werden? Richtig, das ist es, was ich gerade gesagt habe. Es ist nur so, dass die JS-Engine bei der Definition der Funktion in Anwendungsfall 2 einige Dinge für uns erledigt hat, wie zum Beispiel die Deklaration einer Funktion mit dem Namen „multiply“. Definieren Sie stillschweigend eine Funktion namens „multiplizieren“ und weisen Sie sie dann dieser Variablen zu. Wenn wir den Funktionsnamen „multiplizieren“ verwenden, verwenden wir tatsächlich die Variable „multiplizieren“. Ich bin verwirrt ~ Um ehrlich zu sein, bin ich auch verwirrt ~ ~ Kurz gesagt, wenn wir aufrufen, verwenden wir tatsächlich Funktionsvariablen zum Aufrufen, und der Funktionsname kann nicht extern aufgerufen werden, daher habe ich die obige Schlussfolgerung.

Aber es gibt einen kleinen Unterschied, der hier erwähnt werden muss. Der Unterschied zwischen im Funktionsdeklarationsmodus definierten Funktionen und der Konstruktordeklaration oder Funktionsausdrucksdeklaration besteht darin, dass Funktionen im Funktionsdeklarationsmodus aufgerufen werden können, bevor die Funktion definiert wird wird nicht mehr reden, schauen wir uns den Code an:

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

Lassen Sie uns über die vom Konstruktor deklarierte Funktion sprechen. Die auf diese Weise deklarierte Funktion erbt standardmäßig nur den globalen Gültigkeitsbereich Deklarationsmethoden wie folgt:

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程序设计的有一定的借鉴价值。