JavaScript學習總結--建立對象(5_仍是原型)

這咋還沒完沒了呢?咱們以前使用原型+構造函數混合模式建立對象時是這樣子寫的函數

function Person(name,age){
  this.name=name;
  this.age=age;
}
Person.prototype.sayName=function(){
   console.log(this.name);
}
var person1=new Person('Sakura',22);
person1.sayName();

很明顯的一個問題就是,這段代碼建立的對象彷佛沒有咱們想象中那麼完美,Person.prototype寫在了構造函數外面,這樣看起來很彆扭,咱們說封裝,這咋沒封到一塊,咋還分道揚鑣了?this

那麼我就想應該寫成這樣纔對吧spa

function Person(name,age){
  this.name=name;
  this.age=age;
  Person.prototype.sayName=function(){
    console.log(this.name);
  }
}
var person1=new Person('Sakura',22);
person1.sayName();

是否是很完美,perfect對不對?prototype

可是咱們再來作一個實驗設計

function Person(name,age){
  this.name=name;
  this.age=age;
  console.log('原型建立開始');
  Person.prototype.sayName=function(){
    console.log(this.name);
  }
  console.log('原型建立結束');
}
var person1=new Person('Sakura',22);
var person2=new Person('Misaka',20);

這段代碼的意思是,每次實例化對象初始化原型對象以前都會在控制檯輸出一句話,建立完畢也會輸出一句話,那麼運行結果呢?code

很明顯這有問題啊,實例化了兩個對象,而後這個原型被初始化了兩次,這不是浪費嗎,咱們是否是應該在初始化原型對象前先確認一下原型中是否存在某個方法,若是存在就再也不初始化,若是不存在而後再初始化原型?對象

因此這纔是爲師的徹底體blog

function Person(name,age){
  this.name=name;
  this.age=age;
  if(typeof this.sayName !='function'){
    console.log('原型建立開始');
    Person.prototype.sayName=function(){
      console.log(this.name);
    }
    console.log('原型建立結束');
  }
}
var person1=new Person('Sakura',22);
var person2=new Person('Misaka',20);

//原型建立開始
//原型建立結束

妥妥的,這種方法只須要if判斷一次便可,也避免了原型重複初始化的問題,這叫作動態原型模式ip

不過有一點須要注意的是,使用動態原型模式時,不能使用對象字面量重寫原型,由於在已經建立了實例的狀況下,重寫原型就會切斷現有實例與新原型之間的聯繫原型

so,方法有不少種,選擇適合本身的纔好

我用五篇博文闡述了封裝對象的幾種常見方法(沒看過的小夥伴能夠往前翻一翻),本人也只是自學了幾個月的初學者,若是文中有什麼寫的不對的地方歡迎留言指出,我會及時改正

我刻意的省去了一些專業術語(好比封裝以及面向對象等),是爲了不初學者以爲過於晦澀難懂,也是爲了讓初學者看完以爲「哦,原來這就是面向對象的封裝啊」,不至於被一些術語砸的暈頭轉向

文中的例子以及部分概念引用自《JavaScript高級程序設計》

另外封裝對象還有兩種較爲少見的方法,將在後續博文中補全

相關文章
相關標籤/搜索