js建立物件

qingyezhu發表於2015-10-25
JS物件

本人常用的建立物件的方式，僅供參考，歡迎吐槽，謝謝！

 

建立物件
1、物件字面量，即使用大括號，如下：

(function(){

  var obj = {
    id: 1,
    desc: '建立物件測試開始啦！',
    show: function(){
      console.log("id=%d, desc=%s", this.id, this.desc);
    }
  };
 
  obj.show();
})();


2、建構函式

(function(){

  function Animal(name, age){
    this.name = name;
    this.age = age;
    this.show = function(){
      console.log("該動物是%s,今年%d歲", this.name, this.age);
    }
  }
  
  var cat = new Animal('貓咪', 3);
  cat.show();

})();

一種錯誤：

(function(){

  function Animal(){
  }
  
  Animal.prototype.name = '貓咪';
  Animal.prototype.age = 3;
  Animal.prototype.show = function(){
     console.log("該動物是%s,今年%d歲", this.name, this.age);
  };
 
  animal = Animal();
  animal.show();//TypeError: animal is undefined

})();

 

解決方案

(function(){

  function Animal(){
    if( !(this instanceof Animal) ){
      return new Animal(); 
    }
  }
  
  Animal.prototype.name = '貓咪';
  Animal.prototype.age = 3;
  Animal.prototype.show = function(){
     console.log("該動物是%s,今年%d歲", this.name, this.age);
  };
 
  animal = Animal();
  animal.show();//該動物是貓咪,今年3歲

})();

 


3、原型模式

(function(){

  function Animal(){

  }
  
  Animal.prototype.name = '貓咪';
  Animal.prototype.age = 3;
  Animal.prototype.show = function(){
     console.log("該動物是%s,今年%d歲", this.name, this.age);
  };
  
  var animal = new Animal();
  animal.show();//該動物是貓咪,今年3歲
  
  animal.name = "狗熊";
  animal.age = 14;
  animal.show();//該動物是狗熊,今年14歲
  
  delete animal.name;
  animal.show();//該動物是貓咪,今年14歲

})();

備註：當刪除物件的屬性時，為啥從該物件的name，從狗熊變成了貓咪了呢？這是跟JS中屬性的查詢有關！首先其先從該物件的屬性中查詢若有，則立即返回，當沒有，再到其原型中查詢，若有則立即返回，最後當找不到時，則返回undefined

 

什麼是原型？

1、我們建立的每一個函式都有一個prototype屬性，這個屬性是一個物件，它的用途是包含有特定型別的所有例項共享的屬性和方法。
2、只要建立了一個新函式，就會為該函式建立一個prototype屬性。預設情況下，所有prototype屬性都會自動獲得一個constructor屬性，這個屬性包含一個指向prototype屬性所在函式的指標。這樣，函式以及函式原型之間就形成了迴圈指向了。
3、每當呼叫建構函式建立一個新例項後，該例項的內部將包含一個指標(一般指__proto__)，指向建構函式的原型屬性。

 

 

參考資料：

有圖的，很有意思：http://www.cnblogs.com/maxupeng/archive/2010/12/28/1918480.html

 

相關文章