JavaScriptマジック:引数

argumentsは、初心者やアマチュアでさえも、それが「一種の配列ですが、ある種の間違った配列」であることだけを知っている非常に特殊なものです。 実際、多くの興味深い機能があります。 TypeHintingのトピック、デフォルトの引数などのトピックで空想することを提案します。
 (function (foo, bar) { console.log(typeof arguments); // ? arguments[0] = 42; console.log(foo); // ? })(10, 20); 


また、興味深いアイデアライブラリも表示します
 function test (foo, bar) { Args(arguments).defaults(100, 100); return [foo, bar]; }; test( ); // 100, 100 test(15 ); // 15, 100 test(21, 42); // 21, 42 



まず、このトピックで表明されている多くのアイデアが非常に物議を醸していることに注意したいと思います。 私自身はそれらを使用するかどうか確信が持てず、初心者にそれらを使用することを勧めません。

引数とは


これはハッシュです。 var object = {}ような通常のハッシュ
 (function () { console.log( typeof arguments, // object Object.getPrototypeOf(arguments) == Object.prototype // true ) })(); 


配列を作成するのは簡単です:
 var array = Array.prototype.slice.call(arguments, 0); //  ,   : var array = [].slice.call(arguments, 0); 


argumentsに代わってArrayプロトタイプのsliceメソッドを呼び出しarguments

引数に含まれるもの


arguments.length arguments.length関数に渡される引数の数。
 var count = function () { console.log(arguments.length); }; count(); // 0 count(first, second); // 2 


各関数には、ヘッダーで宣言されている要素の数を示すlengthプロパティもあることを忘れないでください。

 function one (foo) {}; function three (foo, bar, qux) {}; console.log( one.length); // 1 console.log(three.length); // 3 


arguments.callee arguments.callee関数自体へのリンク。

 function foo () { console.log(arguments.callee === foo); // true } 


これにより、正しい数の要素が転送されたかどうかを確認できます。

 function test (foo, bar, qux) { return arguments.callee.length === arguments.length; } test(1); // false test(1,2,3); // true 


引数内の引数


argumentsには、渡されたargumentsのリストも含まれます。
 function test (foo, bar) { console.log(foo, bar); // 'a', 'b' console.log(arguments[0], arguments[1]); // 'a', 'b' } test('a', 'b'); 


興味深い部分について。 多くの人は、引数オブジェクトが値ではなく参照を実際に含み、引数と密接に関連していることを知りません:
 (function (foo) { arguments[0] = 42; console.log(foo); // 42! foo = 20; console.log(arguments[0]); // 20 })(5); 


さらに、接続は非常に強力です。

 function foo (qux) { change(arguments); return qux; }; function change(a) { a[0] = 42; } foo(10); // 42 


これから何を得ることができますか?


多くのプログラミング言語には「デフォルト変数」があります。 たとえば、php:
 function ($foo = 30, $bar = 'test') { var_dump($foo); var_dump($bar); } 


javascriptでは、次のようになります。
 function (foo, bar) { if (typeof foo === 'undefined') foo = 30; if (typeof bar === 'undefined') bar = 'test'; console.log(foo, bar); } 


argumentsの機能を知っていると、美しいインターフェイスを作成できます。
 function test(foo, bar) { Args(arguments).defaults(30, 'test'); console.log(foo, bar) } test(); // 30, 'test' 


このコードの使用:
 function Args (args) { if (this instanceof Args) { this.args = args; } else { //     new,    ,      return new Args(args); } }; Args.prototype = { defaults: function () { var defaults = arguments; for (var i = defaults.length; i--;) { if (typeof args[i] === 'undefined') args[i] = defaults[i]; } return this; } }; 


同様に、自動型キャストを実行できます。

 function test(foo) { Args(arguments) .defaults(10) .cast(Number); console.log(foo) } test('0100'); // 100 


またはタイプヒント:

 function test(foo, bar) { Args(arguments).types(Foo, Bar); // code } test(new Foo(), new Bar()); test(1, 2); // Error 


興味深いアイデア-すべての引数が必要であるというメッセージ:

 function test (foo, bar, qux) { Args(arguments).allRequired(); } test(1,2,3); // success test(1,2); // Error: 3 args required, 2 given 


おわりに


これらすべてのアイデアと機会(さらにそれ以上)をライブラリ-Args.jsに設計しました。
TypeHintingのようないくつかのものは、言語のイデオロギーに完全に適合しないことに同意します。 同時に、たとえば、デフォルトは非常に便利なものです、私見。
今のところ、これはプロトタイプです。使用する前に、本当に必要なことを確認してください。美しい言語からC#に似たものを作成しようとするだけではありません。
議論し、コードを批判し、いくつかのバグを見つけ、数行のコードをコミットすることをお勧めします)

Args.js



残念ながら、3つの一般的なブラウザ(IE、 Fx 、Opera)のバグにより、望ましい効果を達成できませんでした。最もおいしいものはChromeでのみ動作しました(少なくとも、node.jsで動作します)。 この問題を一緒に解決してほしい。

UPD :コメントで、彼らはこれがChromeのバグであることがわかりましたが、なんと楽しいバグでしょう! ありがとう、 jamayka

Source: https://habr.com/ru/post/J117868/


All Articles