js深入理解建構函式和原型對象

標籤：

1.在典型的oop的語言中，如java,都存在類的概念，類就是對象的模板，對象就是類的執行個體。但在js中不存在類的概念，js不是基於類，而是通過建構函式(constructor)和原型鏈（propotype chains）實現的。但在ES6中引入了類（class）這個概念，作為對象的模板，新的class寫法知識讓原型對象的寫法更加清晰，這裡不重點談這個

2.首先我們來詳細瞭解下什麼是構造器

　　建構函式的特點：

　　　　a:建構函式的首字母必須大寫，用來區分於普通函數

　　　　b:內部使用的this對象，來指向即將要產生的執行個體對象

　　　　c:使用New來產生執行個體對象

　　eg1:

 1 function Person(name,age){ 2      this.name = name;     3      this.age = age;    4      this.sayHello = function(){    5          console.log(this.name +"say hello"); 6     } 7 } 8  9 var boy = new Person("bella",23);    10 boy.sayHello(); // bella say hello

　　建構函式的缺點：

　　　　所有的執行個體對象都可以繼承構造器函數中的屬性和方法。但是，同一個對象執行個體之間，無法共用屬性

　　　　eg2:

 1 function Person(name,age){ 2     this.name = name; 3     this.age = age; 4     this.sayHello = function(){ 5         console.log(this.name + "say hello"); 6     } 7 } 8 var girl = new Person("bella",23); 9 var boy = new Person("alex",23);10 console.log(girl.name);  //bella11 console.log(boy.name);   //alex12 console.log(girl.sayHello === boy.sayHello);  //false

　　　　　　

 

　　一個建構函式Person產生了兩個對象執行個體girl和boy,並且有兩個屬性和一個方法。但是sayHello方法是不一樣的。如（圖畫得很醜）。也就是說當New一個執行個體對象的時候，都會去建立一個sayHello方法，這就浪費了記憶體資源，因為sayHello方法使一樣的行為的，完全可以被兩個執行個體對象共用。

　　所以，缺點就是：同一個建構函式的對象執行個體之間無法共用屬性和方法。

　　為瞭解決建構函式的這個缺點，js提供了prototype屬相來解決該問題。

　　propotype屬性的作用

　　js中每個資料類型都是對象，除了null 和 undefined（這個可以參考另一篇將null 和 undefined的部落格）,而每個對象都是繼承自一個原型對象，只有null除外，它沒有自己的原型對象，最終的Object的原型為null

　　eg3:

 1 function Person(name,age){ 2     this.name = name; 3     this.age = age; 4 } 5 Person.propotype.sayHello = function(){ 6     console.log(this.name + "say hello"); 7 } 8 var girl = new Person("bella",23); 9 var boy = new Person("alex",23);10 console.log(girl.name);  //bella11 console.log(boy.name);   //alex12 console.log(girl.sayHello === boy.sayHello);  //true

View Code

　                  

      由可以看出，propotype是建構函式的屬性，而consructor則是建構函式的prototype屬性所指向的那個對象，也就是說constuctor是原型對象的屬性。

　　constructor屬性是定義在原型對象上面，意味著也可以被執行個體對象繼承

　　eg4:

　　

 1 function Person(name,age){ 2     this.name = name; 3     this.age = age; 4 } 5 Person.propotype.sayHello = function(){ 6     console.log(this.name + "say hello"); 7 } 8 var girl = new Person("bella",23); 9 console.log(girl.construcotr); //Person()10 console.log(girl.construcotr == Person.propotype.construcotr); //true

View Code

　　constructor屬性的作用

　　　　a:分辨原型對象到底是哪個建構函式　　

1 function Person(){};2 var person1 = new Person();3 console.log(person1.construcotr === Person); //true

View Code

　　　　b:從執行個體建立另一個執行個體

1 function Person(){};2 var person1 = new Person();3 var person2 = new person1.construcotr();4 console.log(person2 instanceof Person); //true

View Code

　　　　c:由於constructor屬性是一種原型對象和建構函式的關係，所以在修改原型對象的時候，一定 要注意construtor的指向問題，避免instanceof失真，關於這一點，會在繼承中講到。

　　

js深入理解建構函式和原型對象