ホームページ > ウェブフロントエンド > jsチュートリアル > JavaScript関数の上級学習と応用関数サンプルコードの詳細解説

JavaScript関数の上級学習と応用関数サンプルコードの詳細解説

伊谢尔伦
リリース: 2017-07-25 13:35:05
オリジナル
1678 人が閲覧しました

匿名関数と入れ子関数

JavaScript では、匿名関数 (Anonymouse Function) と呼ばれる、名前のない関数を宣言できます。同時に、JavaScript では、入れ子関数と呼ばれる関数を関数内で宣言することもできます。入れ子関数のスコープは親関数全体です。

前の関数宣言セクションでは、匿名関数と入れ子関数の使用について説明しました。匿名関数には名前がないため、コンテキストを汚染する新しい変数が導入されることはなく、新しい変数スコープがもたらされるため、匿名関数になります。地球環境汚染を防ぐための機能が多く使われています。

JavaScript ランタイムには特別なグローバル環境 (グローバル オブジェクト) があり、このオブジェクトにはグローバル関数や変数が格納されており、実際の開発では複数のサードパーティ ライブラリや複数の JS ファイルが使用されることがよくあります。変数または関数の宣言は、コード実行時に混乱を引き起こす可能性があります。たとえば、2 つの js ファイルが続けて導入され、それぞれが内部使用のために独自の関数ログを定義します。2 番目に導入された関数は最初の定義を上書きし、後続の実行でログ関数を呼び出しても問題が発生しない可能性があります。エラーの原因となります。現時点では、匿名関数を使用して js 全体にロジックをラップすると、このエラーを回避できます。この方法は、ほとんどのオープン ソース js ライブラリで使用されています。

(function() { // 匿名函数 
   
 function log(msg) { 
     console.log(msg); 
 } 
   
 // 其他代码 
   
 }()); // 立即执行
ログイン後にコピー

上記のコードは単純な例であり、ログ関数のスコープはこの匿名関数に限定されており、匿名関数は関数式を形成するために一対の括弧で囲まれています。値は関数です。の後に括弧を付けると、関数がすぐに実行され、元のコードが通常どおり実行されることがわかります。ただし、この方法で宣言された関数や var で宣言された変数などは内部的なものであり、匿名関数以外のコードからアクセスすることはできません。一部の関数をインターフェイスとして公開する必要がある場合は、次のようないくつかの方法があります:

 var mylib = (function(global) { 
   
 function log(msg) { 
   console.log(msg); 
 } 
   
 log1 = log;  // 法一:利用没有var的变量声明的默认行为,在log1成为全局变量(不推荐) 
   
 global.log2 = log;  // 法二:直接在全局对象上添加log2属性,赋值为log函数(推荐) 
   
 return {  // 法三:通过匿名函数返回值得到一系列接口函数集合对象,赋值给全局变量mylib(推荐) 
    log: log
 }; 
   
 }(window));
ログイン後にコピー

高次関数

関数がパラメータまたは戻り値として使用される場合、JavaScript ではその関数を高次関数と呼びます。すべての関数は高階関数として使用できます。これは、最初のタイプの関数の特徴でもあります。以下では、これら 2 つの使用方法をそれぞれ分析します。

 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];
ログイン後にコピー

上記のコードは、関数をパラメーターとして別の関数プロセス呼び出しに渡す例を示しています。プロセス関数の実装では、コールバックはブラック ボックスとして扱われ、パラメーターを渡して取得する役割を果たします。戻り値と呼び出しコールバックの具体的な実装は、これまで明確ではありませんでした。 20 行目と 22 行目が実行される場合のみ、コールバックはそれぞれ負または二乗で表され、各要素に対して逆の値または二乗値の演算がそれぞれ実行されます。

 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
ログイン後にコピー

上記のコードは、関数を戻り値として使用する例を示しています。ジェネレーターは自然数生成関数であり、戻り値は自然数生成関数です。ジェネレーターが呼び出されるたびに、結果として無名関数が返されます。この無名関数は、実際に呼び出されるときに、それぞれの自然数を順番に返します。

以上がJavaScript関数の上級学習と応用関数サンプルコードの詳細解説の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

関連ラベル:
ソース:php.cn
このウェブサイトの声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
最新の問題
人気のチュートリアル
詳細>
最新のダウンロード
詳細>
ウェブエフェクト
公式サイト
サイト素材
フロントエンドテンプレート