mozilla

リビジョンの比較

Function.prototype.bind()

Change Revisions

リビジョン 563657:

リビジョン 563657 (編集者: cu39 / 編集日時: )

リビジョン 621537:

リビジョン 621537 (編集者: Marsf / 編集日時: )

タイトル:
Function.prototype.bind()
Function.prototype.bind()
URL スラグ:
Web/JavaScript/Reference/Global_Objects/Function/bind
Web/JavaScript/Reference/Global_Objects/Function/bind
タグ:
"ECMAScript5", "Function", "Method", "JavaScript"
内容:

リビジョン 563657
リビジョン 621537
n14      <code><strong>bind()</strong></code> メソッドが呼ばれると、<code>this<n14      <code><strong>bind()</strong></code> メソッドは、呼び出された時に新しい関数を生成
>/code> キーワードに引数 <code>thisArg</code> がセットされた新しい関数をつくり出します。その新しい関数>します。最初の引数 <code>thisArg</code> は新しい関数の <code>this</code> キーワードにセッ
>に引数を与えて呼び出すと、<code>bind()</code> の際に与えた2個目以降の引数の後にその引数がつなげられて実行され>トされます。2 個目以降の引数は、新しい関数より前に、ターゲット関数の引数として与えられます。
>ます。 
n30        束縛された関数が呼ばれるとき、<code>this</code> になるものとしてターゲット関数に渡される値を指定n30        束縛された関数が呼ばれる、<code>this</code> としてターゲット関数に渡される値を指定します。束
>します。束縛された関数が {{jsxref("Operators/new", "new")}} 演算子を使って呼び出された場合、こ>縛された関数が {{jsxref("Operators/new", "new")}} 演算子によって構築された場合、この引数は無視
>の引数は無視されます。>されます。
n36        ターゲット関数が呼ばれるとき、束縛された関数に与えた引数がターゲット関数の最初の引数として挿入されます。n36        ターゲット関数を呼び出す時、束縛された関数に与えられる引数の前に付けてターゲット関数に渡す引数。
n43      <code>bind()</code> 関数は、新たな関数(<strong>束縛された関数</strong> = a n43      <code>bind()</code> 関数は、新たな関数(<strong>束縛された関数</strong> = a 
><strong>bound function</strong>)をつくって返します。この新たな関数の本体(ECMAScript 5><strong>bound function</strong>)を生成して返します。この新たな関数の本体(ECMAScript 5
> の観点では内部の {{jsxref("Function.call", "call")}} プロパティ)は <code>call(> の観点では内部の {{jsxref("Function.call", "call")}} プロパティ)は<code>call(
>)</code> が呼ばれた関数(束縛された関数の<strong>ターゲット関数</strong>){{訳注("<code>fun>)</code> 先の関数(束縛された関数の<strong>ターゲット関数</strong>){{訳注("<code>fun.bi
>.bind(thisArg)</code> での <code>fun</code> ")}} と同じものですが、その内側での <c>nd(thisArg)</code>  <code>fun</code> ")}} と同じです。ターゲット関数の <code>t
>ode>this</code> の値は <code>code()</code> に与えた第1引数になり(束縛され)、それを上書きす>his</code> の値 <code>bind()</code> に与えた第 1 引数になり(束縛され)、それを上書きすること
>ることはできません。また <code>bind()</code> で、ターゲット関数先頭部分のデフォルト引数指定することもでき>はできません。<code>bind()</code> には、束縛された関数が呼ばれた時にターゲット関数に渡す、先頭部分のデフォルト
>ます。この引数は束縛された関数が呼ばれたときターゲット関数に渡されます。また、束縛された関数を <code>new</code> >引数指定できます。また、束縛された関数を <code>new</code> 演算子を使用して新たなオブジェクトを構築することもで
>することで新たなオブジェクトを構築することもできます。この場合、新しいオブジェクトは、あたかも(束縛された関数ではなく)ターゲット>きます。この場合、新しいオブジェクトは、あたかも(束縛された関数ではなく)ターゲット関数が構築されたかのように振る舞います。<co
>関数が構築されたかのように振る舞います。<code>this</code> 値を与えても無視されますが、それに続けて与えたパラメー>de>this</code> 値を与えても無視されますが、それに続けて与えた引数は、エミュレートされ関数に渡されます。
>は、エミュレートされている関数に渡されます。 
n49      束縛された関数をつくn49      束縛された関数を生成す
n52      最もシンプルな <code>bind()</code> の使い方は、どのように呼び出された場合でも同じ <code>tn52      最もシンプルな <code>bind()</code> の使い方は、どのように呼び出された場合でも特定の <code>
>his</code> 値を持つ関数をつくることです。初心者の JavaScript プログラマーがよくやる間違いは、あるオブジェク>this</code> 値を持つ関数を生成することです。初心者の JavaScript プログラマーがよくやる間違いは、あるオブジ
>トからあるメソッドを取り出して、あとでその関数を呼び出すとき、その内側の <code>this</code> 値が元のオブジェク>ェクトからメソッドを取り出し、後でその関数を呼び出すとき、その内側の <code>this</code> 値が元のオブジェクトにな
>トになると考えてしまうことです(例えばそのメソッドをコールバック関数に使うケース)。しかし、に配慮しなければ、元のオブジェク>ると考えてしまうことです(例えばそのメソッドをコールバック関数に使うケース)。特に配慮しなければ、元のオブジェクトは失われてしま
>トはどこかへ行ってしまいます{{訳注("取り出した関数内の <code>this</code> としては使えなくなる")}}。その>います {{訳注("取り出した関数内の <code>this</code> としては使えなくなる")}}。その関数に元々のオブジェ
>関数に元々のオブジェクトを <code>bind()</code> して束縛された関数をつくり出せば、この問題をきちんと解決するこ>クトを <code>bind()</code> して束縛された関数を生成すれば、この問題をきちんと解決することができます:
>とができます: 
n66// 'this' を module に結びつけた新しい関数をn66// 'this' を module に結びつけた新しい関数を
n74      もうひとつの、最もシンプルな <code>bind()</code> の使い方は、あらかじめ引数が指定されている関数をn74      次にシンプルな <code>bind()</code> の使い方は、あらかじめ引数が指定された関数を生成することです。
>つくることです。この引数を指定するには(指定しないことも可能)、<code>this</code> 値の後に並べます。すると、ター>これらの引数は、<code>this</code> 値の後に続けます(指定しないことも可能)。すると、束縛された関数がいつ呼ばれて
>ゲット関数がいつ呼ばれたときでも、その引数が、ターゲット関数に渡される引数の先頭部分に挿入されます。>も、この指定された引数を先頭にして束縛された関数の引数がターゲット関数に渡されます。
n93      デフォルトで {{ domxref("window.setTimeout()") }} 内部の <code>thin93      デフォルトで、{{ domxref("window.setTimeout()") }} 内部の <code>this<
>s</code> キーワードは {{ domxref("window") }}(あるいは <code>global</code> >/code> キーワードは {{ domxref("window") }}(あるいは <code>global</code> オブ
>オブジェクト)に設定されます。<code>this</code> がクラスインスタンスを参照していことが必要なクラスメソッドを使>ジェクト)に設定されます。クラスインスタンスを参照 <code>this</code> が必要なクラスメソッドを使う場合、<c
>う場合、<code>this</code> コールバック関数と明確に結びつけ(バインドして/束縛して)、インスタンスを維持する>ode>this</code> コールバック関数と明確に結びつけ(束縛して)、インスタンスを維持することができます。
>ことができます。 
n100// 1秒遅延させてから bloom を宣言するn100// 1 秒遅延させてから bloom を宣言する
n106  console.log('I am a beautiful flower with ' + this.petalCount +n106  console.log('I am a beautiful flower with 
> ' petals!'); 
107              ' + this.petalCount + ' petals!');
n113      <span style="color:#000000;"><strong>注意:</strong> このセクションではn114      <span style="color:#000000;"><strong>警告:</strong> このセクションでは
> JavaScript の性能(capabilities)を実演して <code>bind()</code> メソッドのエッジケー>JavaScript の性能(capabilities)を実演して <code>bind()</code> メソッドの極端な例
>を説明していますが、以下の方法がベストなわけではなく、むしろプロダクション環境では推奨されない方法です。</span>>説明していますが、以下の方法がベストなわけではなく、むしろプロダクション環境では推奨されない方法です。</span>
n116      束縛された関数は自動的に、<code>new</code>演算子を使ってターゲット関数の新しいインスタンスをつくれるよn117      束縛された関数は自動的に、<code>new</code> 演算子を使ってターゲット関数の新しいインスタンスを構築でき
>うになっています。新たな値を構築するために束縛された関数を使うと、<code>this</code>を与えても無視されます。しかし>るようになっています。新たな値を構築するために束縛された関数を使った場合、<code>this</code> を与えても無視されま
>、同時に与える引数はコンストラクタ呼び出しの先頭部分に挿入されます>す。しかし、同時に与える引数はコンストラクタ呼び出しの先頭部分に挿入されます:
n145      束縛された関数を <code>new</code> とともに使えるようにするのに特別な設定は必要ないことを忘れないでn146      束縛された関数を <code>new</code> 使えるように生成するのに特別なことをする必要は無注意して
>ください。なので当然、普通に呼び出されるような束縛された関数をつくる際も特別なことは必要ありません。もしその関数を <code>n>ださい。当然、普通に呼び出される束縛された関数を生成する際も特別なことは必要ありません。もしその関数を <code>new</co
>ew</code> 演算子とともに呼び出すことにしか使いたくないと思っても、普通に呼び出すことはできてしまいます。>de> 演算子とともに呼び出すことにしか使いたくないと思っても、普通に呼び出すことはできてしまいます。
n151// 普通の関数としても実行できます(あまり必要にはなりませんが)n152// 普通の関数としても実行できます
153//(あまり必要にはなりませんが)
n161      ショートカットをつくn163      ショートカットを作成す
n168        例として {{jsxref("Array.prototype.slice")}} を取り上げます。この関数は、配列n170        例として{{jsxref("Array.prototype.slice")}} を取り上げます。この関数は、配列
>に似たオブジェクトを本物の配列へ変換するために使えます。まず、次のようにショートカットをつくができます:>に似たオブジェクトを本物の配列へ変換するために使えます。まず、次のようにショートカットを作成するとます:
n178        <code>bind()</code> を使うともっとシンプルにできます。次のコードでは、<code>slice<n180        <code>bind()</code> を使うと、さらにシンプルにできます。次のコードでは、<code>slice
>/code>  <code>Function.prototype.call()</code> 関数に結びつけられた関数なり、そ></code>  <code>Function.prototype.call()</code> 関数に結びつけられた関数なり、
>中での <code>this</code> 値は <code>Array.prototype.slice()</code> 関数>その内側の <code>this</code> 値は <code>Array.prototype.slice()</code> 関
>なります。こうすると、いちいち <code>call()</code> を呼び出す必要がなくなります>なります。こうすると、いちいち <code>call()</code> を呼び出す必要がなくなります:
n193      <code>bind</code> 関数は ECMA-262 第5版に最近追加されたので、すべてのブラウザに存在するわn195      <code>bind</code> 関数は ECMA-262 第5版に最近追加されたので、すべてのブラウザに存在するわ
>けではありません。以下のコードをあなたのスクリプトの先頭に挿入すれば、その状況をいくらか変えることができます。ネイティブにはサポー>けではありません。以下のコードをあなたのスクリプトの先頭に挿入すれば、その状況をいくらか変えることができます。ネイティブサポート
>トされていない実装において、<code>bind()</code> の多くの機能を使えるようになります。>されていない実装において、<code>bind()</code> の多くの機能を使えるようになります。
n199      // closest thing possible to the ECMAScript 5 internal IsCan201      // closest thing possible to the ECMAScript 5
>llable function 
200      throw new TypeError("Function.prototype.bind - what is tryi202      // internal IsCallable function
>ng to be bound is not callable"); 
203      throw new TypeError("Function.prototype.bind - 
204           what is trying to be bound is not callable");
n208                                 ? thisn212                 ? this
209                                 : oThis,213                 : oThis,
210                               aArgs.concat(Array.prototype.slice214                 aArgs.concat(Array.prototype.slice.call(argument
>.call(arguments)));>s)));
n221      このアルゴリズムと仕様上のアルゴリズムとの間には、いくつか大きな違いがあります(真剣に網羅することを目指したわけではなn225      このアルゴリズムと仕様上のアルゴリズムとの間には、いくつか大きな違いがあります(真剣に網羅することを目指したわけではな
>いので、他にも差はあるかもしれません)>いので、他にも差はあるかもしれません):
n224      <li>この部分的な実装は <code>Array.prototype.slice</code>, <code>Arrn228      <li>この部分的な実装は<code>Array.prototype.slice</code>, <code>Arr
>ay.prototype.concat</code>, <code>Function.prototype.call</code>,>ay.prototype.concat</code>, <code>Function.prototype.call</code>,
> <code>Function.prototype.apply</code> という、それぞれオリジナルの値を持つ組み込みメソッド> <code>Function.prototype.apply</code> という、それぞれオリジナルの値を持つ組み込みメソッド
>に依存している。>に依存している。
n234      もしこの不完全な実装を使うことを選ぶなら、<strong>ECMA-262 第5版の定義から外れる挙動に依存しないようn238      この不完全な実装を使うことを選ぶ場合は、<strong>ECMA-262 第5版の定義から外れる挙動に依存しないように
>に!</strong> ただし、いくらか気をつければ(特定の要望に適するような追加修正も必要かもしれません)、この不完全な実装は、>!</strong> ただし、いくらか気をつければ(特定の要望に適するような追加修正も必要かもしれません)、この不完全な実装は、<
><code>bind()</code> が広く仕様通りに実装されるまでの悪くないつなぎとして使えるでしょう{{訳注("Protot>code>bind()</code> が広く仕様通りに実装されるまでの悪くないつなぎとして使えるでしょう {{訳注("Protot
>ype.js の <code>Function#bind</code>、jQuery の <code>jQeury.proxy()>ype.js の <code>Function#bind</code>、jQuery の <code>jQeury.proxy()
></code>、Underscore.js の <code>_.bind()</code> など多数のライブラリでも提供されていま></code>、Underscore.js の <code>_.bind()</code> など多数のライブラリでも提供されていま
>す")}}。>す")}}。
n237      Specificationsn241      仕様
n243            Specificationn247            仕様
n246            Statusn250            状況
n249            Commentn253            コメント
n278      Browser compatibilityn282      ブラウザの互換性
n288              Featuren292              機能
n308              Basic supportn312              基本サポート
n334              Featuren338              機能
n357              Basic supportn361              基本サポート
n385      See alson389      参照
t393        <a href="/en-US/docs/Web/JavaScript/Reference/Functions_at397        <a href="/docs/Web/JavaScript/Reference/Functions_and_fun
>nd_function_scope">Functions and scope</a>>ction_scope">Functions and scope</a>

前に戻る