ホームページ ウェブフロントエンド jsチュートリアル JavaScript の奇妙な引数分析_JavaScript スキル

JavaScript の奇妙な引数分析_JavaScript スキル

May 16, 2016 pm 06:18 PM

各関数には、現在の呼び出しのパラメータを配列のような形式で格納する、arguments という名前の変数があります。また、実際には配列ではありません。typeof argument ステートメントを使用しようとすると、「object」(オブジェクト) が返されるため、Array のような Push や Pop などのメソッドは使用できません。それでも、添え字と長さ属性を使用してその値を取得できます。

柔軟な関数の作成
未知のように思えるかもしれませんが、引数は確かに非常に便利なオブジェクトです。たとえば、関数で可変数の引数を処理させることができます。 Dean Edwards によって作成された Base2 ライブラリには、この機能を最大限に活用する format と呼ばれる関数があります。

Copy code コードは次のとおりです:

function format(string) {
var args = argument;
var pattern = new RegExp("%([1-" argument.length "]) ", "g ");
return String(string).replace(pattern, function(match,index) {
return args[index];
});
};

この関数はテンプレートの置換を実装します。動的に置換したい箇所に %1 ~ %9 タグを使用すると、残りのパラメータがこれらの箇所を順番に置換します。例:

format("And the %1 want to know that who %2 you %3", "papers", "shirt", "wear"); 上記のスクリプトは
「そして新聞社はあなたが誰のシャツを着ているかを知りたがっています。」ここで注意する必要があるのは、フォーマット関数の定義でも、string という名前のパラメーターのみを定義していることです。 Javascript を使用すると、関数自体で定義されたパラメーターの数に関係なく、関数に任意の数のパラメーターを渡し、呼び出された関数の引数オブ​​ジェクトにこれらのパラメーター値を保存できます。

実際の配列に変換します
引数オブジェクトは本当の意味では Javascript 配列ではありませんが、次のコードのように、配列のスライス メソッドを使用して配列に変換できます。 🎜>

コードをコピーします コードは次のとおりです:
var args = Array.prototype.slice.call (arguments);


このように、配列変数 args には、すべての引数オブ​​ジェクトに含まれる値が含まれます。

事前設定されたパラメーターを使用して関数を作成する
引数オブジェクトを使用すると、記述する Javascript コードの量を減らすことができます。以下は、指定した関数名とその他の任意の数のパラメーターに基づいて匿名関数を返す makeFunc という関数です。この匿名関数が呼び出されると、元の呼び出しのパラメーターがマージされ、指定された関数に渡されて実行され、戻り値が返されます。


function makeFunc() {
var args = Array .prototype.slice.call(arguments);
var func = args.shift();
return function() {
return func.apply(null, args.concat(Array.prototype) .slice.call(arguments)));
}
}


makeFunc の最初のパラメータは、呼び出す必要がある関数の名前を指定します (はい、この単純な例ではエラー チェックを行います)、取得後に args から削除します。 makeFunc は、Function オブジェクトの apply メソッドを使用して指定された関数を呼び出す匿名関数を返します。

apply メソッドの最初のパラメータは、基本的に、呼び出される関数のスコープを指定します。ただし、この例では少し複雑に見えるため、 null に設定します。2 番目のパラメーターは、呼び出す関数のパラメーターを指定する配列です。 makeFunc は、呼び出された関数に渡す前に、独自の引数を変換し、匿名関数の引数を連結します。

出力テンプレートが常に同じになる場合がありますが、上記の format 関数を使用して毎回繰り返しパラメーターを指定して保存するには、makeFunc ツールを使用できます。匿名関数を返し、指定したテンプレートの後にコンテンツを自動的に生成します:


var MajorTom = makeFunc(format, "This is Major Tom to Ground Control. I'm %1.");


次のように、majorTom 関数を繰り返し指定できます。 :


majorTom("stepping through the door" );
majorTom (「最も奇妙な方法で浮遊する」);
そして、majorTom 関数が呼び出されるたびに、指定されたテンプレートに最初に指定されたパラメータが入力されます。たとえば、上記のコードは次を返します:
コードをコピーします コードは次のとおりです:

「こちらは地上管制のトム少佐です。私はドアを通り抜けています。
「こちらは地上管制のトム少佐です。私は非常に奇妙な方法で浮かんでいます。

