JavaScript でのさまざまな一般的な関数の定義方法_javascript のヒント

この記事では、JavaScript でのさまざまな一般的な関数定義方法について詳しく説明し、参考のために共有します。具体的な分析は次のとおりです。

まず、JavaScript で最も一般的な 4 つの関数定義を見てみましょう:

Function コンストラクターを使用して定義された関数。コードは次のとおりです:

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

関数宣言。このメソッドも最も一般的なメソッドです:

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

関数式。匿名関数として宣言され、変数に代入されます。これは非常に一般的な方法です:

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

関数式ですが、関数は名前付き関数として宣言され、変数に割り当てられます。これは前のメソッドとまったく同じです:

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

まず、関数名とその関数が割り当てられている関数変数の直接的な関係を比較してみましょう。これは非常にわかりにくいです...より直感的に説明するために、先ほどの例 4 から説明します。関数変数 multiply と関数名 multi の間:

関数名は変更できません。逆に、関数変数は再割り当てできます。関数変数は再割り当てできることは簡単に理解できるはずですが、4 番目の例で定義した乗算変数は見た目に良くないため、次のように再割り当てできます。

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

乗算から加算に即座に変換されます。ただし、関数の変数 multi を変更することはできません。関数の定義が保持されている限り、それは変更されません。最初はこのように考えてください。読んでいくと徐々に理解できるようになるはずです。

関数名は関数の外では使用できません。非常に単純な例:

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

明らかに、ここでの bar は確かに関数名ですが、外部から呼び出すことはできません。このとき、例 4 と同じですが、なぜこの例がまだ優れているのかを尋ねる子供たちが必ずいます。なぜ例 2 の方法を使用しないのですか。良い質問です。ゆっくりと解いてみましょう。

例 4 を続けると、関数名 (multi) と関数変数 (multiply) が同じではないことがわかります。実際、それらにはまったく関係がないため、一貫性を保つ必要はありません。そういえば、上の 4 つの例は 3 つに要約できると思いますが、例 2 と例 4 は本質的に同じであるはずです。信じられないですか？ヒヒ、私は真実を伝え続けなければなりません~読み続けてください~~

例 4 と比較すると、例 2 では関数変数 var が欠落しているだけであり、例 4 と比較して例 3 では関数名が欠落しているだけであることがわかりました。現象の観点から見ると、例 2 と例 4 の本質は次のとおりです。同様に、鉄壁の証明は次のとおりです:

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

それは本当に反駁できない証拠なのでしょうか?上記の例 2 に似たコードを組み合わせて、例 4 と同じように書くことはできますか?そうです、これは私が今言ったことです。ユースケース 2 で関数を定義するときに、JS エンジンが multiply という名前の関数を宣言するなど、いくつかの処理を行っているだけです。 multiply という関数を静かに定義し、それをこの変数に割り当てます。関数名 multiply を使用していると考えると、実際には関数変数 multiply を使用していることになります。混乱しています〜 正直に言うと、私も混乱しています〜 〜つまり、呼び出すとき、実際には関数の変数を使用して呼び出しており、関数名を使用して関数を外部から呼び出すことはできないため、上記の推論を持っています。

ただし、ここで言及すべき小さな違いがあります。関数宣言モードで定義された関数とコンストラクター宣言または関数式宣言の違いは、関数宣言モードの関数は関数が定義される前に呼び出すことができるということです。これ以上は話さないので、コードを見てみましょう:

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

この方法で宣言された関数について説明します。この方法で宣言された関数は、デフォルトではグローバル スコープのみを持ちます。宣言メソッドは次のとおりです:

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