diff options
Diffstat (limited to 'files/ja/web/javascript/reference/global_objects/function')
12 files changed, 1811 insertions, 0 deletions
diff --git a/files/ja/web/javascript/reference/global_objects/function/apply/index.html b/files/ja/web/javascript/reference/global_objects/function/apply/index.html new file mode 100644 index 0000000000..10f6c025f7 --- /dev/null +++ b/files/ja/web/javascript/reference/global_objects/function/apply/index.html @@ -0,0 +1,241 @@ +--- +title: Function.prototype.apply() +slug: Web/JavaScript/Reference/Global_Objects/Function/apply +tags: + - Function + - JavaScript + - Method + - apply +translation_of: Web/JavaScript/Reference/Global_Objects/Function/apply +--- +<div>{{JSRef}}</div> + +<p><code><strong>apply()</strong></code> メソッドは、 <code>this</code> 値を指定して関数を呼び出し、 <code>arguments</code> は配列 (または<a href="/ja/docs/Web/JavaScript/Guide/Indexed_collections#Working_with_array-like_objects">配列風オブジェクト</a>) として提供します。</p> + +<div>{{EmbedInteractiveExample("pages/js/function-apply.html")}}</div> + +<div class="hidden">このデモのソースファイルは GitHub リポジトリに格納されています。デモプロジェクトに協力したい場合は、 <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> をクローンしてプルリクエストを送信してください。</div> + +<h2 id="Syntax" name="Syntax">構文</h2> + +<pre class="notranslate"><code><var>func</var></code>.apply(<var>thisArg,</var> [ <var>argsArray</var>])</pre> + +<h3 id="Parameters" name="Parameters">引数</h3> + +<dl> + <dt><code><var>thisArg</var></code></dt> + <dd> + <p><code>this</code> の値で、 <code><var>func</var></code> の呼び出しで提供されます。</p> + + <p>このメソッドで指定した <code>this</code> が必ず呼び出したメソッドで参照されるわけではないことに注意してください。もし呼び出したメソッドが{{jsxref("Strict_mode", "厳格モードではない", "", 1)}}コード内の関数であれば、ここで渡した値が {{jsxref("null")}} もしくは {{jsxref("undefined")}} であった場合はグローバルオブジェクトに置き換えられ、プリミティブ型の変数はボックス化されます。この引数は必須です。</p> + </dd> + <dt><code><var>argsArray</var></code> {{optional_inline}}</dt> + <dd> + <p>1 つの配列風のオブジェクトであり、 <code><var>func</var></code> 関数が呼ぶことになる引数を列挙したものです。関数に引数が渡されない場合は {{jsxref("null")}} または {{jsxref("undefined")}} となります。</p> + + <p>ECMAScript 5 以降ではこれらの値は配列ではなく配列風のオブジェクトを用いる事になりました。後述の{{anch("Browser_compatibility", "ブラウザーの互換性")}}を参照してください。</p> + </dd> +</dl> + +<h3 id="Return_value" name="Return_value">返値</h3> + +<p>指定した <code><strong>this</strong></code> と引数で関数を呼び出した結果が返ります。</p> + +<h2 id="Description" name="Description">解説</h2> + +<div class="note"> +<p><strong>注:</strong> 関数の構文は {{jsxref("Function.call", "call()")}} メソッドとほぼ同じですが、根本的な違いは <code>call()</code> メソッドは<strong>連続した引数のリスト</strong>を受け取るのに対して、 <code>apply()</code> メソッドが<strong>引数の配列を 1 つだけ</strong>受け取るという点です。</p> +</div> + +<div class="note"> +<p><strong>注:</strong> 最初の引数が undefined または null の場合、配列の<a href="/en-US/docs/Web/JavaScript/Reference/Operators/Spread_syntax">スプレッド構文</a>を使用して同様の結果を得ることができます。</p> +</div> + +<p>存在する関数を呼び出す時は通常と異なる <code>this</code> オブジェクトを渡すことができます。<code>this</code> はカレントオブジェクト、呼び出したオブジェクトを参照します。<code>apply</code> を用いることで、新たなオブジェクトのためにそのメソッドを書き直すことなく継承させることができます。</p> + +<p><code>apply</code> は、対応する引数の型を除けば {{jsxref("Function.call", "call()")}} によく似ています。引数のリストの代わりに引数の配列を用いることができます。<code>apply</code> は配列リテラルを引数に用いることもできます。例えば <code><em>func</em>.apply(this, ['eat', 'bananas'])</code> のように利用でき、同様に配列オブジェクトを <code><em>func</em>.apply(this, new Array('eat', 'bananas'))</code> のように利用できます。</p> + +<p><code>argsArray</code> で {{jsxref("Functions/arguments", "arguments")}} を利用することもできます。<code>arguments</code> は関数内のローカル変数です。これは、呼び出されたオブジェクトの不特定の引数すべてに対して用いることができます。つまり、 <code>apply</code> メソッドを使うにあたって呼び出されたオブジェクトの引数について知る必要がないのです。<code>arguments</code> を利用することで、引数のすべてを呼び出されたオブジェクトに渡すことができます。引数の扱いは、呼び出されたオブジェクトが受け持ちます。</p> + +<p>ECMAScript 第5版以降では、配列風のオブジェクトも使えます。具体的には、<code>length</code> プロパティとその範囲 (0 から length-1 まで) の整数の名称のプロパティを持った、あらゆる種類のオブジェクトの利用を認めています。例えば、{{domxref("NodeList")}} や <code>{ 'length': 2, '0': 'eat', '1': 'bananas' }</code> のような独自のオブジェクトを利用できます。</p> + +<div class="note"> +<p><strong>注:</strong> Chrome 14 や Internet Explorer 9 などのブラウザーでは、配列風オブジェクトを扱えずに例外が発生します。</p> +</div> + +<h2 id="例">例</h2> + +<h3 id="Using_apply_to_append_an_array_to_another" name="Using_apply_to_append_an_array_to_another">apply で配列を別の配列に追加する</h3> + +<p><code>push</code> で 1 つの要素を配列に追加できます。そして、<code>push</code> は可変長引数に対応しているので、複数の要素を一度に追加することもできます。</p> + +<p>しかし <code>push</code> に配列を渡すと、配列の要素ごとにではなく配列全体を 1 つの要素として追加してしまいます。配列の中に配列が入るだけなのです。</p> + +<p>それを望まない場合はどうすればいいのでしょう？ <code>concat</code> ならば望みの結果を得られます。しかし、<em>既存</em>の配列に追加するのではなく、新しい配列を生成して返します。</p> + +<p>既存の配列に追加したいのに... では、どうすれば？ループ文を書きますか？おことわりですよね？</p> + +<p><code>apply</code> が救ってくれます！</p> + +<pre class="brush: js notranslate">const array = ['a', 'b']; +const elements = [0, 1, 2]; +array.push.apply(array, elements); +console.info(array); // ["a", "b", 0, 1, 2] +</pre> + +<h3 id="Using_apply_and_built-in_functions" name="Using_apply_and_built-in_functions"><code>apply</code> をビルトイン関数と共に利用する</h3> + +<p><code>apply</code> を賢く使うと、本来なら配列のためにループ文を書かなくてはならないような処理に対して、ビルトイン関数をそのまま使えるようになります。</p> + +<p>下記の例では、配列の最大値・最小値を求めるために <code>Math.max</code>/<code>Math.min</code> を使っています。</p> + +<pre class="brush: js notranslate">// 最小値・最大値を求めたい配列 +const numbers = [5, 6, 2, 3, 7]; + +// Math.min/Math.max と apply を使う +let max = Math.max.apply(null, numbers); +// これは右と同じ Math.max(numbers[0], ...) +// または Math.max(5, 6, ...) + +let min = Math.min.apply(null, numbers); + +// 対して、ループ文を使うとこうなる +max = -Infinity, min = +Infinity; + +for (let i = 0; i < numbers.length; i++) { + if (numbers[i] > max) { + max = numbers[i]; + } + if (numbers[i] < min) { + min = numbers[i]; + } +} +</pre> + +<p>しかし注意してください。この方法で <code>apply</code> を使う場合、 JavaScript エンジンの引数の長さ上限を超えてしまう危険があります。多すぎる (おおよそ数万個以上だと思って下さい) 引数を与えた結果は、その上限が特に決まっていない (本当に任意の巨大なデータのかたまりに対してさえ) ためエンジンによって (JavaScriptCore ライブラリでは<a class="link-https" href="https://bugs.webkit.org/show_bug.cgi?id=80797">引数の上限は 65536 である</a>とハードコーディングされています) 異なります。</p> + +<p>これは、その限界 (実際には、過剰に大きなスタックの挙動の性質さえも) が不特定であるためです。例外を投げるエンジンも存在します。さらに酷い場合では、関数へ実際に渡す引数の数を勝手に制限するものもあります。後者について詳しく解説しますと、そのエンジンの引数の上限が 4 つの場合 (実際の上限値は当然もっと上です)、上の例では、完全な配列でなく <code>5, 6, 2, 3</code> が <code>apply</code> へ渡されたかのような動作をします。</p> + +<p>もし実装しているコードで利用する配列の変数の数が数万を超えそうなときは、以下に示すように一度に apply に渡す配列を分割して利用する方法を併用すべきでしょう。</p> + +<pre class="brush: js notranslate">function minOfArray(arr) { + let min = Infinity; + let QUANTUM = 32768; + + for (var i = 0, len = arr.length; i < len; i += QUANTUM) { + var submin = Math.min.apply(null, + arr.slice(i, Math.min(i+QUANTUM, len))); + min = Math.min(submin, min); + } + + return min; +} + +let min = minOfArray([5, 6, 2, 3, 7]); +</pre> + +<h3 id="Using_apply_to_chain_constructors" name="Using_apply_to_chain_constructors">apply を利用したコンストラクターチェーン</h3> + +<p><code>apply</code> を利用して、Java のように {{jsxref("Operators/new", "constructors")}} の連結を行なうことができます。</p> + +<p>以下に示す例ではグローバルな <code>construct</code> という名称の {{jsxref("Function")}} オブジェクトを作成し、引数のリストの代わりに配列風オブジェクトをコンストラクターと共に利用できるようになります。</p> + +<pre class="brush: js notranslate">Function.prototype.construct = function(aArgs) { + let oNew = Object.create(this.prototype); + this.apply(oNew, aArgs); + return oNew; +}; +</pre> + +<div class="note" style="height: 250px; overflow: auto;"> +<p><strong>注:</strong> 上記で使用している <code>Object.create()</code> メソッドは比較的新しいです。代わりの方法として、以下の例を検討してください。</p> + +<p>{{jsxref("Object/__proto__", "Object.__proto__")}} を利用:</p> + +<pre class="brush: js notranslate">Function.prototype.construct = function (aArgs) { + let oNew = {}; + oNew.__proto__ = this.prototype; + this.apply(oNew, aArgs); + return oNew; +}; +</pre> + +<p><a href="/ja/docs/Web/JavaScript/Closures">クロージャ</a>を利用:</p> + +<pre class="brush: js notranslate">Function.prototype.construct = function(aArgs) { + let fConstructor = this, fNewConstr = function() { + fConstructor.apply(this, aArgs); + }; + fNewConstr.prototype = fConstructor.prototype; + return new fNewConstr(); +};</pre> + +<p>{{jsxref("Function")}} コンストラクターを利用:</p> + +<pre class="brush: js notranslate">Function.prototype.construct = function (aArgs) { + let fNewConstr = new Function(""); + fNewConstr.prototype = this.prototype; + let oNew = new fNewConstr(); + this.apply(oNew, aArgs); + return oNew; +}; +</pre> +</div> + +<p>使用例:</p> + +<pre class="brush: js notranslate">function MyConstructor() { + for (let nProp = 0; nProp < arguments.length; nProp++) { + this['property' + nProp] = arguments[nProp]; + } +} + +let myArray = [4, 'Hello world!', false]; +let myInstance = MyConstructor.construct(myArray); + +console.log(myInstance.property1); // logs 'Hello world!' +console.log(myInstance instanceof MyConstructor); // logs 'true' +console.log(myInstance.constructor); // logs 'MyConstructor' +</pre> + +<div class="note"> +<p><strong>注:</strong> この非ネイティブな <code>Function.construct</code> メソッドはいくつかのネイティブ実装されたコンストラクタ (例えば {{jsxref("Date")}} のような物) と併用できません。このようなケースにおいては {{jsxref("Function.bind")}} メソッドを利用する必要があります。</p> + +<p>例えば <code>[2012, 11, 4]</code> のような配列を {{jsxref("Global_Objects/Date", "Date")}} コンストラクターに利用する事を考えてみてください。この場合では <code>new (Function.prototype.bind.apply(Date, [null].concat([2012, 11, 4])))()</code> のように書く必要があります。</p> + +<p>いずれにせよこれは最適な選択肢とは言えず、実用上はいかなる状況でも用いるべきではないでしょう)</p> +</div> + +<h2 id="Specifications" name="Specifications">仕様書</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">仕様書</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName('ESDraft', '#sec-function.prototype.apply', 'Function.prototype.apply')}}</td> + </tr> + </tbody> +</table> + +<h2 id="Browser_compatibility" name="Browser_compatibility">ブラウザーの互換性</h2> + +<div> +<div class="hidden">このページの互換性一覧表は構造化データから生成されています。データに協力していただけるのであれば、 <a class="external" href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> をチェックアウトしてプルリクエストを送信してください。</div> + +<p>{{Compat("javascript.builtins.Function.apply")}}</p> +</div> + +<h2 id="See_also" name="See_also">関連情報</h2> + +<ul> + <li>{{jsxref("Functions/arguments", "arguments")}} オブジェクト</li> + <li>{{jsxref("Function.prototype.bind()")}}</li> + <li>{{jsxref("Function.prototype.call()")}}</li> + <li>{{jsxref("Functions", "関数と関数スコープ", "", 1)}}</li> + <li>{{jsxref("Reflect.apply()")}}</li> + <li>{{jsxref("Operators/Spread_syntax", "スプレッド構文", "", 1)}}</li> +</ul> diff --git a/files/ja/web/javascript/reference/global_objects/function/arguments/index.html b/files/ja/web/javascript/reference/global_objects/function/arguments/index.html new file mode 100644 index 0000000000..4219b3dde1 --- /dev/null +++ b/files/ja/web/javascript/reference/global_objects/function/arguments/index.html @@ -0,0 +1,66 @@ +--- +title: Function.arguments +slug: Web/JavaScript/Reference/Global_Objects/Function/arguments +tags: + - Deprecated + - Function + - JavaScript + - Property + - arguments +translation_of: Web/JavaScript/Reference/Global_Objects/Function/arguments +--- +<div>{{JSRef}} {{deprecated_header}}</div> + +<p><code><strong><em>function</em>.arguments</strong></code> プロパティは、関数に渡される引数に対応する、配列風のオブジェクトです。より単純な {{jsxref("Functions/arguments", "arguments")}} 変数を使用してください。このプロパティは厳格モードでは使用できません。</p> + +<h2 id="Description" name="Description">解説</h2> + +<p><code><em>function</em>.arguments</code> の構文は非推奨です。関数内で {{jsxref("Functions/arguments", "arguments")}} オブジェクトにアクセスする方法としては、変数 {{jsxref("Functions/arguments", "arguments")}} が利用できます。</p> + +<p>再帰呼び出しの場合、すなわちコールスタックに関数 <code>f</code> が複数回現れる場合に、<code>f.arguments</code> はもっとも直近に実行された関数に対応する引数を表します。</p> + +<p>実行中の関数の未処理の呼び出しがない (つまり、関数が呼び出された状態で返してない) 場合、 arguments プロパティの値は通常 null です。</p> + +<h2 id="Example" name="Example">例</h2> + +<h3 id="Using_the_arguments_object" name="Using_the_arguments_object">arguments オブジェクトの使用</h3> + +<pre class="brush: js notranslate">function f(n) { g(n - 1) } + +function g(n) { + console.log('before: ' + g.arguments[0]) + if (n > 0) { f(n) } + console.log('after: ' + g.arguments[0]) +} + +f(2) + +console.log('returned: ' + g.arguments) + +// Output + +// before: 1 +// before: 0 +// after: 0 +// after: 1 +// returned: null +</pre> + +<h2 id="Specifications" name="Specifications">仕様書</h2> + +<p><span class="pl-s">何れかの標準で定義されたものではありません。</span> ECMAScript 3 で {{jsxref("Functions/arguments", "arguments")}} に置き換えられました。</p> + +<h2 id="Browser_compatibility" name="Browser_compatibility">ブラウザーの互換性</h2> + +<div> +<div class="hidden">このページの互換性一覧表は構造化データから生成されています。データに協力していただけるのであれば、 <a class="external" href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> をチェックアウトしてプルリクエストを送信してください。</div> + +<p>{{Compat("javascript.builtins.Function.arguments")}}</p> +</div> + +<h2 id="See_also" name="See_also">関連情報</h2> + +<ul> + <li>{{jsxref("Functions/arguments", "arguments")}} オブジェクト</li> + <li>{{jsxref("Functions", "関数と関数スコープ", "", 1)}}</li> +</ul> diff --git a/files/ja/web/javascript/reference/global_objects/function/bind/index.html b/files/ja/web/javascript/reference/global_objects/function/bind/index.html new file mode 100644 index 0000000000..1bba8cd72c --- /dev/null +++ b/files/ja/web/javascript/reference/global_objects/function/bind/index.html @@ -0,0 +1,350 @@ +--- +title: Function.prototype.bind() +slug: Web/JavaScript/Reference/Global_Objects/Function/bind +tags: + - ECMAScript 2015 + - ECMAScript 5 + - Function + - JavaScript + - Method + - polyfill +translation_of: Web/JavaScript/Reference/Global_Objects/Function/bind +--- +<div>{{JSRef}}</div> + +<p><span class="seoSummary"><code><strong>bind()</strong></code> メソッドは、呼び出された際に <code>this</code> キーワードに指定された値が設定される新しい関数を生成します。この値は新しい関数が呼び出されたとき、一連の引数の前に置かれます。</span></p> + +<div>{{EmbedInteractiveExample("pages/js/function-bind.html", "taller")}}</div> + +<div class="hidden">このデモのソースファイルは GitHub リポジトリに格納されています。デモプロジェクトに協力したい場合は、 <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> をクローンしてプルリクエストを送信してください。</div> + +<h2 id="Syntax" name="Syntax">構文</h2> + +<pre class="syntaxbox notranslate">let boundFunc = <var>func</var>.bind(<var>thisArg</var>[, <var>arg1</var>[, <var>arg2</var>[, ...<var>argN</var>]]]) +</pre> + +<h3 id="Parameters" name="Parameters">引数</h3> + +<dl> + <dt><code><var>thisArg</var></code></dt> + <dd>バインドされた関数が呼び出される際、 <code>this</code> 引数としてターゲット関数 <code><var>func</var></code> に渡される値です。バインドされた関数が {{jsxref("Operators/new", "new")}} 演算子によって構築された場合、この引数は無視されます。 <code>bind</code> を使用して <code>setTimeout</code> の中で (コールバックとして提供する) 関数を生成する場合、 <code><var>thisArg</var></code> として渡されたプリミティブ値はオブジェクトに変換されます。引数が <code>bind</code> に提供されなかった場合、または <code><var>thisArg</var></code> が <code><var>null</var></code> または <code><var>undefined</var></code> であった場合は、実行スコープの <code>this</code> は新しい関数のための <code><var>thisArg</var></code> として扱われます。</dd> + <dt><code><var>arg1</var>, <var>arg2</var>, ...<var>argN</var></code> {{optional_inline}}</dt> + <dd><code><var>func</var></code> を呼び出す時、バインドされた関数に与えられる引数の前に付けて渡す引数。</dd> +</dl> + +<h3 id="Return_value" name="Return_value">返値</h3> + +<p><strong><code>this</code></strong> の値と初期の引数を指定された関数のコピーです。</p> + +<h2 id="Description" name="Description">解説</h2> + +<p><strong>bind()</strong> 関数は、新しい<strong>バインドされた関数</strong>、すなわち元の関数オブジェクトをラップする<em><ruby>特殊関数オブジェクト<rp> (</rp><rt>exotic function object</rt><rp>) </rp></ruby></em> (ECMAScript 2015 からの用語) を生成します。バインドされた関数を呼び出すと、通常はラップされた関数が実行される結果になります。</p> + +<p>バインドされた関数は、以下の内部プロパティを持ちます。</p> + +<dl> + <dt><strong><code>[[BoundTargetFunction]]</code></strong></dt> + <dd>ラップされた関数オブジェクト</dd> + <dt><code><strong>[[BoundThis]]</strong></code></dt> + <dd>ラップされた関数を呼び出す時に常に <strong>this</strong> に渡される値。</dd> + <dt><code><strong>[[BoundArguments]]</strong></code></dt> + <dd>ラップされた関数を呼び出す時に、その要素が第1引数として使われる値のリスト。</dd> + <dt><code><strong>[[Call]]</strong></code></dt> + <dd>オブジェクトに関連する実行コード。関数呼び出し式を通じて実行される。内部メソッドへの引数は <code>this</code> 値と呼び出し式によって関数に渡される引数を含むリスト。</dd> +</dl> + +<p>バインドされた関数が呼び出されると、内部メソッド <code>[[Call]]</code> を <code>[[BoundTargetFunction]]</code> 上で、 <code>Call(<var>boundThis</var>, ...<var>args</var>)</code> の引数で呼び出します。ここで <code><var>boundThis</var></code> は <code>[[BoundThis]]</code>、 <code><var>args</var></code> は <code>[[BoundArguments]]</code> で、その後に関数呼び出しで渡された引数が続きます。</p> + +<p>バインドされた関数は {{jsxref("Operators/new", "new")}} 演算子でも生成されます。これを行うとターゲット関数が代わりに生成されたようになります。与えられた <code>this</code> の値は無視され、追加された引数はエミュレートされた関数に提供されます。</p> + +<h2 id="Examples" name="Examples">例</h2> + +<h3 id="Creating_a_bound_function" name="Creating_a_bound_function">バインドされた関数の生成</h3> + +<p>最もシンプルな <code>bind()</code> の使い方は、どのように呼び出された場合でも特定の <code>this</code> 値を持つ関数を生成することです。</p> + +<p>初心者の JavaScript プログラマーがよくやる間違いは、あるオブジェクトからメソッドを取り出し、後でその関数を呼び出すとき、その内側の <code>this</code> 値が元のオブジェクトになると考えてしまうことです (例えば、そのメソッドをコールバック関数に使う場合)。</p> + +<p>特に配慮しなければ、ふつうは元のオブジェクトが見えなくなります。その関数に元々のオブジェクトを <code>bind()</code> してバインドされた関数を生成すれば、この問題をきちんと解決することができます。</p> + +<pre class="brush: js notranslate">this.x = 9; // 'this' はここではブラウザーのグローバルな 'window' オブジェクト +const module = { + x: 81, + getX: function() { return this.x; } +}; + +module.getX(); +// 81 を返します + +const retrieveX = module.getX; +retrieveX(); +// 9 を返します。この関数はグローバルスコープで呼び出されるためです。 + +// 'this' を module に結びつけた新しい関数を生成 +// 初心者のプログラマーはグローバル変数の x と +// モジュールプロパティの x とを混同するかもしれません。 +const boundGetX = retrieveX.bind(module); +boundGetX(); +// 81 を返します +</pre> + +<h3 id="Partially_applied_functions" name="Partially_applied_functions">部分的に適用された関数</h3> + +<p>次にシンプルな <code>bind()</code> の使い方は、あらかじめ引数が指定された関数を生成することです。</p> + +<p>これらの引数は、<code>this</code> 値の後に続けます (指定しないことも可能)。すると、バインドされた関数がいつ呼ばれても、この指定された引数を先頭にしてバインドされた関数の引数がターゲット関数に渡されます。</p> + +<pre class="brush: js notranslate">function list() { + return Array.prototype.slice.call(arguments); +} + +function addArguments(arg1, arg2) { + return arg1 + arg2 +} + +const list1 = list(1, 2, 3); +// [1, 2, 3] + +const result1 = addArguments(1, 2); +// 3 + +// 先頭の引数が設定済みの関数を生成します。 +const leadingThirtysevenList = list.bind(null, 37); + +// 第一引数が設定済みの関数を生成します。 +const addThirtySeven = addArguments.bind(null, 37); + +const list2 = leadingThirtysevenList(); +// [37] + +const list3 = leadingThirtysevenList(1, 2, 3); +// [37, 1, 2, 3] + +const result2 = addThirtySeven(5); +// 37 + 5 = 42 + +const result3 = addThirtySeven(5, 10); +// 37 + 5 = 42 +// (the second argument is ignored) +</pre> + +<h3 id="With_setTimeout" name="With_setTimeout"><code>setTimeout</code> での利用</h3> + +<p>既定では、 {{domxref("WindowOrWorkerGlobalScope.setTimeout()", "window.setTimeout()")}} 内部の <code>this</code> キーワードは {{domxref("window")}} (または <code>global</code> オブジェクト) に設定されます。クラスインスタンスを参照する <code>this</code> が必要なクラスメソッドを使う場合、 <code>this</code> をコールバック関数と明確に結びつけて (バインドして)、インスタンスを維持することができます。</p> + +<pre class="brush: js notranslate">function LateBloomer() { + this.petalCount = Math.floor(Math.random() * 12) + 1; +} + +// 1 秒遅延させてから bloom を宣言する +LateBloomer.prototype.bloom = function() { + window.setTimeout(this.declare.bind(this), 1000); +}; + +LateBloomer.prototype.declare = function() { + console.log(`I am a beautiful flower with ${this.petalCount} petals!`); +}; + +const flower = new LateBloomer(); +flower.bloom(); +// after 1 second, calls 'flower.declare()' +</pre> + +<h3 id="Bound_functions_used_as_constructors" name="Bound_functions_used_as_constructors">コンストラクターとして使用するバインドされた関数</h3> + +<div class="warning"> +<p><strong>警告</strong>: この節では、 JavaScript の機能性を実演するため、 <code>bind()</code> メソッドの極端な例を説明しています。</p> + +<p>以下の方法は何かを実現するのに最適な方法ではなく、むしろ本番環境では使用するべきでない方法です。</p> +</div> + +<p>バインドされた関数は自動的に、 {{jsxref("Operators/new", "new")}} 演算子を使ってターゲット関数の新しいインスタンスを構築できるようになっています。新たな値を構築するために束縛された関数を使った場合、 <code>this</code> を与えても無視されます。</p> + +<p>しかし、同時に与える引数はコンストラクター呼び出しの先頭部分に挿入されます:</p> + +<pre class="brush: js notranslate">function Point(x, y) { + this.x = x; + this.y = y; +} + +Point.prototype.toString = function() { + return `${this.x},${this.y}`; +}; + +const p = new Point(1, 2); +p.toString(); +// '1,2' + + +// 以下のポリフィルには対応していません。 + +// ネイティブの bind ではうまく動作します。 + +const YAxisPoint = Point.bind(null, 0/*x*/); + + +const emptyObj = {}; +const YAxisPoint = Point.bind(emptyObj, 0/*x*/); + +const axisPoint = new YAxisPoint(5); +axisPoint.toString(); // '0,5' + +axisPoint instanceof Point; // true +axisPoint instanceof YAxisPoint; // true +new YAxisPoint(17, 42) instanceof Point; // true +</pre> + +<p>バインドされた関数を {{jsxref("Operators/new", "new")}} で使えるように生成するのに特別なことをする必要は無いので注意してください。</p> + +<p>当然、普通に呼び出されるバインドされた関数を生成する際も特別なことは必要ありません。もしその関数を {{jsxref("Operators/new", "new")}} 演算子とともに呼び出すことにしか使いたくないと思っても、普通に呼び出すことはできてしまいます。</p> + +<pre class="brush: js notranslate">// この例は JavaScript コンソールで直接実行できます +// ...上の例のつづき + +// 普通の関数としても実行できます +// (あまり必要にはなりませんが) +YAxisPoint(13); + +`${emptyObj.x},${emptyObj.y}`; +// > '0,13' +</pre> + +<p>バインドされた関数を {{jsxref("Operators/new", "new")}} でしか使えないように制限したい場合、または通常の呼び出しだけに制限したい場合には、ターゲット関数がその制限を強制するようにしなければなりません。</p> + +<h3 id="Creating_shortcuts" name="Creating_shortcuts">ショートカットを作成する</h3> + +<p><code>bind()</code> は、特定の <code>this</code> を必須とするような関数のショートカットを作成するのにも便利です。</p> + +<p>例として、{{jsxref("Array.prototype.slice()")}} を取り上げます。この関数は、配列に似たオブジェクトを本物の配列へ変換するために使えます。まず、次のようにショートカットを作成するとします。</p> + +<pre class="brush: js notranslate">const slice = Array.prototype.slice; + +// ... + +slice.apply(arguments); +</pre> + +<p><code>bind()</code> を使うと、さらにシンプルにできます。</p> + +<p>次のコードでは、 <code>slice()</code> が {{jsxref("Function.prototype")}} の {{jsxref("Function.prototype.apply()", "apply()")}} 関数に結びつけられた関数になり、その内側の <code>this</code> 値は {{jsxref("Array.prototype")}} の{{jsxref("Array.prototype.slice()", "slice()")}} 関数にセットされます。こうすると、いちいち <code>apply()</code> を呼び出す必要がなくなります。</p> + +<pre class="brush: js notranslate">// ひとつ前の例の "slice" と同じ +const unboundSlice = Array.prototype.slice; +const slice = Function.prototype.apply.bind(unboundSlice); + +// ... + +slice(arguments); +</pre> + +<h2 id="Polyfill" name="Polyfill">ポリフィル</h2> + +<p>古いブラウザーは一般的に遅いブラウザーでもあるので、古いブラウザーでのブラウジングを少しでも悪くなくすために、性能の良いポリフィルを作成することは、多くの人が認識しているよりもはるかに重要なことです。</p> + +<p>したがって、 <code>Function.prototype.bind()</code> のポリフィルの選択肢を二つ示します。</p> + +<ol> + <li>最初の方の方がずっと小さくて性能が良いのですが、 <code>new</code> 演算子を使うとうまくいきません。</li> + <li>2 番目の方が大きくて性能が低いですが、<code>new</code>演算子を使ってバインドされた関数を使用することができます。</li> +</ol> + +<p>一般的に、ほとんどのコードでは、バインドされた関数で <code>new</code> が使用されることはとても稀なので、一般的には最初の選択肢を使用するのがベストです。</p> + +<pre class="brush: js notranslate">// Does not work with `new (funcA.bind(thisArg, args))` +if (!Function.prototype.bind) (function(){ + var slice = Array.prototype.slice; + Function.prototype.bind = function() { + var thatFunc = this, thatArg = arguments[0]; + var args = slice.call(arguments, 1); + if (typeof thatFunc !== 'function') { + // closest thing possible to the ECMAScript 5 + // internal IsCallable function + throw new TypeError('Function.prototype.bind - ' + + 'what is trying to be bound is not callable'); + } + return function(){ + var funcArgs = args.concat(slice.call(arguments)) + return thatFunc.apply(thatArg, funcArgs); + }; + }; +})();</pre> + +<p>以下のコードをスクリプトの先頭に挿入すれば、その状況をいくらか変えることができます。ネイティブで対応されていない実装において、 <code>bind()</code> の多くの機能を使えるようになります。</p> + +<pre class="brush: js notranslate">// Yes, it does work with `new (funcA.bind(thisArg, args))` +if (!Function.prototype.bind) (function(){ + var ArrayPrototypeSlice = Array.prototype.slice; + Function.prototype.bind = function(otherThis) { + if (typeof this !== 'function') { + // closest thing possible to the ECMAScript 5 + // internal IsCallable function + throw new TypeError('Function.prototype.bind - what is trying to be bound is not callable'); + } + + var baseArgs= ArrayPrototypeSlice.call(arguments, 1), + baseArgsLength = baseArgs.length, + fToBind = this, + fNOP = function() {}, + fBound = function() { + baseArgs.length = baseArgsLength; // reset to default base arguments + baseArgs.push.apply(baseArgs, arguments); + return fToBind.apply( + fNOP.prototype.isPrototypeOf(this) ? this : otherThis, baseArgs + ); + }; + + if (this.prototype) { + // Function.prototype doesn't have a prototype property + fNOP.prototype = this.prototype; + } + fBound.prototype = new fNOP(); + + return fBound; + }; +})(); +</pre> + +<p>このアルゴリズムと仕様上のアルゴリズムとの間には、いくつか大きな違いがあります (真剣に網羅することを目指したわけではないので、他にも差はあるかもしれません)。</p> + +<ul> + <li>この部分的な実装は、 {{jsxref("Array.prototype.slice()")}}, {{jsxref("Array.prototype.concat()")}}, {{jsxref("Function.prototype.call()")}}, {{jsxref("Function.prototype.apply()")}} という、それぞれオリジナルの値を持つ組み込みメソッドに依存している。</li> + <li>この不完全な実装がつくり出す関数は、不変の (immutable) "poison pill" {{jsxref("Function.caller", "caller")}} プロパティと <code>arguments</code> プロパティ (get, set, delete の際に {{jsxref("Global_Objects/TypeError", "TypeError")}} を投げる{{訳注("strict mode での話をしているようだ")}}) を持たない ({{jsxref("Object.defineProperty")}} をサポートする実装の上ではこれを追加することができる。あるいは {{jsxref("Object.__defineGetter__", "__defineGetter__")}} と {{jsxref("Object.__defineSetter__", "__defineSetter__")}} に対応する実装上でも部分的に実装可能だが、 delete の際に例外を投げるようにはできない)。</li> + <li>この不完全な実装は <code>prototype</code> プロパティを持つ関数をつくり出す (正規の束縛された関数には存在しない)。</li> + <li>この不完全な実装でつくられた束縛された関数の <code>length</code> プロパティは、 ECMA-262 で示されているものと一致しない。この実装がつくる関数の <code>length</code> は常に 0 だが、完全な実装においては、ターゲット関数と先行定義引数の長さ次第で、0 ではない長さになりうる。</li> + <li>この部分的な実装では、生成されたバインドされた関数の {{jsxref("Function.name", "name")}} プロパティが元の関数名から派生したものではありません。 ECMA-262 によれば、返されるバインドされた関数の名前は "bound " + ターゲット関数の名前です (空白文字に注意してください)。</li> +</ul> + +<p>この部分的な実装を使用することを選択した場合、<strong>ECMA-262 第5版から動作が逸脱している場合には、それに頼ってはいけません!</strong> ありがたいことに、このような仕様からの逸脱は、ほとんどのコーディングの状況では (今までにも) ほとんど出てきません。上記の仕様からの逸脱を理解していない場合は、この特定のケースでは、これらの非準拠の逸脱の詳細を気にしないのが安全です。</p> + +<p>どうしても必要で、性能が気にならない場合は、はるかに遅い (しかし、より仕様に準拠した) 解決法が <a href="https://github.com/Raynos/function-bind">https://github.com/Raynos/function-bind</a> にあります。</p> + +<h2 id="Specifications" name="Specifications">仕様書</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">仕様書</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName('ESDraft', '#sec-function.prototype.bind', 'Function.prototype.bind')}}</td> + </tr> + </tbody> +</table> + +<h2 id="Browser_compatibility" name="Browser_compatibility">ブラウザーの互換性</h2> + +<div> +<div class="hidden">このページの互換性一覧表は構造化データから生成されています。データに協力していただけるのであれば、 <a class="external" href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> をチェックアウトしてプルリクエストを送信してください。</div> + +<p>{{Compat("javascript.builtins.Function.bind")}}</p> +</div> + +<h2 id="See_also" name="See_also">関連情報</h2> + +<ul> + <li>{{jsxref("Function.prototype.apply()")}}</li> + <li>{{jsxref("Function.prototype.call()")}}</li> + <li>{{jsxref("Functions", "Functions", "", 1)}}</li> +</ul> diff --git a/files/ja/web/javascript/reference/global_objects/function/call/index.html b/files/ja/web/javascript/reference/global_objects/function/call/index.html new file mode 100644 index 0000000000..22febfb7f2 --- /dev/null +++ b/files/ja/web/javascript/reference/global_objects/function/call/index.html @@ -0,0 +1,181 @@ +--- +title: Function.prototype.call() +slug: Web/JavaScript/Reference/Global_Objects/Function/call +tags: + - Call + - Function + - JavaScript + - Method + - メソッド +translation_of: Web/JavaScript/Reference/Global_Objects/Function/call +--- +<div>{{JSRef}}</div> + +<p><span class="seoSummary"><code><strong>call()</strong></code> メソッドは、 <code>this</code> の値と、独立して提供された引数によって関数を呼び出します。</span></p> + +<div>{{EmbedInteractiveExample("pages/js/function-call.html")}}</div> + +<p class="hidden">このデモのソースファイルは GitHub リポジトリに格納されています。デモプロジェクトに協力したい場合は、 <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> をクローンしてプルリクエストを送信してください。</p> + +<h2 id="Syntax" name="Syntax">構文</h2> + +<pre class="syntaxbox notranslate"><var>func</var>.call([<var>thisArg</var>[, <var>arg1</var>, <var>arg2</var>, ...<var>argN</var>]])</pre> + +<h3 id="Parameters" name="Parameters">引数</h3> + +<dl> + <dt><code><var>thisArg</var></code> {{optional_inline}}</dt> + <dd> + <p><code><var>func</var></code> が呼び出されたときに <code>this</code> として使用される値です。</p> + + <div class="blockIndicator note"> + <p><strong>注意:</strong> 特定の場面では、 <code><var>thisArg</var></code> はメソッドから見える実際の値でない場合があります。</p> + + <p>もし、そのメソッドが{{jsxref("Strict_mode", "厳格モード", "", 1)}}の関数ではなかった場合、 {{jsxref("Global_Objects/null", "null")}} と {{jsxref("Global_Objects/undefined", "undefined")}} はグローバルオブジェクトで置き換えられ、プリミティブ値はオブジェクトに変換されます。</p> + </div> + </dd> + <dt><code><var>arg1</var>, <var>arg2</var>, ...<var>argN</var></code> {{optional_inline}}</dt> + <dd>呼び出し先の関数に渡される引数です。</dd> +</dl> + +<h3 id="Return_value" name="Return_value">返値</h3> + +<p><code><strong>this</strong></code> の値と引数を指定して関数を呼び出した結果です。</p> + +<h2 id="Description" name="Description">解説</h2> + +<p><code>call()</code> はあるオブジェクトに所属する関数やメソッドを、別なオブジェクトに割り当てて呼び出すことができます。</p> + +<p><code>call()</code> は関数やメソッドに <code>this</code> の新しい値を提供します。 <code>call()</code> によって、いったんメソッドを書いてから、新しいオブジェクトへメソッドを描き直さずに他のオブジェクトへと継承することができます。</p> + +<div class="blockIndicator note"> +<p><strong>注:</strong> このメソッドの構文は {{jsxref("Function.prototype.apply", "apply()")}} とほぼ同じですが、基本的な違いは <code>call()</code> が<strong>引数リスト</strong>を受け取るのに対して、 <code>apply()</code> は<strong>引数の単一の配列</strong>を受け取る点です。</p> +</div> + +<h2 id="Examples" name="Examples">例</h2> + +<h3 id="Using_call_to_chain_constructors_for_an_object" name="Using_call_to_chain_constructors_for_an_object">call メソッドを使用してオブジェクトのコンストラクターを連鎖させる</h3> + +<p><code>call</code> を使用して (Java と同様に) オブジェクトのコンストラクターを連鎖させることができます。</p> + +<p>下記の例では、 <code>Product</code> オブジェクトのコンストラクターは <code>name</code> と <code>price</code> の二つの引数で定義されています。</p> + +<p>他の <code>Food</code> と <code>Toy</code> の二つの関数は、 <code>Product</code> を呼び出して <code>this</code> と <code>name</code> と <code>price</code> を渡します。 <code>Product</code> は <code>name</code> と <code>price</code> プロパティを初期化し、どちらも特化した関数が <code>category</code> を定義します。</p> + +<pre class="brush: js notranslate">function Product(name, price) { + this.name = name; + this.price = price; +} + +function Food(name, price) { + Product.call(this, name, price); + this.category = 'food'; +} + +function Toy(name, price) { + Product.call(this, name, price); + this.category = 'toy'; +} + +const cheese = new Food('feta', 5); +const fun = new Toy('robot', 40); +</pre> + +<h3 id="Using_call_to_invoke_an_anonymous_function" name="Using_call_to_invoke_an_anonymous_function">call メソッドを使用した無名関数の呼び出し</h3> + +<p>次の例では、無名関数を作成して <code>call</code> を使用して配列内の各オブジェクトに対して呼び出しを行います。</p> + +<p>ここでの無名関数の主な目的は、 print 関数をすべてのオブジェクトに追加することで、配列内のオブジェクトの正しいインデックスを表示できるようにします。実際には <code>this</code> の値としてオブジェクトを渡す必要ありませんが、例示の目的で使用しています。</p> + +<div class="blockIndicator note"> +<p>オブジェクトを <code>this</code> の値として渡すことは厳密には必要ではありませんが、説明のために使用しました。</p> +</div> + +<pre class="brush: js notranslate">const animals = [ + { species: 'Lion', name: 'King' }, + { species: 'Whale', name: 'Fail' } +]; + +for (let i = 0; i < animals.length; i++) { + (function(i) { + this.print = function() { + console.log('#' + i + ' ' + this.species + + ': ' + this.name); + } + this.print(); + }).call(animals[i], i); +} +</pre> + +<h3 id="Using_call_to_invoke_a_function_and_specifying_the_context_for_this" name="Using_call_to_invoke_a_function_and_specifying_the_context_for_'this'">call を使用した関数を呼び出しと 'this' のコンテキストの指定</h3> + +<p>次の例では、<code>greet</code> メソッドを呼ぶとき、<code>this</code> の値を <code>obj</code> オブジェクトにバインドしています。</p> + +<pre class="brush: js notranslate">function greet() { + const reply = [this.animal, 'typically sleep between', this.sleepDuration].join(' '); + console.log(reply); +} + +const obj = { + animal: 'cats', sleepDuration: '12 and 16 hours' +}; + +greet.call(obj); // cats typically sleep between 12 and 16 hours +</pre> + +<h3 id="Using_call_to_invoke_a_function_and_without_specifying_the_first_argument" name="Using_call_to_invoke_a_function_and_without_specifying_the_first_argument"><code>call</code> を使用した最初の引数を指定しない関数の呼び出し</h3> + +<p>下記の例では、 <code>display</code> 関数を、最初の引数を渡さずに呼び出しています。最初の引数が渡されないと、 <code>this</code> の値はグローバルオブジェクトに結び付けられます。</p> + +<pre class="brush: js notranslate">var sData = 'Wisen'; + +function display() { + console.log('sData value is %s ', this.sData); +} + +display.call(); // sData value is Wisen</pre> + +<div class="note"> +<p><strong>注:</strong> 厳格モードでは <code>this</code> の値は <code>undefined</code> になります。以下を参照してください。</p> +</div> + +<pre class="brush: js notranslate">'use strict'; + +var sData = 'Wisen'; + +function display() { + console.log('sData value is %s ', this.sData); +} + +display.call(); // undefined の 'sData' のプロパティは読めない</pre> + +<h2 id="Specifications" name="Specifications">仕様書</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">仕様書</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName('ESDraft', '#sec-function.prototype.call', 'Function.prototype.call')}}</td> + </tr> + </tbody> +</table> + +<h2 id="Browser_compatibility" name="Browser_compatibility">ブラウザーの互換性</h2> + +<div class="hidden">このページの互換性一覧表は構造化データから生成されています。データに協力していただけるのであれば、 <a class="external" href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> をチェックアウトしてプルリクエストを送信してください。</div> + +<p>{{Compat("javascript.builtins.Function.call")}}</p> + +<h2 id="See_also" name="See_also">関連情報</h2> + +<ul> + <li>{{jsxref("Function.prototype.bind()")}}</li> + <li>{{jsxref("Function.prototype.apply()")}}</li> + <li> + <p><a href="/ja/docs/Web/JavaScript/Introduction_to_Object-Oriented_JavaScript">オブジェクト指向 JavaScript 入門</a></p> + </li> +</ul> diff --git a/files/ja/web/javascript/reference/global_objects/function/caller/index.html b/files/ja/web/javascript/reference/global_objects/function/caller/index.html new file mode 100644 index 0000000000..0261d4f48d --- /dev/null +++ b/files/ja/web/javascript/reference/global_objects/function/caller/index.html @@ -0,0 +1,84 @@ +--- +title: Function.caller +slug: Web/JavaScript/Reference/Global_Objects/Function/caller +tags: + - Deprecated + - Function + - JavaScript + - Property +translation_of: Web/JavaScript/Reference/Global_Objects/Function/caller +--- +<div>{{JSRef}} {{deprecated_header}}</div> + +<p><strong><code><var>function</var>.caller</code></strong> プロパティは、指定した関数の呼び出し元の関数を返します。厳格モード、非同期関数、ジェネレーター関数の呼び出し元については <code>null</code> を返します。</p> + +<h2 id="Description" name="Description">解説</h2> + +<p>関数 <code>f</code> が最上位のコードで呼び出された場合、 <code>f.caller</code> の値は {{jsxref("null")}} に、それ以外の場合の値は <code>f</code> を呼び出した関数になります。厳格モード、非同期関数、ジェネレーター関数の呼び出し元についても <code>null</code> を返します。</p> + +<p>このプロパティは、廃止された {{jsxref("Functions/arguments", "arguments")}} オブジェクトの {{jsxref("Functions/arguments/caller", "arguments.caller")}} プロパティを置き換えます。</p> + +<p>特殊プロパティである <code>__caller__</code> は呼び出し元の activation オブジェクトを返し、スタックの再現に利用できましたが、セキュリティ上の理由により削除されました。</p> + +<h3 id="Notes" name="Notes">注</h3> + +<p>再帰呼び出しの場合、このプロパティを用いてコールスタックを再現することはできません。以下について考えてみましょう。</p> + +<pre class="brush: js notranslate">function f(n) { g(n - 1); } +function g(n) { if (n > 0) { f(n); } else { stop(); } } +f(2); +</pre> + +<p><code>stop()</code> が呼び出された時点のコールスタックは以下のようになるでしょう。</p> + +<pre class="brush: js notranslate">f(2) -> g(1) -> f(1) -> g(0) -> stop() +</pre> + +<p>以下は真になります。</p> + +<pre class="brush: js notranslate">stop.caller === g && f.caller === g && g.caller === f +</pre> + +<p>従って、<code>stop()</code> 関数のスタックトレースを以下のようにして取得するとします。</p> + +<pre class="brush: js notranslate">var f = stop; +var stack = 'Stack trace:'; +while (f) { + stack += '\n' + f.name; + f = f.caller; +} +</pre> + +<p>これは無限ループになります。</p> + +<h2 id="Examples" name="Examples">例</h2> + +<h3 id="Checking_the_value_of_a_functions_caller_property" name="Checking_the_value_of_a_functions_caller_property">関数の caller プロパティの値を確認する</h3> + +<p>以下のコードは、関数の <code>caller</code> プロパティの値を確認します。</p> + +<pre class="brush: js notranslate">function myFunc() { + if (myFunc.caller == null) { + return 'The function was called from the top!'; + } else { + return 'This function\'s caller was ' + myFunc.caller; + } +} +</pre> + +<h2 id="Specifications" name="Specifications">仕様書</h2> + +<p>いずれの標準仕様でも定義されていません。</p> + +<h2 id="Browser_compatibility" name="Browser_compatibility">ブラウザーの互換性</h2> + +<div class="hidden">このページの互換性一覧表は構造化データから生成されています。データに協力していただけるのであれば、 <a class="external" href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> をチェックアウトしてプルリクエストを送信してください。</div> + +<p>{{Compat("javascript.builtins.Function.caller")}}</p> + +<h2 id="See_also" name="See_also">関連情報</h2> + +<ul> + <li>{{jsxref("Function.name", "Function.name")}}</li> + <li>{{jsxref("Functions/arguments", "arguments")}}</li> +</ul> diff --git a/files/ja/web/javascript/reference/global_objects/function/displayname/index.html b/files/ja/web/javascript/reference/global_objects/function/displayname/index.html new file mode 100644 index 0000000000..d197df7952 --- /dev/null +++ b/files/ja/web/javascript/reference/global_objects/function/displayname/index.html @@ -0,0 +1,90 @@ +--- +title: Function.displayName +slug: Web/JavaScript/Reference/Global_Objects/Function/displayName +tags: + - Function + - JavaScript + - Non-standard + - Property +translation_of: Web/JavaScript/Reference/Global_Objects/Function/displayName +--- +<div>{{JSRef}} {{non-standard_header}}</div> + +<p><strong><code><var>function</var>.displayName</code></strong> プロパティは、関数の表示名を返します。</p> + +<h2 id="Examples" name="Examples">例</h2> + +<h3 id="Setting_a_displayName" name="Setting_a_displayName">displayName の設定</h3> + +<p>通常、コンソールやプロファイラーでは関数名を表示するのに {{jsxref("Function.name", "func.name")}} よりも好まれます。</p> + +<p>以下のものをコンソールに入力すると、 "<code>function My Function()</code>" のように表示されます。</p> + +<pre class="brush: js notranslate">var a = function() {}; +a.displayName = 'My Function'; + +a; // "function My Function()"</pre> + +<p><code>displayName</code> プロパティが定義されると、関数の表示名が返されます。</p> + +<pre class="brush: js notranslate">function doSomething() {} + +console.log(doSomething.displayName); // "undefined" + +var popup = function(content) { console.log(content); }; + +popup.displayName = 'Show Popup'; + +console.log(popup.displayName); // "Show Popup" +</pre> + +<h3 id="Defining_a_displayName_in_function_expressions" name="Defining_a_displayName_in_function_expressions">関数式の displayName の定義</h3> + +<p>{{jsxref("Functions_and_function_scope", "関数式", "", 1)}}内で、関数と同時に表示名を定義できます。</p> + +<pre class="brush: js notranslate">var object = { + someMethod: function() {} +}; + +object.someMethod.displayName = 'someMethod'; + +console.log(object.someMethod.displayName); // logs "someMethod" + +try { someMethod } catch(e) { console.log(e); } +// ReferenceError: someMethod is not defined +</pre> + +<h3 id="Changing_displayName_dynamically" name="Changing_displayName_dynamically">動的な displayName の変更</h3> + +<p>関数の <code>displayName</code> を動的に変更できます。</p> + +<pre class="brush: js notranslate">var object = { + // anonymous + someMethod: function(value) { + arguments.callee.displayName = 'someMethod (' + value + ')'; + } +}; + +console.log(object.someMethod.displayName); // "undefined" + +object.someMethod('123') +console.log(object.someMethod.displayName); // "someMethod (123)" +</pre> + +<h2 id="Specifications" name="Specifications">仕様書</h2> + +<p>どの仕様にも含まれていません。</p> + +<h2 id="Browser_compatibility" name="Browser_compatibility">ブラウザーの互換性</h2> + +<div> +<div class="hidden">このページの互換性一覧表は構造化データから生成されています。データに協力していただけるのであれば、 <a class="external" href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> をチェックアウトしてプルリクエストを送信してください。</div> + +<p>{{Compat("javascript.builtins.Function.displayName")}}</p> +</div> + +<h2 id="See_also" name="See_also">関連情報</h2> + +<ul> + <li>{{jsxref("Function.name")}}</li> +</ul> diff --git a/files/ja/web/javascript/reference/global_objects/function/function/index.html b/files/ja/web/javascript/reference/global_objects/function/function/index.html new file mode 100644 index 0000000000..0cc3ed2489 --- /dev/null +++ b/files/ja/web/javascript/reference/global_objects/function/function/index.html @@ -0,0 +1,91 @@ +--- +title: Function() コンストラクター +slug: Web/JavaScript/Reference/Global_Objects/Function/Function +tags: + - Constructor + - Function + - JavaScript + - Reference +translation_of: Web/JavaScript/Reference/Global_Objects/Function/Function +--- +<div>{{JSRef}}</div> + +<p><span class="seoSummary"><strong><code>Function</code> コンストラクター</strong>は、新しい <code>Function</code> <strong>オブジェクト</strong>を生成します。コンストラクターを直接呼び出すと動的に関数を生成することができますが、セキュリティや、 {{jsxref("eval")}} と似た性能の (ただし、はるかに重要性の低い) 問題を抱えます。ただし eval とは異なり、 <code>Function</code> コンストラクターはグローバルスコープで実行される関数のみを生成します。</span></p> + +<div>{{EmbedInteractiveExample("pages/js/function-constructor.html","shorter")}}</div> + +<div class="hidden">このデモのソースファイルは GitHub リポジトリに格納されています。デモプロジェクトに協力したい場合は、 <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> をクローンしてプルリクエストを送信してください。</div> + +<h2 id="Syntax" name="Syntax">構文</h2> + +<pre class="syntaxbox notranslate"><code>new Function([<var>arg1 </var>[, <var>arg2 </var>[, ...<var>argN</var>]] ,] <var>functionBody</var>)</code></pre> + +<h3 id="Parameters" name="Parameters">引数</h3> + +<dl> + <dt><code><var>arg1</var>, <var>arg2</var>, ... <var>argN</var></code></dt> + <dd>仮引数の名前として関数で用いるための名前。各々は、妥当な JavaScript の識別子と一致する文字列か、カンマで区切られた文字列などのリストでなければなりません。例えば、 "<code>x</code>", "<code>theValue</code>", "<code>x,theValue</code>" などです。</dd> + <dt><code><var>functionBody</var></code></dt> + <dd>関数定義を形成する JavaScript の文を含む文字列。</dd> +</dl> + +<h2 id="Description" name="Description">解説</h2> + +<p><code>Function</code> コンストラクターで生成された <code>Function</code> オブジェクトは、関数が作成されたときに解釈されます。これは、関数を{{jsxref("Operators/function", "関数式", "", 1)}}や{{jsxref("Statements/function", "関数文", "", 1)}}を使って定義してコード内で呼び出した場合に比べ、コードの他の部分と一緒に解釈されるため、効率が落ちます。</p> + +<p>関数に渡されるすべての引数は、関数のパラメーター識別名として、渡される順番どおりに作成されます。引数を省略すると、その引数の値は <code>undefined</code> になります。</p> + +<p>(<code>new</code> 演算子を用いずに) 関数として、<code>Function</code> コンストラクターを実行することは、コンストラクターとして実行することと同じです。</p> + +<h2 id="Examples" name="Examples">例</h2> + +<h3 id="Specifying_arguments_with_the_Function_constructor" name="Specifying_arguments_with_the_Function_constructor">Function コンストラクターに引数を指定する</h3> + +<p>以下のコードは二つの引数を取る <code>Function</code> オブジェクトを生成します。</p> + +<pre class="brush: js notranslate">// この例は JavaScript コンソールで直接実行することができます + +// 二つの引数を取り、その合計を返す関数を生成します +const adder = new Function('a', 'b', 'return a + b'); + +// 関数を呼び出します +adder(2, 6); +// 8 +</pre> + +<p>引数 "<code>a</code>" および "<code>b</code>" は関数の本体 "<code>return a + b</code>" の中で使用される形式的な引数名です。</p> + +<h2 id="Specifications" name="Specifications">仕様書</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">仕様書</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName('ESDraft', '#sec-function-constructor', 'Function constructor')}}</td> + </tr> + </tbody> +</table> + +<h2 id="Browser_compatibility" name="Browser_compatibility">ブラウザーの互換性</h2> + +<div> +<div class="hidden">このページの互換性一覧表は構造化データから生成されています。データに協力していただけるのであれば、 <a class="external" href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> をチェックアウトしてプルリクエストを送信してください。</div> + +<p>{{Compat("javascript.builtins.Function")}}</p> +</div> + +<h2 id="See_also" name="See_also">関連情報</h2> + +<ul> + <li>{{jsxref("Functions", "関数と関数スコープ", "", 1)}}</li> + <li>{{jsxref("Statements/function", "function")}} 文</li> + <li>{{jsxref("Operators/function", "function")}} 式</li> + <li>{{jsxref("Statements/function*", "function*")}} 文</li> + <li>{{jsxref("Operators/function*", "function*")}} 式</li> + <li>{{jsxref("AsyncFunction")}}</li> + <li>{{jsxref("GeneratorFunction")}}</li> +</ul> diff --git a/files/ja/web/javascript/reference/global_objects/function/index.html b/files/ja/web/javascript/reference/global_objects/function/index.html new file mode 100644 index 0000000000..25856fcd15 --- /dev/null +++ b/files/ja/web/javascript/reference/global_objects/function/index.html @@ -0,0 +1,114 @@ +--- +title: Function +slug: Web/JavaScript/Reference/Global_Objects/Function +tags: + - Class + - Function + - JavaScript +translation_of: Web/JavaScript/Reference/Global_Objects/Function +--- +<div>{{JSRef}}</div> + +<p>JavaScript の関数は、実際にはすべて <code>Function</code> オブジェクトです。これは、 <code>(function(){}).constructor === Function</code> というコードが true を返すことで確認することができます。</p> + +<h2 id="Constructor" name="Constructor">コンストラクター</h2> + +<dl> + <dt>{{jsxref("Function/Function", "Function()")}}</dt> + <dd>新しい <code>Function</code> オブジェクトを生成します。コンストラクターを直接呼び出すと関数を動的に生成することができますが、セキュリティや、 {{jsxref("eval")}} と似た性能の (ただし、はるかに重要性の低い) 問題を抱えます。ただし eval とは異なり、 <code>Function</code> コンストラクターはグローバルスコープで実行される関数のみを生成します。</dd> +</dl> + +<h2 id="Instance_properties" name="Instance_properties">インスタンスプロパティ</h2> + +<dl> + <dt>{{jsxref("Function.arguments")}}</dt> + <dd>関数に渡した引数に対応する配列です。<br> + これは {{jsxref("Function")}} オブジェクトのプロパティとしては非推奨です。代わりに関数内に用意されている {{jsxref("Functions/arguments", "arguments")}} オブジェクト (関数内で使用可能) を使用してください。</dd> + <dt>{{jsxref("Function.caller")}}</dt> + <dd>現在実行している関数を呼び出した関数を返します。<br> + このプロパティは非推奨であり、一部の厳格モードではない関数でのみ機能します。</dd> + <dt>{{jsxref("Function.displayName")}}</dt> + <dd>関数の表示名です。</dd> + <dt>{{jsxref("Function.length")}}</dt> + <dd>関数によって期待される引数の数を指定します。</dd> + <dt>{{jsxref("Function.name")}}</dt> + <dd>関数の名前です。</dd> +</dl> + +<h2 id="Instance_methods" name="Instance_methods">インスタンスメソッド</h2> + +<dl> + <dt>{{jsxref("Function.prototype.apply()", "Function.prototype.apply(<var>thisArg</var> [, <var>argsArray</var>])")}}</dt> + <dd>関数を呼び出し、 <code>this</code> を提供された <code><var>thisArg</var></code> に設定します。引数は {{jsxref("Array")}} として渡すことができます。</dd> + <dt>{{jsxref("Function.prototype.bind()", "Function.prototype.bind(<var>thisArg</var>[, <var>arg1</var>[, <var>arg2</var>[, ...<var>argN</var>]]])")}}</dt> + <dd>新しい関数を作成し、呼び出されたときに、 <code>this</code> を提供された <code><var>thisArg</var></code> に設定します。任意で、指定された一連の引数が、新しく結びつけられた関数が呼び出されたときに与えられた引数の前に付加されます。</dd> + <dt>{{jsxref("Function.prototype.call()", "Function.prototype.call(<var>thisArg</var>[, <var>arg1</var>, <var>arg2</var>, ...<var>argN</var>])")}}</dt> + <dd>関数を呼び出して、 <code>this</code> に提供した値を設定します。引数は、指定するオブジェクトのものとして渡すことができます。</dd> + <dt>{{jsxref("Function.prototype.toString()", "Function.prototype.toString()")}}</dt> + <dd>関数のソースコードを表す文字列を返します。<br> + {{jsxref("Object.prototype.toString")}} メソッドを上書きします。</dd> +</dl> + +<h2 id="Examples" name="Examples">例</h2> + +<h3 id="Difference_between_Function_constructor_and_function_declaration" name="Difference_between_Function_constructor_and_function_declaration">Funciton コンストラクターと関数宣言の違い</h3> + +<p><code>Function</code> コンストラクターで生成された関数は、生成コンテキストにクロージャを作りません。つまり常にグローバルスコープで生成されます。これを実行すると、 <code>Function</code> コンストラクターの呼び出し元のスコープは入らず、自身のローカル変数とグローバル変数だけにアクセスできます。これは関数式のコードに {{jsxref("eval")}} を使うのとは異なります。</p> + +<pre class="brush: js notranslate">var x = 10; + +function createFunction1() { + var x = 20; + return new Function('return x;'); // この |x| はグローバルの |x| を表す +} + +function createFunction2() { + var x = 20; + function f() { + return x; // この |x| は上記のローカルの |x| を表す + } + return f; +} + +var f1 = createFunction1(); +console.log(f1()); // 10 +var f2 = createFunction2(); +console.log(f2()); // 20 +</pre> + +<p>このコードはウェブブラウザーでは動作しますが、 Node.js では <code>f1()</code> で <code>ReferenceError</code> が発生します。 <code>x</code> が見つからないためです。これは Node の最上位のスコープがグローバルスコープではなく、 <code>x</code> はモジュールのローカルになるからです。</p> + +<h2 id="Specifications" name="Specifications">仕様書</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">仕様書</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName('ESDraft', '#sec-function-objects', 'Function')}}</td> + </tr> + </tbody> +</table> + +<h2 id="Browser_compatibility" name="Browser_compatibility">ブラウザーの互換性</h2> + +<div> +<div class="hidden">このページの互換性一覧表は構造化データから生成されています。データに協力していただけるのであれば、 <a class="external" href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> をチェックアウトしてプルリクエストを送信してください。</div> + +<p>{{Compat("javascript.builtins.Function")}}</p> +</div> + +<h2 id="See_also" name="See_also">関連情報</h2> + +<ul> + <li>{{jsxref("Functions", "関数と関数スコープ", "", 1)}}</li> + <li>{{jsxref("Statements/function", "function")}} 文</li> + <li>{{jsxref("Operators/function", "function")}} 式</li> + <li>{{jsxref("Statements/function*", "function*")}} 文</li> + <li>{{jsxref("Operators/function*", "function*")}} 式</li> + <li>{{jsxref("AsyncFunction")}}</li> + <li>{{jsxref("GeneratorFunction")}}</li> +</ul> diff --git a/files/ja/web/javascript/reference/global_objects/function/length/index.html b/files/ja/web/javascript/reference/global_objects/function/length/index.html new file mode 100644 index 0000000000..f64e2ee9d7 --- /dev/null +++ b/files/ja/web/javascript/reference/global_objects/function/length/index.html @@ -0,0 +1,76 @@ +--- +title: Function.length +slug: Web/JavaScript/Reference/Global_Objects/Function/length +tags: + - Function + - JavaScript + - Property +translation_of: Web/JavaScript/Reference/Global_Objects/Function/length +--- +<div>{{JSRef}}</div> + +<p><strong><code>length</code></strong> プロパティは、関数が期待する引数の数を示します。</p> + +<div>{{EmbedInteractiveExample("pages/js/function-length.html")}}</div> + +<div class="hidden">このデモのソースファイルは GitHub リポジトリに格納されています。デモプロジェクトに協力したい場合は、 <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> をクローンしてプルリクエストを送信してください。</div> + +<div>{{js_property_attributes(0,0,1)}}</div> + +<h2 id="Description" name="Description">解説</h2> + +<p><code>length</code> は function オブジェクトのプロパティであり、関数が期待する引数の数、つまり形式上の引数の数を示します。この数に{{jsxref("rest_parameters", "残余引数", "", 1)}}は含まれず、既定値を持つ引数が最初に登場する前までしか含みません。これに対し、 {{jsxref("Functions_and_function_scope/arguments/length", "arguments.length")}} は関数のローカルスコープ内で用いられ、関数が実際に受け取った引数の数、つまり実引数の数を参照するのに用いるものです。</p> + +<h3 id="Data_property_of_the_Function_constructor" name="Data_property_of_the_Function_constructor">Function コンストラクターのデータプロパティ</h3> + +<p>{{jsxref("Function")}} コンストラクター自体は、{{jsxref("Function")}} オブジェクトです。この <code>length</code> データプロパティの値は 1 です。プロパティの属性は、 Writable: <code>false</code>、Enumerable: <code>false</code>、Configurable: <code>true</code> です。</p> + +<h3 id="Property_of_the_Function_prototype_object" name="Property_of_the_Function_prototype_object">Function プロトタイプのオブジェクトのプロパティ</h3> + +<p>{{jsxref("Function")}} プロトタイプオブジェクトの length プロパティの値は 0 です。</p> + +<h2 id="Examples" name="Examples">例</h2> + +<h3 id="Using_function_length" name="Using_function_length">関数の length の使用</h3> + +<pre class="brush: js notranslate">console.log(Function.length); /* 1 */ + +console.log((function() {}).length); /* 0 */ +console.log((function(a) {}).length); /* 1 */ +console.log((function(a, b) {}).length); /* 2 etc. */ + +console.log((function(...args) {}).length); +// 0, rest parameter は数に含まれない + +console.log((function(a, b = 1, c) {}).length); +// 1, 既定値を持つ引数が最初に登場する前までの +// 引数だけが数に含まれる</pre> + +<h2 id="Specifications" name="Specifications">仕様書</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">仕様書</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName('ESDraft', '#sec-function-instances-length', 'Function.length')}}</td> + </tr> + </tbody> +</table> + +<h2 id="Browser_compatibility" name="Browser_compatibility">ブラウザーの互換性</h2> + +<div> +<div class="hidden">このページの互換性一覧表は構造化データから生成されています。データに協力していただけるのであれば、 <a class="external" href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> をチェックアウトしてプルリクエストを送信してください。</div> + +<p>{{Compat("javascript.builtins.Function.length")}}</p> +</div> + +<h2 id="See_also" name="See_also">関連情報</h2> + +<ul> + <li>{{jsxref("Function")}}</li> +</ul> diff --git a/files/ja/web/javascript/reference/global_objects/function/name/index.html b/files/ja/web/javascript/reference/global_objects/function/name/index.html new file mode 100644 index 0000000000..bdc6731b70 --- /dev/null +++ b/files/ja/web/javascript/reference/global_objects/function/name/index.html @@ -0,0 +1,233 @@ +--- +title: Function.name +slug: Web/JavaScript/Reference/Global_Objects/Function/name +tags: + - ECMAScript6 + - Function + - JavaScript + - Property +translation_of: Web/JavaScript/Reference/Global_Objects/Function/name +--- +<div>{{JSRef}}</div> + +<p><span class="seoSummary">{{jsxref("Function")}} オブジェクトの <strong><code>name</code></strong> プロパティは読み取り専用で、作成時に付けられた関数の名前、もしくは無名関数の場合は <code>anonymous</code> または <code>''</code> (空文字列) を返します。</span></p> + +<div>{{EmbedInteractiveExample("pages/js/function-name.html")}}</div> + +<p class="hidden">このデモのソースファイルは GitHub リポジトリに格納されています。デモプロジェクトに協力していただける場合は、 <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> をクローンしてプルリクエストを送信してください。</p> + +<div>{{js_property_attributes(0,0,1)}}</div> + +<div class="note"> +<p>標準外であった ES2015 以前の実装では、<code>configurable</code> 属性も <code>false</code> であることに注意してください。</p> +</div> + +<h2 id="JavaScript_compressors_and_minifiers" name="JavaScript_compressors_and_minifiers">JavaScript の圧縮とミニファイ</h2> + +<div class="warning"> +<p><strong>警告:</strong> <code>Function.name</code> を使用しているときに、 JavaScript の圧縮 (ミニファイ) や難読化のような変換を行う際には注意が必要です。これらのツールは JavaScript ビルドパイプラインの一部として、本番環境に設置する前にプログラムのサイズを縮小するためによく使用されます。それらの変換は、ビルド時に関数名を変更することがあります。</p> +</div> + +<p>次のようなソースコードは、</p> + +<pre class="brush: js notranslate">function Foo() {}; +let foo = new Foo(); + +if (foo.constructor.name === 'Foo') { + console.log("'foo' は 'Foo' のインスタンスである"); +} else { + console.log('おおっと！'); +} +</pre> + +<p>このように圧縮されるかもしれません。</p> + +<pre class="brush: js notranslate">function a() {}; +let b = new a(); +if (b.constructor.name === 'Foo') { + console.log("'foo' は 'Foo' のインスタンスである"); +} else { + console.log('おおっと！'); +} +</pre> + +<p>非圧縮版では、プログラムは真の方の分岐を実行し、「<code>'foo' は 'Foo' のインスタンスである</code>」と表示するのに対し、圧縮版は異なる振る舞いをし、偽の方の分岐を実行します。それゆえ、上述の例のように <code>Function.name</code> に依存するならば、ビルドパイプラインが関数名を変更しないようにするか、特定の関数名を想定しない構造にする必要があります。</p> + +<h2 id="Examples" name="Examples">例</h2> + +<h3 id="Function_statement_name" name="Function_statement_name">関数文の名前</h3> + +<p><code>name</code> プロパティは関数文の名前を返します。</p> + +<pre class="brush: js notranslate">function doSomething() {} +doSomething.name; // "doSomething" +</pre> + +<h3 id="Function_constructor_name" name="Function_constructor_name">Function コンストラクターの名前</h3> + +<p>構文 <code>new Function(...)</code> または単に <code>Function(...)</code> で関数を作成すると、 {{jsxref("Function")}} オブジェクトが作成され、その名前は "anonymous" になります。</p> + +<pre class="brush: js notranslate">(new Function).name; // "anonymous"</pre> + +<h3 id="Anonymous_function_expression" name="Anonymous_function_expression">無名関数式</h3> + +<p><code>function</code> キーワードを使用して生成された関数式またはアロー関数は、名前が <code>""</code> (空文字列) になっています。</p> + +<pre class="brush: js notranslate">(function() {}).name; // "" +(() => {}).name; // "" +</pre> + +<h3 id="Inferred_function_names" name="Inferred_function_names">関数名の推測</h3> + +<p>変数とメソッドは、構文上の位置から無名関数の名前を推論できます (ECMAScript 2015 から)。</p> + +<pre class="brush: js notranslate">let f = function() {}; +let object = { + someMethod: function() {} +}; + +console.log(f.name); // "f" +console.log(object.someMethod.name); // "someMethod" +</pre> + +<p>{{jsxref("Operators/Function", "関数式", "", 1)}} で名前を持つ関数を定義することができます。</p> + +<pre class="brush: js notranslate">let object = { + someMethod: function object_someMethod() {} +}; +console.log(object.someMethod.name); // "object_someMethod" と表示 + +try { object_someMethod } catch(e) { console.log(e); } +// ReferenceError: object_someMethod is not defined +</pre> + +<p>name プロパティは読み取り専用であり、代入演算子で変更することはできません。</p> + +<div class="hidden"> +<p>以下の例は、この節の冒頭で言われていることと矛盾しており、記述通りには動作しません。</p> +</div> + +<pre class="brush: js notranslate"> let object = { + // anonymous + someMethod: function() {} +}; + +object.someMethod.name = 'otherMethod'; +console.log(object.someMethod.name); // someMethod +</pre> + +<p>変更したければ、{{jsxref("Object.defineProperty()")}} を使ってください。</p> + +<h3 id="Shorthand_method_names" name="Shorthand_method_names">短縮メソッドの名前</h3> + +<pre class="brush: js notranslate">var o = { + foo(){} +}; +o.foo.name; // "foo";</pre> + +<h3 id="Bound_function_names" name="Bound_function_names">バインドされた関数の名前</h3> + +<p>{{jsxref("Function.bind()")}} が関数を作成する時、その名前は "bound " とその関数名を合わせたものとなります。</p> + +<pre class="brush: js notranslate">function foo() {}; +foo.bind({}).name; // "bound foo" +</pre> + +<h3 id="Function_names_for_getters_and_setters" name="Function_names_for_getters_and_setters">ゲッターとセッターの関数名</h3> + +<p><code><a href="/ja/docs/Web/JavaScript/Reference/Operators/get">get</a></code> と <code><a href="/ja/docs/JavaScript/Reference/Operators/set">set</a></code> を使う時は、 "get" や "set" が関数名に含まれます。</p> + +<pre class="brush: js notranslate">let o = { + get foo(){}, + set foo(x){} +}; + +var descriptor = Object.getOwnPropertyDescriptor(o, "foo"); +descriptor.get.name; // "get foo" +descriptor.set.name; // "set foo";</pre> + +<h3 id="Function_names_in_classes" name="Function_names_in_classes">クラスでの関数名</h3> + +<p><code>obj.constructor.name</code> でオブジェクトの「クラス」を知ることができます (ただし、下記の警告を確認してください)。</p> + +<pre class="brush: js notranslate">function Foo() {} // ES2015 構文の場合: class Foo {} + +var fooInstance = new Foo(); +console.log(fooInstance.constructor.name); // "Foo" と表示 +</pre> + +<div class="warning"> +<p><strong>警告:</strong> スクリプトインタープリターは、関数が自身の <em>name</em> プロパティを持っていない場合に限り、組み込みの <code>Function.name</code> プロパティを設定します (<a href="http://www.ecma-international.org/ecma-262/6.0/#sec-setfunctionname">9.11.2. of the ECMAScript2015 Language Specification</a> セクションをご覧ください)。しかし ES2015 では、<em>static</em> キーワードを指定すると、その静的メソッドはクラスのコンストラクタ関数の OwnProperty として設定されます (ECMAScript2015, <a href="https://www.ecma-international.org/ecma-262/6.0/#sec-runtime-semantics-classdefinitionevaluation">14.5.14.21.b</a> + <a href="https://www.ecma-international.org/ecma-262/6.0/#sec-object-initializer-runtime-semantics-propertydefinitionevaluation">12.2.6.9</a>)。</p> +</div> + +<p>従って、<code>name()</code> という静的メソッドを持つクラスでは、事実上そのクラス名を取得することはできません:</p> + +<pre class="brush: js notranslate">class Foo { + constructor() {} + static name() {} +} +</pre> + +<p><code>static name()</code> メソッドが存在する場合、<code>Foo.name</code> はクラス名ではなく、 <code>name()</code> 関数オブジェクトへの参照を持つことになります。Chrome や Firefox では、上記の ES2015 の構文によるクラス定義は、下記の ES5 構文のコードと同じような挙動をします:</p> + +<pre class="brush: js notranslate">function Foo() {} +Object.defineProperty(Foo, 'name', { writable: true }); +Foo.name = function() {}; +</pre> + +<p><code>fooInstance.constructor.name</code> で <code>fooInstance</code> のクラスを取得しようとしても、得られるのはクラス名ではなく静的メソッドへの参照です。例えば:</p> + +<pre class="brush: js notranslate">let fooInstance = new Foo(); +console.log(fooInstance.constructor.name); // 関数 name() を表示 +</pre> + +<p>先ほどの ES5 の構文の例では、Chrome や Firefox での <code>Foo.name</code> の静的な定義の際に <em>writable</em> を指定しています。このような独自の手法を用いなければ、デフォルトでは <em>read-only</em> となります:</p> + +<pre class="brush: js notranslate">Foo.name = 'Hello'; +console.log(Foo.name); // Foo が static name() を持つ場合は "Hello"、そうでなければ "Foo" と表示する。 +</pre> + +<p>従って、<code>Function.name</code> プロパティが常にクラス名を保持しているとは考えないほうがいいでしょう。</p> + +<h3 id="Symbols_as_function_names" name="Symbols_as_function_names">関数名としての Symbol</h3> + +<p>{{jsxref("Symbol")}} を関数名として使用し、Symbol が description を持っている場合、関数名はブラケット <code>[ ]</code> 内の description となります。</p> + +<pre class="brush: js notranslate">let sym1 = Symbol("foo"); +let sym2 = Symbol(); +let o = { + [sym1]: function(){}, + [sym2]: function(){} +}; + +o[sym1].name; // "[foo]" +o[sym2].name; // ""</pre> + +<h2 id="Specifications" name="Specifications">仕様書</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">仕様書</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName('ESDraft', '#sec-function-instances-name', 'name')}}</td> + </tr> + </tbody> +</table> + +<h2 id="Browser_compatibility" name="Browser_compatibility">ブラウザーの互換性</h2> + +<div> +<div class="hidden">このページの互換性一覧表は構造化データから生成されています。データに協力していただけるのであれば、 <a class="external" href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> をチェックアウトしてプルリクエストを送信してください。</div> + +<p>{{Compat("javascript.builtins.Function.name")}}</p> + +<h2 id="See_also" name="See_also">関連情報</h2> + +<ul> + <li>{{jsxref("Function")}}</li> +</ul> +</div> diff --git a/files/ja/web/javascript/reference/global_objects/function/tosource/index.html b/files/ja/web/javascript/reference/global_objects/function/tosource/index.html new file mode 100644 index 0000000000..6fdc0141be --- /dev/null +++ b/files/ja/web/javascript/reference/global_objects/function/tosource/index.html @@ -0,0 +1,69 @@ +--- +title: Function.prototype.toSource() +slug: Web/JavaScript/Reference/Global_Objects/Function/toSource +tags: + - Function + - JavaScript + - Method + - Non-standard + - Obsolete +translation_of: Web/JavaScript/Reference/Global_Objects/Function/toSource +--- +<div>{{JSRef}} {{obsolete_header}}</div> + +<p><strong><code>toSource()</code></strong> メソッドは、オブジェクトのソースコードを表す文字列を返します。このメソッドは通常、コード中で明示的に呼び出されるのではなく、 JavaScript から内部的に呼び出されます。デバッグ中にオブジェクトの内容を調査する目的で <code>toSource()</code> を呼び出すことができます。</p> + +<h2 id="Syntax" name="Syntax">構文</h2> + +<pre class="syntaxbox notranslate"><var>function</var>.toSource(); +</pre> + +<h3 id="Return_value" name="Return_value">返値</h3> + +<p>オブジェクトのソースコードを表す文字列です。</p> + +<h2 id="Description" name="Description">解説</h2> + +<h3 id="Native_functions" name="Native_functions">ネイティブ関数</h3> + +<p>組込みの {{jsxref("Function")}} オブジェクトでは、 <code>toSource()</code> は次の文字列を返してソースコードが使用できないことを示します。</p> + +<pre class="brush: js notranslate">function Function() { + [native code] +} +</pre> + +<h3 id="Custom_functions" name="Custom_functions">独自の関数</h3> + +<p>独自に作成した関数では、 <code>toSource()</code> はオブジェクトを定義する JavaScript のソースコードを文字列として返します。</p> + +<pre class="brush: js notranslate">// 例: +function hello() { + console.log("Hello, World!"); +} + +hello.toSource(); +</pre> + +<pre class="brush: js notranslate">// 結果: +"function hello() { + console.log(\"Hello, World!\"); +}"</pre> + +<h2 id="Specifications" name="Specifications">仕様書</h2> + +<p>いずれの標準仕様でも定義されていません。</p> + +<h2 id="Browser_compatibility" name="Browser_compatibility">ブラウザーの互換性</h2> + +<div> +<div class="hidden">このページの互換性一覧表は構造化データから生成されています。データに協力していただけるのであれば、 <a class="external" href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> をチェックアウトしてプルリクエストを送信してください。</div> + +<p>{{Compat("javascript.builtins.Function.toSource")}}</p> +</div> + +<h2 id="See_also" name="See_also">関連情報</h2> + +<ul> + <li>{{jsxref("Object.prototype.toSource()")}}</li> +</ul> diff --git a/files/ja/web/javascript/reference/global_objects/function/tostring/index.html b/files/ja/web/javascript/reference/global_objects/function/tostring/index.html new file mode 100644 index 0000000000..bd433a5b99 --- /dev/null +++ b/files/ja/web/javascript/reference/global_objects/function/tostring/index.html @@ -0,0 +1,216 @@ +--- +title: Function.prototype.toString() +slug: Web/JavaScript/Reference/Global_Objects/Function/toString +tags: + - Function + - JavaScript + - Method + - Prototype +translation_of: Web/JavaScript/Reference/Global_Objects/Function/toString +--- +<div>{{JSRef}}</div> + +<p><code><strong>toString()</strong></code> メソッドは、関数のソースコードを表す文字列を返します。</p> + +<div>{{EmbedInteractiveExample("pages/js/function-tostring.html")}}</div> + +<div class="hidden">このデモのソースファイルは GitHub リポジトリに格納されています。デモプロジェクトに協力したい場合は、 <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> をクローンしてプルリクエストを送信してください。</div> + +<h2 id="Syntax" name="Syntax">構文</h2> + +<pre class="syntaxbox notranslate"><var>function</var>.toString()</pre> + +<h3 id="Return_value" name="Return_value">返値</h3> + +<p>関数のソースコードを表す文字列です。</p> + +<h2 id="Description" name="Description">解説</h2> + +<p>{{jsxref("Function")}} オブジェクトは、 {{jsxref("Object")}} から継承した {{jsxref("Object.prototype.toString", "toString")}} メソッドをオーバーライドします。つまり、 {{jsxref("Object.prototype.toString")}} を継承しません。 {{jsxref("Function")}} オブジェクトについて、 <code>toString</code> メソッドは関数宣言を表現するオブジェクトを表す文字列を返します。</p> + +<p>{{jsxref("Function")}} を文字列値として表現するとき、JavaScript は自動的に <code>toString</code> メソッドを呼び出します。例えば、関数が文字列と連結されるときです。</p> + +<p><code>this</code> 値のオブジェクトが <code>Function</code> オブジェクトでない場合、 <code>toString()</code> メソッドは {{jsxref("TypeError")}} 例外 ("Function.prototype.toString called on incompatible object") を発生します。</p> + +<pre class="brush: js example-bad notranslate">Function.prototype.toString.call('foo'); // TypeError +</pre> + +<p><code>toString()</code> メソッドが組込み関数オブジェクトや <code>Function.prototype.bind</code> 作成された関数に対して呼び出されると、 <code>toString()</code> は、次のような<em>ネイティブ関数文字列</em>を返します。</p> + +<pre class="brush: js notranslate">"function () {\n [native code]\n}" +</pre> + +<p><code>toString()</code> メソッドが <code>Function</code> コンストラクターで生成された関数に対して呼び出されると、 <code>toString()</code> は "anonymous" という名前の関数宣言に、提供された引数と関数の本体を合成したソースコードを返します。</p> + +<p><code>+</code> 演算子を使用して、関数の文字列表現を明示的に取得することもできます。</p> + +<pre class="brush: js notranslate">function foo() { return 'bar' } +console.log(foo + ''); // "function foo() { return 'bar' }"</pre> + +<h2 id="Examples" name="Examples">例</h2> + +<h3 id="Comparing_actual_source_code_and_toString_results" name="Comparing_actual_source_code_and_toString_results">実際のソースコードと toString の結果との比較</h3> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Function</th> + <th scope="col">Function.prototype.toString の結果</th> + </tr> + </thead> + <tbody> + <tr> + <td> + <pre class="notranslate"> +function f(){}</pre> + </td> + <td> + <pre class="notranslate"> +"function f(){}"</pre> + </td> + </tr> + <tr> + <td> + <pre class="notranslate"> +class A { a(){} }</pre> + </td> + <td> + <pre class="notranslate"> +"class A { a(){} }"</pre> + </td> + </tr> + <tr> + <td> + <pre class="notranslate"> +function* g(){}</pre> + </td> + <td> + <pre class="notranslate"> +"function* g(){}"</pre> + </td> + </tr> + <tr> + <td> + <pre class="notranslate"> +a => a</pre> + </td> + <td> + <pre class="notranslate"> +"a => a"</pre> + </td> + </tr> + <tr> + <td> + <pre class="notranslate"> +({ a(){} }.a)</pre> + </td> + <td> + <pre class="notranslate"> +"a(){}"</pre> + </td> + </tr> + <tr> + <td> + <pre class="notranslate"> +({ *a(){} }.a)</pre> + </td> + <td> + <pre class="notranslate"> +"*a(){}"</pre> + </td> + </tr> + <tr> + <td> + <pre class="notranslate"> +({ [0](){} }[0])</pre> + </td> + <td> + <pre class="notranslate"> +"[0](){}"</pre> + </td> + </tr> + <tr> + <td> + <pre class="notranslate"> +Object.getOwnPropertyDescriptor({ + get a(){} +}, "a").get</pre> + </td> + <td> + <pre class="notranslate"> +"get a(){}"</pre> + </td> + </tr> + <tr> + <td> + <pre class="notranslate"> +Object.getOwnPropertyDescriptor({ + set a(x){} +}, "a").set</pre> + </td> + <td> + <pre class="notranslate"> +"set a(x){}"</pre> + </td> + </tr> + <tr> + <td> + <pre class="notranslate"> +Function.prototype.toString</pre> + </td> + <td> + <pre class="notranslate"> +"function toString() { [native code] }"</pre> + </td> + </tr> + <tr> + <td> + <pre class="notranslate"> +(function f(){}.bind(0))</pre> + </td> + <td> + <pre class="notranslate"> +"function () { [native code] }"</pre> + </td> + </tr> + <tr> + <td> + <pre class="notranslate"> +Function("a", "b")</pre> + </td> + <td> + <pre class="notranslate"> +"function anonymous(a\n) {\nb\n}"</pre> + </td> + </tr> + </tbody> +</table> + +<h2 id="Specifications" name="Specifications">仕様書</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">仕様書</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName('ESDraft', '#sec-function.prototype.tostring', 'Function.prototype.toString')}}</td> + </tr> + </tbody> +</table> + +<h2 id="Browser_compatibility" name="Browser_compatibility">ブラウザーの互換性</h2> + +<div> +<div class="hidden">このページの互換性一覧表は構造化データから生成されています。データに協力していただけるのであれば、 <a class="external" href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> をチェックアウトしてプルリクエストを送信してください。</div> + +<p>{{Compat("javascript.builtins.Function.toString")}}</p> +</div> + +<h2 id="See_also" name="See_also">関連情報</h2> + +<ul> + <li>{{jsxref("Object.prototype.toString()")}}</li> +</ul> |