ホームページ >ウェブフロントエンド >jsチュートリアル >jsの引数について詳しく解説

jsの引数について詳しく解説

小云云オリジナル: 2018-03-14 16:52:151568ブラウズ

js で関数を呼び出すとき、関数にいくつかのパラメーターを渡すことがよくあります。js は、関数に渡されたすべてのパラメーターを引数と呼ばれるものに保存します。

js 内のすべてのものはオブジェクトであり、配列や文字列関数もオブジェクトです。したがって、この引数と呼ばれるものもオブジェクトであり、その属性名は渡されたパラメータの順序に基づいています。最初のパラメータの属性名は「0」で、2 番目のパラメータの属性名は「0」です。パラメータは '1' などで、現在渡されている関数パラメータの数を格納する length 属性もあります。多くの場合、この種のオブジェクトを配列のようなオブジェクトと呼びます。配列様オブジェクトと配列はどちらもオブジェクトから生まれますが、配列様オブジェクトは兄貴分であり、配列様オブジェクトよりも多くのおもちゃ (メソッド) を持っています。配列様オブジェクトは配列によく似た弟分にすぎません。

ちょっと待って、配列もオブジェクトだと言いましたよね、この配列のようなオブジェクトは何ですか? js は柔軟性が高いので仕方がありません。この配列のようなオブジェクトは、関数に渡されるパラメータを格納するだけでなく、後で 1 つずつ説明する他の属性も持ちます。

配列のようなオブジェクトと配列には多くの共通点があるため、多くの場合、call メソッドを使用して、配列のようなオブジェクトにも配列のメソッドの一部を使用させることができます。これにより、弟が兄と遊ぶことができます。兄弟のおもちゃなど、まだナンセンスではありません。この記事では引数についてのみ説明します。オブジェクトが配列メソッドを呼び出す方法について詳しく知りたい場合は、この記事を参照してください。

引数の属性

次に、ラバか馬かどうか、引数オブジェクトの内容を見てみましょう。

function showargs() {
    console.log( arguments );
}

showargs(1,2,3,4,5);

次に、console.log を使用して引数オブジェクトをコンソールに出力します。ここで、Chrome のコンソールツールは非常に使いやすいと言わなければなりません (宣伝するためにここにいるわけではありません)。

<br/>

ここでは、引数オブジェクトが、渡した 5 つのパラメータを配列の形式で保存し、関数に渡した実際のパラメータの数 (長さ) も保存していることがわかります。そして、引数 object の ==_ proto _== が object を指していることがわかります。これは、それが配列ではなく配列のようなオブジェクトであることも示しています。

このオブジェクトを使用すると、将来関数を作成するときに、すべての仮パラメータにパラメータ名を指定する必要がなく、引数オブジェクトを使用して実際のパラメータを取得できます。すごく便利ですね？
一部の言語では、関数のパラメーター名を指定した後、関数が呼び出されるときに、現在渡されているパラメーターが関数で定義されたパラメーターの数と等しいかどうかが判断され、等しくない場合は、エラーは報告されますが、flexible js (私が言っているわけではありません。js は本当に柔軟です) は、関数に渡されたパラメーターの数が関数で定義されたパラメーターの数と等しいかどうかを検証しません。したがって、（コードの単純さを）誇示するために、異なる関数間でパラメータ名を混同することなく、引数を使用してパラメータを呼び出します。さらに、（コードの厳密性を）誇示するために、引数を使用して、渡されるパラメータの現在の数が必要な数と一致しているかどうかを判断することもできます。

例を示します:

function add() {
    if( arguments.length == 2 ){        return arguments[0] + arguments[1];
    }else{        return &#39;传入参数不合法&#39;;
    }
}

console.log( add(2,3) );
console.log( add(1,2,3) );

結果を見てください:

jsの引数について詳しく解説

最後に、引数には callee という属性があることもわかります。簡単に言えば、この属性は現在の関数への参照を表します。この属性に格納されている呼び出した関数のコードは本当に理解不能です。console.log が再びその才能を発揮するときが来ました。

function showcallee() {
    var a = &#39;这里是代码&#39;;    var b = &#39;这是另一段代码&#39;;    var c = a + b;

    console.log(arguments.callee);    return c;
}
showcallee();

jsの引数について詳しく解説

この結果を見てあなたも私と同じようにショックを受けましたか? これは私が書いたコードではありませんか? argument.callee はこの関数のコードを完全に返します。

引数の素晴らしい使い方

1. 引数を使用してメソッドのオーバーロードを実装します

以下では、引数オブジェクトを使用して、渡されたパラメータの数に関係なく、渡されたパラメータが追加されます。追加したら元に戻します。

function add() {
    var len = arguments.length,       
     sum = 0;    
     for(;len--;)
     {        sum += arguments[len];
    }    return sum;
}console.log( add(1,2,3) );  
 //6console.log( add(1,3) );     
 //4console.log( add(1,2,3,5,6,2,7) );   
 //26

js は弱い型付けの言語であり、オーバーロードのメカニズムがないため、関数を書き換えると、元の関数が直接上書きされます。ここでは、引数を使用して、渡される実際のパラメーターの型と量を決定できます。操作が異なると、異なる値が返されます。

2. argument.callee を使用して再帰を実装します

まず、以前に再帰を実装した方法を見てみましょう

function factorial(num) { 
    if(num<=1) { 
        return 1; 
    }else { 
        return num * factorial(num-1); 
    } 
}

しかし、この関数が匿名関数になると、次のように使用できます。この関数を再帰する呼び出し先。

function factorial(num) { 
    if(num<=1) { 
        return 1; 
    }else { 
        return num * arguments.callee(num-1); 
    } 
}

这个方法虽然好用，但是有一点值得注意，ECMAScript4中为了限制js的灵活度，让js变得严格，新增了严格模式，在严格模式中我们被禁止不使用var来直接声明一个全局变量，当然这不是重点，重点是arguments.callee这个属性也被禁止了。不过这都不是事儿，ES6为我们新增了很多好用的变量声明方式和新的语法糖，作为一个时髦的前端，我们赶紧学习一些ES6的新语法吧。

jsの引数について詳しく解説

引数の属性

引数の素晴らしい使い方

関連記事