prototype.js

継承その2

<script>
var Nabe = function(){
	this.initialize.apply(this, arguments);
}
Nabe.prototype = {
	initialize : function(dasi, yasai){
		this.dasi = dasi;
		this.yasai = yasai;
	},
	toString : function(){
		var cook = [];
		cook.push(this.dasi, this.yasai);
		return cook.join('/');
	}
};
function extend(destination, source){
	for(p in source){
		destination[p] = source[p];
	}
	return destination;
}

Nabe_dx = function(){
	this.initialize.apply(this, arguments);
}

extend(Nabe_dx.prototype, Nabe.prototype);

Nabe_dx.prototype = {
	initialize : function(dasi, yasai, main){
		Nabe.prototype.initialize.apply(this, [dasi, yasai]);
		this.main = main;
	},
	toString : function(){
		var cook = [];
		cook.push(Nabe.prototype.toString.apply(this), this.main);
		return cook.join('*');
	}
};
var fuguchiri = new Nabe_dx('konbu', 'hakusai', 'fugu');
alert(fuguchiri);

Nabe.prototype.toString = function(){
	var cook = [];
	cook.push(this.dasi, 'yasai_irane');
	return cook.join('%');
}
alert(fuguchiri);
</script>
  • extend関数はなくても同じ結果になるが、とりあえずprototype.jsを理解する上であえてこのようにしてみた。コードが分かりやすくなる点では効果があると思う。
  • 以上の書き方だと、親クラスのメソッドを変更すると、サブクラスにも影響が出る。出ないようにするためにはNabe.prototype.[メソッド].applyを使わなければおk

継承

  • 関数はnew演算子が用いられることでコンストラクタ関数となる。
<script>
var Nabe = function(){
	this.initialize.apply(this, arguments);
}
Nabe.prototype = {
	initialize : function(dasi, yasai){
		this.dasi = dasi;
		this.yasai = yasai;
	},
	toString : function(){
		var cook = [];
		cook.push(this.dasi, this.yasai);
		return cook.join('/');
	}
};


var Nabe_dx = function(){
	this.initialize.apply(this, arguments)
};
Nabe_dx.prototype = {
	initialize : function(dasi, yasai, main){
		Nabe.prototype.initialize.apply(this, [dasi, yasai]);
		this.main = main;
	},
	toString : function(){
		var cook = [];
		cook.push(Nabe.prototype.toString.apply(this), this.main);
		return cook.join('*');
	}
}

var fuguchiri = new Nabe_dx('konbu', 'hakusai', 'fugu');
alert(fuguchiri);
</script>