質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
85.50%
JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

jQuery

jQueryは、JavaScriptライブラリのひとつです。 簡単な記述で、JavaScriptコードを実行できるように設計されています。 2006年1月に、ジョン・レシグが発表しました。 jQueryは独特の記述法を用いており、機能のほとんどは「$関数」や「jQueryオブジェクト」のメソッドとして定義されています。

Q&A

解決済

2回答

1532閲覧

$.fnオブジェクト

tkshp

総合スコア174

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

jQuery

jQueryは、JavaScriptライブラリのひとつです。 簡単な記述で、JavaScriptコードを実行できるように設計されています。 2006年1月に、ジョン・レシグが発表しました。 jQueryは独特の記述法を用いており、機能のほとんどは「$関数」や「jQueryオブジェクト」のメソッドとして定義されています。

0グッド

0クリップ

投稿2018/08/28 09:51

編集2018/08/29 04:51

前提・実現したいこと

$.fnオブジェクトとはどういうものなのでしょうか?

こちらのサイトを見ると、
$.fnオブジェクトに独自メソッドを入れると、自分でプラグインが作成できるというのはわかりましたが、
いきなり出てきた$.fnオブジェクトというものが、どう捉えてよいかわかりません。

$.fnオブジェクトとは、jQueryの基底クラスみたいなイメージで合っていますか?

メモ。

jQuery

1 console.log(jQuery === $); //true; 2 console.log(jQuery.fn === $.fn); //true; 3 console.log(jQuery.prototype === jQuery.fn); //true; 4 console.log(jQuery.prototype === $.fn); //true; 5 console.log($.prototype === $.fn); //true;

JavaScriptでは、すべてのオブジェクトが「プロトタイプ」をベースにして作られている。
言い換えれば「プロトタイプ」と呼ばれる最小テンプレートがあり、それを参照して新しいオブジェクトを作るようなイメージである。
$.fnオブジェクトは、$.prototype(jQuery.prototype)と等価であり、jQueryの最小テンプレートである。
ちなみに、$はjQueryの書き換えである。

https://www.sejuku.net/blog/47722

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

guest

回答2

0

ベストアンサー

jQuery.prototype

jQuery()new jQuery は等価です。

JavaScript

1jQuery.prototype === jQuery.fn

最小テンプレート

つまり、$.fnオブジェクトは、jQueryの最小テンプレートということですね?

「最小テンプレートとは何ぞ?」という思いで読んでいましたが、https://www.sejuku.net/blog/47722 に書かれている用語でしたか。
これはプログラミング用語ではなく、筆者が独自に発明した用語だと思います。
他人に説明するときに使う言葉ではないですね。

「生成されたオブジェクトの雛型となるもの」という意味ではテンプレートに例えるのは間違っていませんが、その延長で「最小テンプレート」と言われると、プロトタイプチェーンの最上位にあるオブジェクトを指すように聞こえます。
(そもそも、雛型という意味では初めから「プロトタイプ」と書かれていますので、わざわざ「テンプレート」に改変する必要がないのでは)

  • new jQuery のテンプレートは jQuery.prototype である
  • new jQuery最小テンプレートObject.prototype である

しかし、例えはあくまで例えであって、本質を表すものではありません。
仮に、雛形という例えをとるにしても、「プロパティの雛形」という方が本質に踏み込めます。
「例え」を厳密に再定義していくと、いつしかそれは「例え」ではなくなります。
言い換えれば、いろいろな概念を曖昧にぼかしてしまうのが「例え」です。

「例え」は置いておくとして、まず、プロトタイプチェーンを理解してください。
そこだけ理解すれば、残りは自ずと理解できます。

言い換えれば「プロトタイプ」と呼ばれる最小テンプレートがあり、それをコピーして新しいオブジェクトを作るようなイメージである。

コピーしているわけではありません。参照しています。

Re: tkshp さん

投稿2018/08/28 10:33

編集2018/08/29 03:55
think49

総合スコア18156

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

tkshp

2018/08/29 02:05

ご回答ありがとうございます。 prototypeというものがどういうものか分からなかったのですが、調べてみて最小テンプレートであることがわかりました。 つまり、$.fnオブジェクトは、jQueryの最小テンプレートということですね? 調べたことを追記してメモにまとめました。 間違っていたら、ご指摘いただきたくお願い致します。
think49

2018/08/29 03:56

親記事に追記しました。
tkshp

2018/08/29 04:51

ご回答ありがとうございます。 プロトタイプチェーンについて勉強しようと思います。
guest

0

jQueryオブジェクトにメソッドを追加できます
例えばこんな感じ

javascript

1<script> 2$.fn.myFunc=function(x){$(this).val(x);} 3$(function(){ 4 $('#btn').on('click',function(){ 5 $(this).myFunc("fuga"); 6 }); 7}); 8</script> 9<input type="button" id="btn" value="hoge">

投稿2018/08/28 10:26

yambejp

総合スコア114572

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

tkshp

2018/08/29 02:06

ご回答ありがとうございます。 勉強になりました。
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
85.50%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問