ホームページ  >  記事  >  ウェブフロントエンド  >  JavaScriptバインドバインディング関数 code_javascriptスキル

JavaScriptバインドバインディング関数 code_javascriptスキル

WBOY
WBOYオリジナル
2016-05-16 18:37:21803ブラウズ

具体的な結論については、「JavaScript での動的 this と動的バインディングのサンプル コード」を参照してください。この記事では、非侵入的なバインディング関数の設計に焦点を当てます。


[Ctrl A すべて選択 注: 外部 Js を導入する必要がある場合は、更新して実行する必要があります
]

Basedネイティブ オブジェクトを拡張しないことについて 原則として、このバインド関数 (dom がスコープ) を作成しました。その使用法は Prototype フレームワークのバインドと似ています。 コードは次のとおりです。


dom.bind = function(fn,context ){
//必要に応じて、2 番目のパラメータを thisObject,scope,
に変更することもできます。//つまり、新しいスコープ オブジェクトです
if (arguments.length var メソッド = fn,
slice = Array.prototype.slice,
args = slide.call(arguments, 2); /here 元の fn のパラメータを渡します。
var array = slide.call(arguments, 0);
method.apply(context,args.concat(array))
}

使用法: 最初のパラメーターはスコープにバインドする必要がある関数、2 番目のパラメーターはウィンドウまたはさまざまなオブジェクト、その他のパラメーターはオプションです。

[Ctrl A すべて選択 注: 外部 Js を導入する必要がある場合は、更新して実行する必要があります
]

別の例:

[Ctrl A すべて選択 注:
外部 Js を導入する必要がある場合は、<script> window.name = "the window object" function scopeTest() { return this.name } // calling the function in global scope: scopeTest() // -> "the window object" var foo = { name: "the foo object!", otherScopeTest: function() { return this.name } } foo.otherScopeTest() // -> "the foo object!" </script> を実行するために更新する必要があります]<script> dom = {}; dom.bind = function(fn,context){ if (arguments.length < 2 && context===undefined) return fn; var method = fn, slice = Array.prototype.slice, args = slice.call(arguments, 2); return function(){//这里传入原fn的参数 var array = slice.call(arguments, 0); method.apply(context,args.concat(array)) } } window.name = 'This is window'; var jj = { name: '这是jj', alertName: function() {//绑定失效 alert(this.name); } }; var kk = { name:"kkです" } function run(f) { f(); } run(jj.alertName); var fx2 = dom.bind(jj.alertName,jj) run(fx2); var fx3 = dom.bind(jj.alertName,window) run(fx3); var fx4 = dom.bind(jj.alertName,kk) run(fx4); </script>
声明:
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。