js面向對象,多種創建對象方法!


少說話,多干事,FIRE!!!!!

開始創建對象:

 1.對象字面量。

 var clock={
  hour:12,
  minute:10,
  second:10,
  showTime:function(){
   alert(this.hour+":"+this.minute+":"+this.second);
  }
 }
 clock.showTime();//調用

2.創建Object實例

 var clock = new Object();
 clock.hour=12;
 clock.minute=10;
 clock.showHour=function(){alert(clock.hour);};

 clock.showHour();//調用

由此可見 屬性是可以動態添加,修改的

 

對象創建模式:

1.工廠模式:就是一個函數,然后放入參數,返回對象,流水線工作

 function createClock(hour,minute,second){
  var clock = new Object();
   clock.hour=hour;
   clock.minute=minute;
   clock.second=second;
   clock.showHour=function(){
   alert(this.hour+":"+this.minute+":"+this.second);
  };
  return clock;
 };
 var newClock = createClock(12,12,12);//實例化
 newClock.showHour();//調用

優點:總算優點抽象的概念了。但是不能識別對象的類型呢!

2.構造函數模式

 function clock(hour,minute,second){
  this.hour = hour;
  this.minute = minute;
  this.second = second;
  this.showTime = function(){
   alert(this.hour+":"+this.minute+":"+this.second);
  }
 }
 var newClock =new  clock(12,12,12); 
 alert(newClock.hour);

 注意:這個new關鍵字是必須,如果不加,clock就不會當成構造函數調用,而只是一個普通的函數。同時,還會意外地給他的外部作用域即window添加屬性,因為此時構造函數內部的this已經映射到了外部作用域了。所以為了安全起見,可以這樣創建

 function clock(hour,minute,second){
  if(this instanceof clock){
   this.hour = hour;
   this.minute = minute;
   this.second = second;
   this.showTime = function(){
    alert(this.hour+":"+this.minute+":"+this.second);
   }
  }
  else{
   throw new Error("please add 'new' to make a instance");
  }
 }

構造函數的缺點:由於this指針在對象實例的時候發生改變指向新的實例。這時新實例的方法也要重新創建,如果n個實例就要n次重建相同的方法。於是讓我們來揭開原型模式吧

3.原型模式

  function clock(hour,minute,second){
 }
 clock.prototype.hour=12;
 clock.prototype.minute=12;
 clock.prototype.second=12;
 clock.prototype.showTime=function(){
  alert(this.hour+":"+this.minute+":"+this.second);
 }
 var newClock = new clock();
 newClock.showTime();

深度理解原型模型很重要,

首先,每個函數都有一個prototype(原型)屬性,這個指針指向的就是clock.prototype對象。而這個原型對象在默認的時候有一個屬性constructor指向clock,這個屬性可讀可寫。而當我們在實例化一個對象的時候,實例newClock除了具有構造函數定義的屬性和方法外(注意,只是構造函數中的),還有一個指向構造函數的原型的指針,ECMAScript管他叫[[prototype]],這樣實例化對象的時候,原型對象的方法並沒有在某個具體的實例中,因為原型沒有被實例。(廢話有點多,沒有誤導您吧。別暈)

所以這種模式定義的對象,在調用方法的時候過程:調用newClock.showTime();先看實例中有沒有,有調之,無追蹤到原型,有調之,無出錯,調用失敗。

當然可以這樣寫:

 function clock(hour,minute,second){
 }
 clock.prototype={
  constructor:clock,    //必須手動設置這個屬性,不然就斷了與構造函數的聯系了。沒有實例共享原型的意義了。
  hour:12,
  minute:12,
  second:12,
  showTime:function(){
   alert(this.hour+":"+this.minute+":"+this.second)
  }
 }
 var newClock = new clock();
 newClock.showTime();

 注意:實例與構造函數原型的聯系也是通過指針來聯系的,故可以動態添加修改原型的方法。

這種純原型的模式問題也很明顯,所有的屬性,方法都是共享的,不能讓對象具體化。常常我們想每個對象有自己的屬性。於是,結合前兩種,產生新的模式

4.構造-原型組合模式。

 function clock(hour,minute,second){
  this.hour = hour;
  this.minute = minute;
  this.second = second;
 }
 
 clock.prototype.showTime=function(){alert(this.hour+":"+this.minute+":"+this.second);}
 var newClock = new clock(12,12,12);
 newClock.showTime();

這里我們將屬性放在構造函數中,更顯得對象的具體性。

 

這算是我對js對象的理解,歡迎您留下您的感悟,願與君共勉!!


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM