javascript建立對象(二)
原型模式:每建立一個函數都有一個prototype屬性,它是一個指標,指向一個對象; 原型模式建立函數的方式: 1 function Movie(){ 2 3 }; 4 Movie.prototype.name="Interstellar"; 5 Movie.prototype.year=2014; 6 Movie.prototype.country="American"; 7 Movie.prototype.playMovie=function(){ 8 alert(this.name); 9 }10 11 var movie1=new Movie();12 movie1.playMovie();//Interstellar;13 var movie2=new Movie();14 movie2.playMovie();//Interstellar;15 16 alert(movie1.playMovie==movie2.playMovie);//true 有別於建構函式 對象字面量的方式 1 function Movie(){ 2 3 }; 4 Movie.prototype={ 5 name:"Interstellar", 6 year:2014, 7 country:"American", 8 playMovie:function(){ 9 alert(this.name);10 }11 }12 //這種方式原型對象的contructor屬性不會指向Movie了,而是指向Object了。 每當代碼讀取某個屬性時,都會先搜尋對象執行個體本身,沒有就繼續搜尋指標指向的原型對象,如果有就結束;通過hasOwnProperty()可以檢測屬性是存在執行個體中還是原型中: 1 function Movie(){ 2 }; 3 Movie.prototype.name="FleetOfTime"; 4 Movie.prototype.year=2014; 5 Movie.prototype.country="China"; 6 Movie.prototype.playMovie=function(){ 7 alert(this.name); 8 } 9 var movie1=new Movie();10 alert(movie1.hasOwnProperty("name"));//原型上的 false11 movie1.name="xxxx";12 alert(movie1.hasOwnProperty("name"));//覆蓋了原型上的,變成執行個體上的了 true 原型的動態性:對原型對象所做的任何修改都能夠立即從執行個體中反映出來,例: 1 var movie=new Movie();2 Movie.prototype.playOne=function(){3 alert("One");4 };5 movie.playOne();//"One"6 7 //給Movie原型對象添加了一個方法 但是如果是重寫整個原型對象的話,那麼就等於切斷了建構函式與最初原型之間的聯絡了: 1 function Movie(){ 2 3 } 4 5 var movie=new Moive(); 6 //重寫原型對象 7 Movie.prototype={ 8 constructor:Movie,//對象字面量方式強制指向Movie,本來指向Object 9 name:"xxx",10 year:2012,11 country:"xxxx",12 sayName:function(){}13 }14 //這時候調用sayName()方法會出錯15 movie.sayName();//error 原型對象的問題:對於包含參考型別值的屬性來說,就有很大問題了,如下例子 1 function Movie(){ 2 } 3 Movie.prototype={ 4 constructor:Movie, 5 name:"xxx", 6 year:2014, 7 place:["China","Japan"], 8 playName:function(){ 9 alert(this.name);10 }11 }12 var movie1=new Movie();13 var movie2=new Movie();14 15 movie1.place.push("korea");16 17 alert(movie1.place)//"China,Japan,Korea"18 19 alert(movie2.place)//"China,Japan,Korea"20 21 //這裡本來是想只改變movie1的place,結果也改到了movie2的 最好的建立對象方式:建構函式來定義執行個體屬性,原型模式來定義方法和共用屬性; 1 function Movie(name,year,country){ 2 this.name=name; 3 this.year=year; 4 this.country=country 5 this.place=["China","Japan"]; 6 } 7 Movie.prototype={ 8 constructor:Movie, 9 playName:function(){10 alert(this.name);11 }12 }13 14 var movie1=new Movie("Interstellar",2014,"American");15 var movie2=new Movie("FleetOfTime",2014,"China");16 movie1.place.push("Korea");17 alert(movie1.place);//"China,Japan,Korea"18 alert(movie2.place);//"China,Japan"19 20 alert(movie1.place==movie2.place);//false21 alert(movie1.playName==movie2.playName);//true