很開心，最近收穫了很多知識，而且發現很多東西，以前理解的都是錯的，或者是膚淺的，還以為自己真的就get到了精髓，也很抱歉會影響一些人往錯誤的道路上走，不過這也告訴了我們，看任何一篇文章都不能盲目的去相信，要實踐驗證再驗證。今天就重新整理一下，我對面向物件的理解，當然也不保證完全正確的，但絕對是在進步的，拋磚引玉，希望能帶來一些新的感悟。

     物件，通俗的來說，就是屬性和方法。定義就不再多說，下面說物件的建立：

1 建立一個物件

var obj = new Object(); //建立一個空物件
obj.name = 'haha';
obj.showName = function
 
(){ 
   alert(obj.name);
}
obj.showName();

缺點：當我們想建立多個面向物件的時候，重複程式碼過多，需要封裝，所以有了下面的方法

2  工廠方式

function CreatePerson(name){ 
    //原料
   var obj = new Object();
    //加工
   obj.name = name;
   obj.showName = function(){ 
       alert(this.name);
   }
   //出廠
   return obj;
}

var p1 = CreatePerson('haha');
p1.showName();
 
var p2 = CreatePerson('hehe');
p2.showName();

這其實就是簡單的封裝函式，整個過程像工廠的流水線，所以叫工廠方式

缺點：無法識別建立的物件的型別。因為全部都是Object，沒有區分度，不像Date、Array等，因此出現了建構函式模式。

3 建構函式模式

我們要通過這二個方面來改變：1 函式名首字母大寫  2 New 關鍵字呼叫

function CreatePerson(name){ 
     this.name = name; 
     this.showName = function(){ 
        alert(this.name); 
     } 
} 
 
var p1 =new CreatePerson('haha'); 
 p1.showName();
var p2 = new CreatePerson('hehe');
 p2.showName();

1首字母大寫，是為了區別於普通的函式，建構函式本身就是普通的函式，只是我們專門用它來實現了構造的功能，所以專門起了一個名字叫建構函式，任何函式都可以成為建構函式，這取決於你呼叫函式的方式。是否用了New。

2 呼叫函式的時候用了 New關鍵字，那麼New到底做了什麼？用不用New有什麼區別？再來看下面的例子

function CreatePerson(name){   
  this.name = name; 
  this.showName = function(){ 
    alert(this.name); 
  };
  console.log(this);
} 

new CreatePerson('haha'); //CreatePerson{}
CreatePerson('haha');  //window

我們會發現當用New去呼叫一個函式的時候，this的指向會不一樣。其實New主要做了下面這些事，不過下面寫的只是大概的行為，並不是內部原始碼。

function CreatePerson(name){   
  var res = {};  //宣告一個空物件res
  res._proto_= CreatePerson.prototype;//這個物件的_proto_屬性指向建構函式的原型物件,這樣res就可以呼叫CreatePerson原型物件下的所有方法
  CreatePerson.apply(res);//把this指向改為res物件
  this.name = name;  //res物件新增屬性，方法
  this.showName = function(){ 
    alert(this.name); 
  };
  return res;//返回這個物件
} 

關於New做時候都是內部的行為，看不到但確實存在，關於上面原型可以先大概知道結論，下面會說原型，接著看就懂了。

函式構造模式存在的問題：

alert(p1.showName==p2.showName);//false

測試這個程式碼，兩個方法是不相同的，也就是說這兩個物件並不是共用一個方法，每new一次，系統都會新建立一個記憶體，這兩個物件各自有各自的地盤，但他們具有相同的功能，還不共用，肯定不是我們所希望的。所以就有了下一種方法，原型+構造模式

4 原型+構造模式

每個函式都有一個prototype屬性，它是一個物件，也稱作原型物件，這個原型物件，我們可以把方法和屬性寫在它上面（不過原型物件不僅僅有我們寫的屬性和方法，還有別的，下面會介紹），而通過這個函式創建出來的例項物件，都能共享這個原型物件下的方法和屬性。所以我們只需要把想要共享的東西放在函式的prototype下，不想共享的東西通過建構函式來建立就可以了。

看個栗子（原型+構造）

function CreatePerson(name){ 
    this.name = name;
}
CreatePerson.prototype.showName = function(){ 
    alert(this.name);
}
var p1 =new CreatePerson('haha');
p1.showName();
var p2 = new CreatePerson('hehe');
p2.showName();

