【jQuery】jQuery.fn.extendってなんだ？ってなったときの備忘録

前にjQuery.fn.extend({…})って書き方のコードを参考にしたことがあってそれをカスタマイズしたら動かなくなったのでjQuery.fn.extendってなんだ?って調べた時の備忘録

関数を作るとプロトタイプが生成される

まず、jQuery.fn.extendについて語る前にjavascriptで関数を作ると「プロトタイププロパティ」というものがデフォで生成されるみたい

で、そのプロトタイププロパティにはメソッドを持たせる事ができて、インスタンスを生成しても継承することができるみたい
以下はプロトタイププロパティの使い方

// 適当な関数を用意
function test() {}
// オブジェクト名.prototype.メソッド名= function() {};
test.prototype.keishou = function() {
  console.log('プロトタイプに設定すると継承します');
};
// 関数オブジェクトのインスタンスを生成
var test = new test();
test.keishou(); //'プロトタイプに設定すると継承します';

本題、jQuery.fn.extendとは？

jQueryというのはjQuery関数という関数オブジェクトで、普段使ってるjQuery/$('要素名')とかのjQueryや$はjQuery関数のインスタンス、つまり子供

関数なので、当然プロトタイププロパティが存在してjQuery.fn.extendはjQuery.prototypeにメソッドを代入するための記述方法ってことみたい

具体的な説明は参考サイトに詳しく書かれているのでリンク貼っておく

ここからは実際に使い方とjQuery.fnという記述方法もあるから2パターンの書き方について乗っけておく

jQuery(function($){
	jQuery.fn.extend({
	    test01_1: function(){
	    	return 'test01_1だよ';
		},
	    test01_2: function(){
	    	return 'test01_2だよ';
		}
	});
	$().test01_1();// test01_1だよ
	$().test01_2();// test01_2だよ

	jQuery.fn.test02 = function(){
	    return 'test02だよ';
	};
	$().test02();// test02だよ
});

jQuery.fn.extendとjQuery.fnの違いについては詳しく調べてないけど、前者はたくさんメソッドをprototypeに代入できて後者は一つだけって認識で止まってる

調べようとするとjQuery.extendとの違いが出てきて頭痛くなるから今回はここまで

一応thisを使って以下のような使い方もできる

<div id="test">あいうえおかきくけこ</div>

<script>
jQuery(function($){
	jQuery.fn.extend({
	    test01: function(){
	    	var text = this.text();
	    	return text;
		}
	});
	$('#test').test01();// あいうえおかきくけこ
});
</script>

$('#test')の部分を変更すれば他の要素でも使いまわすことができる