この記事を読むには、JQの知識とJSの基本的なスキル、そしてプロトタイプの理解が必要です。
javascriptの連鎖プログラミングといえば、jqueryの連鎖操作を思い浮かべずにはいられないフロントエンド開発者も多いと思います。
多くの人が最初にチェインオペレーションを始めるのがここです。
コード例:
$(".box").height(200).width(200);
このコードでは、クラス名.boxを持つ要素の高さと幅を設定します。
コード例:
$(".box").height().width();
コード2の例を実行すると、次のような結果が得られます。
widthは関数ではありません。
明らかに、jqueryはこの幅のメソッドを持っています。
実際、JQの仕組みはだいたいこんな感じです：
//以下は、原則の説明である、非JQのソースコード
function $(){
var obj = ...
return obj;
}
$.prototype.width = function(val){
if(val){
幅を変更する...
return this; //関数が参照を持っている場合、操作が完了すると、JQオブジェクト自体に戻る。
} else {
return ; //関数の参照がない場合は、幅を返す
}
}
$.prototype.height = function(val){
if(val){
高さを変更する...
return this; //関数が参照を持っている場合、操作が完了すると、JQオブジェクト自体に戻る。
} else {
return ; //関数の参照がない場合は、高さを返す
}
}
コード例1に戻り、プロセスを以下に示します：
コード2の例では、height()メソッドは要素の高さを取得しており、要素の高さを数値として返します。
番号に対してメソッドを呼び出すことはできないので、連鎖呼び出しは切れ、以下のような処理になります：
概要:
jqueryのチェーンプログラミングは、一般的に操作をセットするために使用されますが、操作を取得するためには使用できません。
連鎖呼び出しの核心は、関数が実行の最後にカレント・オブジェクトである thisを返すことです。
次に、javascriptを使って練習します。
function Person(){
this.age=20;//デフォルト値は20である。;
}
//年齢設定メソッドをプロトタイプ経由でPersonコンストラクタに追加する
Person.prototype.setAge=function(num){
this.age=num;
}
//Personコンストラクタにメソッドを追加し、プロトタイプから年齢を取得する。
Person.prototype.getAge=function(){
return this.age;
}
チェーンコール
console.log(new Person().setAge(30).getAge()); //
エラーメッセージ： getAge属性がありません
上の Person コンストラクタのコードを再度変更します；
//年齢設定メソッドをプロトタイプ経由でPersonコンストラクタに追加する
Person.prototype.setAge=function(num){
this.age=num;
return this;
}
もう一度やってください。
console.log(new Person().setAge(30).getAge()); //30
もう一度、要約すると
javascriptの連鎖プログラミングの中核は、thisを返すことです；
チェーンプログラミングの利点。
コードがシンプルでエレガントになります。
連鎖プログラミングの欠点。
(a)過度に長いチェーンは、操作が不明瞭になりやすく、維持が難しく、理解しにくい。
