bind()メソッドについて議論する前に、質問を見てみましょう。
var altwrite = document.write;
altwrite( "hello");
// 1。上記のコードの問題は何ですか?
// 2。正しい操作はどのようなものですか
// 3。 bind()メソッドを実装する方法
上記の質問では、答えはそれほど難しくありません。主なテストポイントは、これによって指摘された問題です。 altwrite()関数は、この指しをグローバルまたはウィンドウオブジェクトに変更し、実行中に異常な呼び出しを引き起こします。正しい解決策は、bind()メソッドを使用することです。
altwrite.bind(document)( "hello")
もちろん、Call()メソッドを使用することもできます。
altwrite.call(document、 "hello")
この記事の焦点は、3番目の号でbind()メソッドの実装について説明することです。 bind()の実装について議論する前に、bind()メソッドの使用を見てみましょう。
バインド関数
Bind()を使用する最も簡単な方法は、関数がどのように呼び出されても同じ値を持つように関数を作成することです。一般的なエラーは、上記の例のようなもので、オブジェクトからメソッドを取り出してから呼び出し、これを元のオブジェクトを指すようにしたいと考えています。特別な治療が行われない場合、元のオブジェクトは一般に失われます。 bind()メソッドを使用すると、この問題を美しく解決できます。
this.num = 9; var mymodule = {num:81、getnum:function(){return this.num; }}; module.getnum(); // 81var getnum = module.getnum; getnum(); // 9、この例では、「この」がグローバルオブジェクトを指しているため//モジュールにバインドされている関数を作成するvar boundgetnum = getnum.bind(module); boundgetnum(); // 81部分関数
部分関数は、部分アプリケーションとも呼ばれます。部分的な関数に関する定義のセクションは次のとおりです。
部分的なアプリケーションは、いくつかの引数を受け入れる関数を取得し、それらの引数の1つ以上に値を拘束する値を取得し、残りの国連結合引数のみを受け入れる新しい関数を返すと説明できます。
これは良い機能です。 bind()を使用して、関数の事前定義されたパラメーターを設定し、呼び出すときに他のパラメーターを渡します。
function list(){return array.prototype.slice.call(arguments);} var list1 = list(1、2、3); // [1、2、3] //事前に定義されたパラメーター37VAR LeadingThirtySevenList = list.bind(未定義、37); var list2 = leadingthirtysevenlist(); // [37] var list3 = leadingthirtysevenlist(1、2、3); // [37、1、2、3]SettimeOutで使用します
一般に、このsetimeout()はウィンドウまたはグローバルオブジェクトを指します。クラスメソッドを使用する場合、これはクラスインスタンスを指す必要があります。bind()を使用して、これをコールバック関数にバインドしてインスタンスを管理できます。
function bloomer(){this.petalcount = math.ceil(math.random() * 12) + 1;} // declare function function bloomer.prototype.bloom = function(){window.settimeout(this.declare.bind(this)、1000);}; bloomer.declare.declare.declare.log( 'i' i 'i' i 'i' i 'use() this.petalcount + 'petal!');};注:上記の方法は、イベント処理関数やSetIntervalメソッドにも使用できます。
コンストラクターとしてのバインド関数
バインド関数は、新しい演算子を使用して目的関数のインスタンスを構築するのにも適しています。バインディング関数を使用してインスタンスを構築する場合、注:これは無視されますが、合格したパラメーターは引き続き使用できます。
関数ポイント(x、y){this.x = x; this.y = y;} point.prototype.toString = function(){return this.x + '、' + this.y; }; var p = new Point(1、2); p.toString(); // '1,2'var emptyobj = {}; var yaxispoint = point.bind(emptyobj、0/*x*/); //実装の例はサポートされていません。 var axispoint = new yaxispoint(5); axispoint.toString(); // '0,5'axispoint instanceof point; // yaxispointの真のaxispointインスタンス。 // True New Point(17、42)YaxisPointのインスタンス。 // 真実上記の例では、PointとYaxisPointがプロトタイプを共有するため、インスタンスのオペレーターを使用して審査される場合は当てはまります。
ショートカット
bind()は、これの特定の値を必要とする関数のショートカットを作成することもできます。
たとえば、クラスの配列オブジェクトを実際の配列に変換するには、可能な例は次のとおりです。
var slice = array.prototype.slice; // ... slice.call(arguments);
bind()を使用すると、状況が容易になります。
var unboundslice = array.prototype.slice; var slice = function.prototype.call.bind(unboundslice); // ... slice(arguments);
成し遂げる
上記のセクションでは、bind()には多くの使用シナリオがあることがわかりますが、bind()関数はECMA-262の5番目のバージョンで追加されました。すべてのブラウザで実行されない場合があります。これには、bind()関数を自分で実装する必要があります。
まず、目的関数に範囲を指定することにより、Bind()メソッドを実装できます。
function.prototype.bind = function(context){self = this; //これを保存します。つまり、bindメソッドを呼び出す目的関数はfunction(){return self.apply(context、arguments); };};関数のカレーを考慮すると、より堅牢なbind()を構築できます。
function.prototype.bind = function(context){var args = array.prototype.slice.call(arguments、1)、self = this; return function(){var innerargs = array.prototype.slice.call(arguments); var finalArgs = args.concat(inenerargs); self.apply(context、finalargs)を返します。 };};今回は、bind()メソッドはオブジェクトにバインドでき、バインディング中の渡しパラメーターもサポートできます。
続行すると、JavaScript関数はコンストラクターとしても使用できます。この方法でバインドされた関数が呼び出されると、状況はより微妙であり、プロトタイプチェーンの通過に関与する必要があります。
function.prototype.bind = function(context){var args = array.prototype.slice(arguments、1)、f = function(){}、self = this、bound = function(){var inerargs = array.prototype.slice.call(arguments); var finalArgs = args.concat(inenerargs); return self.apply((このインスタンスf?this:context)、finalargs); }; f.prototype = self.prototype; bound.prototype = new f();バウンドを返します;};これは、本「JavaScript Web Application」にBind()の実装です。リレーコンストラクターFを設定することにより、バウンド関数はBind()を呼び出す関数と同じプロトタイプチェーン上にあります。新しい演算子を使用してバインドされた関数を呼び出すと、返されたオブジェクトは通常のインスタンスを使用することもできます。したがって、これはBind()の最も厳密な実装です。
ブラウザでbind()関数をサポートするには、上記の関数をわずかに変更する必要があります。
function.prototype.bind = function(othis){if(typeof this!== "function"){throw new TypeError( "function.prototype.bind-バインドしようとしていることは呼ばれません"); } var aargs = array.prototype.slice.call(arguments、1)、ftobind = this、fnop = function(){}、fbound = function(){return ftobind.apply(このinstanceof fnop && othis?this:othis || windocat(argumputt totype); }; fnop.prototype = this.prototype; fbound.prototype = new fnop(); fboundを返します。 };JavaScriptのBind()メソッドの使用と実装に関する上記の簡単な分析は、私があなたと共有するすべてのコンテンツです。私はそれがあなたに参照を与えることができることを願っています、そしてあなたがwulin.comをもっとサポートできることを願っています。