javascript高級プログラミング学習ノート(一)——対象

完全なJavaScript実装は、以下の3つの異なる部分から構成されています.コア(ECMAScript)、ドキュメントオブジェクトモデル(DOM)とブラウザオブジェクトモデル(BOM)から構成されています.前の記事はDOMについての理解と把握を書いていますが、今はECMAScriptについての勉強を整理しています.基礎的なものは多く話しません.そして、www.w 3 school.com.cnにはすでに説明がはっきりしています.
1、オブジェクトを作成する方法:(1)オリジナルの方法
var oCar=new Object;
ocal.co lor=「blue」
oCard.doors=4
oCard.mpg=25
oCard.showColor=function(){
alert(this.co lor)
｝
(2)工場方式
function createcal(){
var oTempcal=new Object;
o Tempcal.co lor=「blue」
o Tempcal.doors=4
o Tempcal.mpg=25
o Tempcal.showColor=function(){

alert(this.color);

｝
return oTempcal;
)
var oCar 1=createCar();
var oCar 2=createCar();
上記のような関数伝達パラメータの種類にも変更できます.
function createCar(sColor,iDors,iMpg)｛
var oTempcal=new Object;
o Tempcal.co lor=s Color;
o Tempcal.doors=iDors;
o Tempcal.mpg=iMpg;
o Tempcal.showColor=function(){

alert(this.color);

｝
return oTempcal;
)
var oCar 1=createCar(「red」、4、23);
var oCar 2=createCar(「blue」、3、25);
oCard 1.show Color()//出力「red」
oCard 2.show Color()
しかし、上記のように、オブジェクトを作成するたびに関数を作成する必要がありますので、次のようになりましたが、意味的には対象に向けた方法とはあまり似ていません.
function showColor(){
alert(this.co lor)
)
function createCar(sColor,iDors,iMpg)｛
var oTempcal=new Object;
o Tempcal.co lor=s Color;
o Tempcal.doors=iDors;
o Tempcal.mpg=iMpg;
o Tempcal.showColor=showColor;
return oTempcal;
)
var oCar 1=createCar(「red」、4、23);
var oCar 2=createCar(「blue」、3、25);
oCard 1.show Color()//出力「red」
oCard 2.show Color()
(3)コンストラクタ方式ですが、関数の生成を繰り返す問題があります.
function Car(s Color,iDors,iMpg){
this.co lor=s Color;
this.doors=i doors;
this.mpg=iMpg
this.showColor=function(){

alert(this.color);

｝
)
var oCar 1=new Car(「red」、4,23);
var oCar 2=new Car(「blue」、3,25);
(4)原型の方式
基本的なプロトタイプは以下の通りです.
)
Card.prototype.co lor=「blue」
Card.prototype.doors=4;
Card.prototype.mpg=25;
Card.prototype.showColor=function()
alert(this.co lor)
｝
var oCar 1=new Car();
var oCar 2=new Car();
しかし、上記のような問題があります.複数のインスタンスが必要であれば、共有対象は不可能です.
function Car(){
)
Card.prototype.co lor=「blue」
Card.prototype.doors=4;
Card.prototype.mpg=25;
Card.prototype.drivers=new Aray(「Mike」「John」)
Card.prototype.showColor=function()
alert(this.co lor)
｝
var oCar 1=new Car();
var oCar 2=new Car();
oCal 1.drivers.push(「Bill」);
alert(oCal 1.drivers)//出力「マイク、ジョン、ビル」
alert(oCard 2.drivers)//出力「マイク、ジョン、ビル」
以上の問題に対して、混合の構造関数/プロトタイプ方式があります.
function Car(s Color,iDors,iMpg){
this.co lor=s Color;
this.doors=i doors;
this.mpg=iMpg
this.drivers=new Aray(“Mike”、“John”);
)
Card.prototype.showColor=function()
alert(this.co lor)
｝
var oCar 1=new Car(「red」、4,23);
var oCar 2=new Car(「blue」、3,25);
oCal 1.drivers.push(「Bill」);
alert(oCal 1.drivers)//出力「マイク、ジョン、ビル」
alert(oCard 2.drivers)//出力「マイク、ジョン」
このように関数は一回だけ作成します.各オブジェクトは自分のオブジェクト属性を持っています.
上記の方式は対象とあまり似ていないように見えるので、動的原型方式(以下のように)でこの種類を書き換えました.
function Car(s Color,iDors,iMpg){
this.co lor=s Color;
this.doors=i doors;
this.mpg=iMpg
this.drivers=new Aray(“Mike”、“John”);
if(typeof Cal.uinitialized==「undefined」)｛

Car.prototype.showColor = function() {

  alert(this.color);

};

Car._initialized = true;

)
)
(7)ハイブリッド工場方式(工場方式に対して、この方式はnewオペレータを使用するので、本物のコンストラクタのように見える):
function Car(){
var oTempcal=new Object;
o Tempcal.co lor=「blue」
o Tempcal.doors=4
o Tempcal.mpg=25
o Tempcal.showColor=function(){

alert(this.color);

｝
return oTempcal;
)
var car=new Car();
学習まとめ:prototypeの出現は主にjavascriptの対象に向けてプログラミングするためです.混合の構造関数/プロトタイプ方式は一番よく使われています.この方式を使えない時は、普通は混合工場方式を採用します.