AIと戦って、あなたの人生のリスク診断 >>

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

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

このQ&Aに関連する最新のQ&A

A 回答 (4件)

>・書き方が違うだけで同じことを出来るのでしょうか


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/JavaSc …
上のURLはFunction.bindの説明ですが『Polyfill』にこのような記載があります
>bind 関数は ECMA-262 第5版に最近追加されたので、すべてのブラウザに存在するわけではありません。

https://developer.mozilla.org/ja/docs/Web/API/Ev …
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/21 …
    • good
    • 0
この回答へのお礼

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

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

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

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

お礼日時:2014/12/15 00:00

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



jQuery.prototype.bind
http://api.jquery.com/bind/
Function.prototype.bind
https://developer.mozilla.org/ja/docs/Web/JavaSc …

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

# Re: re97さん
    • good
    • 0
この回答へのお礼

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

お礼日時:2014/12/14 23:50

対象がjQueryオブジェクトなのか普通の関数なのか、文脈や引数で判断するのは容易でしょう。


因みに用途は全く異なります。
    • good
    • 0
この回答へのお礼

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

お礼日時:2014/12/14 23:51

JavaScriptで書かれたあるひとつの関数群を「jQuery」と呼んでいるに過ぎず、JavaScriptとjQueryに差はありません。

jQueryという関数群を通してJavaScriptを実行していると考えてもよいでしょう。つまり、jQueryを使おうが使わまいが、最終的には必ずJavaScriptが実行されているのです。従って、通常は、「JavaScriptなのかjQueryなのか判断する」必要がありません。
    • good
    • 0
この回答へのお礼

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

お礼日時:2014/12/14 23:48

このQ&Aに関連する人気のQ&A

お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう!

このQ&Aと関連する良く見られている質問

Q1文字って1バイトだったっけ?

タイトルの通りなんですが
私の記憶では1文字1バイトで漢字が2バイトだったような・・・。
アルファベットは?数字は?わかんないので教えてください。
それと、1バイト=8ビットですよね?
ちょっと興味があるので暇のある方がおられましたら詳しく教えてほしいです。

よろしくおねがいいたします。

Aベストアンサー

全角文字(英語・漢字・数字問わず):2バイト
半角文字:1バイト
では無いでしょうか?

>1バイト=8ビット
その通りです

http://www.pc-view.net/Help/manual/0082.html
などもありますので参考までに

参考URL:http://www.pc-view.net/Help/manual/0082.html

Qhtml で 変数を定義できますか?

html(できればjava不使用)で変数に文字列をいれてつかう、またはそれに近いことはできないでしょうか?

例**************************
$color1="#000000"

<tr bgcolor=$color1>内容1<tr>
<tr bgcolor=$color1>内容2<tr>
****************************
みたいな感じです

Aベストアンサー

調べりゃ分かることは???だけど。

CSS2で無理やり作れば・・簡単だけど・・・
生成内容、自動番号振り、リスト ( http://www.swlab.it.okayama-u.ac.jp/man/rec-css2/generate.html )
 本来はXSLTで作るほうがよいかと・・・
 <th><xsl:value-of select="parson" />の歌</th>


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html lang="ja">
<head>
<meta http-equiv="content-type" content="text/html; charset=Shift_JIS">
<title>サンプル</title>
<meta name="author" content="ORUKA1951">
<meta http-equiv="Content-Style-Type" content="text/css">
<link rev="made" href="mailto:orika1951@hoge.com" title="send a mail" >
<link rel="START" href="../index.html">
<style type="text/css">
<!--
.parson1:before{content:"田中";}
p.age1:after{content:"36歳";}
-->
</style>
</head>
<body>
<h1>サンプル</h1>
<p class="parson1">は男の子</p>
<p class="parson1 age1">の年齢は</p>
<p>私の彼氏は<span class="parson1">君だよ</p>
</body>
</html>

調べりゃ分かることは???だけど。

CSS2で無理やり作れば・・簡単だけど・・・
生成内容、自動番号振り、リスト ( http://www.swlab.it.okayama-u.ac.jp/man/rec-css2/generate.html )
 本来はXSLTで作るほうがよいかと・・・
 <th><xsl:value-of select="parson" />の歌</th>


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html lang="ja">
<head>
<meta http-equiv="content-type" content="text/html; charset=Shift_JIS">
<title>サンプル</title>
<met...続きを読む


人気Q&Aランキング