alert(p1.showName==p2.showName);//true

    通過最後一句的測試為true，可以看到在建構函式的原型下面加的方法showName()方法是所有通過這個建構函式創建出來的物件所共享的，也就是說他們共用一個記憶體，更進一步的說它們存在引用關係，也就是說你更改了p1的showName也會影響p2的showName。

    所以我們在構造物件的時候，一般是原型模式和構造模式組合使用，變化的用構造模式 不變的公用的用原型模式，就像上面的這個栗子，屬性用的建構函式，因為一般不同物件屬性都不同，方法用原型模式。

 _proto_屬性:同一個函式造出來的例項物件能共享這個函式的prototype下的方法和屬性，但是它是如何做到的呢？這裡要出場的就是_proto_屬性，每個例項化物件都有一個_proto_屬性，它是一個指標，指向函式的prototype，也就是儲存了它的地址。（JS中任何物件的值都是儲存在堆記憶體中，我們宣告的變數只是一個指標，儲存了這個物件的實際地址，所以有了地址就能找到物件），所以總得來說，每個例項化物件都有_proto_屬性，儲存了建構函式的原型物件的地址，通過這個屬性就可以擁有原型物件下的所有屬性和方法，_proto_屬性實際就是例項化物件和原型物件之間的連線。

原型鏈： 每個函式都可以成為建構函式，每個函式都有原型物件，每個原型物件也可以是一個例項化物件，比如，你建立了一個函式fun,它是建構函式function的例項化物件，而function的原型物件，又是Object的例項物件。所以fun有個_proto_屬性可以訪問到function的原型物件,function原型物件也是個例項物件，也有個_proto_屬性,可以訪問到Object的原型物件，所以通過_proto_屬性，就形成了一條原型鏈。每個例項化物件都可以訪問到鏈子上方的方法和屬性，所以fun是可以訪問Object原型物件下的方法和屬性的。實際上所有物件都可以訪問到Object的原型物件。

原型鏈的訪問規則：先在自身的下面尋找，再去一級一級的往原型鏈上找。如下：

function Aaa(){}
Aaa.prototype.num = 3;
var a1 = new Aaa();
a1.num =10;
alert(a1.num); //10

原型物件下的方法和屬性：原型物件下面可能有三大類：1 原型物件所帶方法和屬性   2 constructor   3 _proto_

constructor:建構函式屬性，每個函式的原型物件都有的預設屬性，指向函式。每個例項化物件本身是沒有constructor屬性的，每個例項化物件下面都預設只有一個_proto_,用來連線原型物件，而和建構函式本身是沒有直接的聯絡的。所以它的constructor是訪問的原型物件上的。所以當原型物件的constructor變化了，例項化物件的constructor也會改變。但是如果這個物件本身既是原型物件，又是例項化物件，那就擁有了constructor屬性，無需從原型物件繼承。

看下面的例子，來驗證我們所說的：

function CreatePerson(name){
   this.name = name;
}
CreatePerson.prototype.showName = function(){
  console.log(this.name);
};
var p1 =new CreatePerson('haha');
p1.showName();
console.log(p1.constructor);  // CreatePerson   來自CreatePerson.prototype

console.log(CreatePerson.prototype); //  {showName:function(){},constructor:CreatePerson,__proto__:Object.prototype}
//可見，原型物件儲存了1  自身新增的方法，2 建構函式constructor  3 _proto_(和上一層建構函式原型物件的連線)
console.log(CreatePerson.prototype.__proto__===Object.prototype);//  true  這個原型物件本身又是object的例項化物件，所有_proto_指向Object的原型物件
console.log(CreatePerson.prototype.__proto__===Object);// false     可見是和建構函式下原型物件的連線，不是建構函式
console.log(CreatePerson.prototype.constructor);//CreatePerson      預設有的 指向創造它的函式

console.log(Object.prototype.__proto__); // null     原型鏈的終點是null

console.log(CreatePerson.__proto__);   //function.prototype   CreatePerson本身既是建構函式又是function的例項化物件，擁有_proto_屬性，指向function的原型物件
console.log(CreatePerson.constructor); // function    繼承自function.prototype


console.log(CreatePerson.prototype instanceof CreatePerson ) //驗證是否在一條原型鏈上  false

字面量法定義原型：

為了建立物件的程式碼更方便，你一定見過這樣的程式碼，就是字面量法：

function Aaa(){}
Aaa.prototype = {
    showName:function(){alert(10);}
};
 var a1 = new Aaa();
console.log(Aaa.prototype);//{showName:function(){},_proto_}   你會發現constructor不見了，因為這種方式相當於重新賦值了Aaa.prototype 

console.log(Aaa.prototype.constructor);//Object  因為自身沒有了constructor屬性，就去上級原型物件找，找到了Object
console.log(a1.constructor );//Object 也變了，驗證了它是訪問的原型物件上的

因此我們在寫的時候需要修正一下原型的指向：

function Aaa(){}
Aaa.prototype = {
  constructor:Aaa,
  num1:function(){alert(10);}
} 
var a1 = new Aaa(); 
a1.constructor // Aaa

 理解了這些，繼承就很好理解了，下回繼續補充。有錯誤，歡迎糾正。