JavaScriptとjQueryのbindの違い

質問

JavaScriptとjQueryのbindの違いについて教えてください。

・書き方が違うだけで同じことを出来るのでしょうか
・bindが記述されているとき、それがJavaScriptなのかjQueryなのかどうやって判断するのでしょうか？　引数？　あるいは文脈？

回答No.4

byDesign · ベストアンサー

>・書き方が違うだけで同じことを出来るのでしょうか
javascriptのbindの事がFunction.bindの事を指しているのであれば
jQueryのbindとは機能が違います。
Function.bindに相当するのはjQuery.proxyになります。

逆に、jQuery.bindに相当するのはEventTarget.addEventListenerになります。

>・bindが記述されているとき、それがJavaScriptなのかjQueryなのかどうやって判断するのでしょうか？
関数を呼ぶときにxxx.bind(...)と書くと思いますが。
xxx部分のオブジェクトが何かで判断します。

jQueryオブジェクトであればjQuery.bind
functionであればfunction.bindとなります。

var $button = $('#id');
$button.bind('click', function(){ console.log('click'); });
^^^^^
ここがjQueryオブジェクトなので、jQuery.bind

var click = function(){ console.log('click'; )};
click.bind(this);
^^^^^
ここがFunctionなので、Function.bind

---------------------------------------------------
ではなぜ,Funcion.bindやEventTarget.addEventListenerがあるのに、jQueryはそれに相当するjQuery.proxyやjQuery.bindを作るのか？

それは、Funcion.bindやEventTarget.addEventListenerはすべてのブラウザーで動かないのが原因です。

https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Global_Objects/Function/bind
上のURLはFunction.bindの説明ですが『Polyfill』にこのような記載があります
＞bind 関数は ECMA-262 第5版に最近追加されたので、すべてのブラウザに存在するわけではありません。

https://developer.mozilla.org/ja/docs/Web/API/EventTarget.addEventListener
addEventListenerの説明も『古い Internet Explorer と attachEvent』の部分でこのような記載があります
＞IE9 より前の Internet Explorer では、標準の addEventListener ではなく、 attachEvent を使わなければなりません。

このようにブラウザー毎に、関数がなかったり、名前が違ったりします。
この挙動の違いをjQueryが吸収するように作れられていて。
jQuey.proxyでは、Function.bindが無くても問題ないように
jQuey.bindは、addEventListenerとattachEventどちらを呼ぶか振り分けたりするよになっています。

----------------------------------
予断ですが、jQuery.bindは古い書き方で、今はjQuey.onに置き換わっています、
http://tacamy.hatenablog.com/entry/2013/03/03/213113

お礼

回答ありがとうございました。

＞Function.bindに相当するのはjQuery.proxyになります。
＞逆に、jQuery.bindに相当するのはEventTarget.addEventListenerになります
・ここら辺り混乱していたので、大変参考になりました

＞なぜ,Funcion.bindやEventTarget.addEventListenerがあるのに、jQueryはそれに相当するjQuery.proxyやjQuery.bindを作るのか？
・突っ込んだ解説をいただき、ありがとうございます
・なぜだろう？ と思っていたので、大変勉強になりました

＞予断ですが、jQuery.bindは古い書き方で、今はjQuey.onに置き換わっています
・アドバイスありがとうございます
・バージョンアップに伴い、jQueryの書き方って、結構変わるんですね
・大変参考になりましたー

回答No.3

think49

jQuery.prototype.bind と Function.prototype.bind は用途も所属オブジェクトも異なります。

jQuery.prototype.bind
http://api.jquery.com/bind/
Function.prototype.bind
https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Global_Objects/Function/bind

jQuery.prototype.bind の場合、 bind プロパティの所属オブジェクトが jQuery オブジェクトになりますので、所属オブジェクトを確認するだけで判断可能です。
Function.prototype.bind は関数のプロパティですので、所属オブジェクトが関数なら該当します。

# Re: re97さん

お礼

回答ありがとうございました。
・用途も所属オブジェクトも異なるのに同名ってあり得るんですね
・大変参考になりましたー

回答No.2

b0a0a

対象がjQueryオブジェクトなのか普通の関数なのか、文脈や引数で判断するのは容易でしょう。
因みに用途は全く異なります。

お礼

回答ありがとうございましたー

回答No.1

tracer

JavaScriptで書かれたあるひとつの関数群を「jQuery」と呼んでいるに過ぎず、JavaScriptとjQueryに差はありません。jQueryという関数群を通してJavaScriptを実行していると考えてもよいでしょう。つまり、jQueryを使おうが使わまいが、最終的には必ずJavaScriptが実行されているのです。従って、通常は、「JavaScriptなのかjQueryなのか判断する」必要がありません。

お礼

回答ありがとうございましたー