」自己参照機能
これは素晴らしいと思うかもしれませんが、まだ喜ぶ必要はありません。後でもっと大きな驚きがあるでしょう。これ (引数) には、callee という別の非常に便利な属性があります。 argument.callee には、現在呼び出された関数の参照オブジェクトが含まれます。それで、これをどうすればいいでしょうか? argument.callee は、それ自体を呼び出す非常に便利な匿名関数です。

以下にrepeatという名前の関数があり、そのパラメータには関数参照と2つの数値が必要です。最初の数値は実行回数を表し、2 番目の関数は実行間の時間をミリ秒単位で定義します。関連するコードは次のとおりです:
コードをコピー コードは次のとおりです:

関数の繰り返し(fn, 回, 遅延) {
return function() {
if(times-- > 0) {
fn.apply(null, argument);
var args = Array.prototype .slice.call (引数);
var self = argument.callee
setTimeout(function(){self.apply(null,args)},
}; 🎜>}


repeat 関数は、arguments.callee を使用して現在の参照を取得し、それを self 変数に保存し、最初に呼び出された関数を再実行するために匿名関数を返します。最後に、setTimeout と匿名関数を使用して遅延実行を実装します。

簡単な説明として、たとえば、通常のスクリプトで、文字列を提供し、警告ボックスをポップアップ表示する次の単純な関数を記述します。


コードをコピーします コードは次のとおりです。
function comms(s) {
alert(s);


それで、気が変わりました。 2 秒間隔で 3 回実行する関数の「特別バージョン」を作成したいと考えています。次に、私のリピート関数を使用して、次のように実行できます:


コードをコピーします コードは次のとおりです: var somethingWrong =repeat(comms, 3, 2000);
somethingWrong("聞こえますか、トム少佐?");


結果は予想どおりです。警告ボックスは 3 回表示されるたびに 2 秒遅れます。
最後に、たとえ引数があまり使用されず、少し奇妙に見えるかもしれないとしても、上記の素晴らしい関数 (これらだけではありません!) を知っておく価値があります。
このウェブサイトの声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。

ホットな記事タグ

メモ帳++7.3.1

メモ帳++7.3.1

使いやすく無料のコードエディター

SublimeText3 中国語版

SublimeText3 中国語版

中国語版、とても使いやすい

ゼンドスタジオ 13.0.1

ゼンドスタジオ 13.0.1

強力な PHP 統合開発環境

ドリームウィーバー CS6

ドリームウィーバー CS6

ビジュアル Web 開発ツール

SublimeText3 Mac版

SublimeText3 Mac版

神レベルのコード編集ソフト(SublimeText3)

JavaScriptの文字列文字を交換します JavaScriptの文字列文字を交換します Mar 11, 2025 am 12:07 AM

JavaScriptの文字列文字を交換します

jQuery日付が有効かどうかを確認します jQuery日付が有効かどうかを確認します Mar 01, 2025 am 08:51 AM

jQuery日付が有効かどうかを確認します

jQueryは要素のパディング/マージンを取得します jQueryは要素のパディング/マージンを取得します Mar 01, 2025 am 08:53 AM

jQueryは要素のパディング/マージンを取得します

10 jQuery Accordionsタブ 10 jQuery Accordionsタブ Mar 01, 2025 am 01:34 AM

10 jQuery Accordionsタブ

10 jqueryプラグインをチェックする価値があります 10 jqueryプラグインをチェックする価値があります Mar 01, 2025 am 01:29 AM

10 jqueryプラグインをチェックする価値があります

ノードとHTTPコンソールを使用したHTTPデバッグ ノードとHTTPコンソールを使用したHTTPデバッグ Mar 01, 2025 am 01:37 AM

ノードとHTTPコンソールを使用したHTTPデバッグ

jQueryはscrollbarをdivに追加します jQueryはscrollbarをdivに追加します Mar 01, 2025 am 01:30 AM

jQueryはscrollbarをdivに追加します

カスタムGoogle検索APIセットアップチュートリアル カスタムGoogle検索APIセットアップチュートリアル Mar 04, 2025 am 01:06 AM

カスタムGoogle検索APIセットアップチュートリアル

See all articles