作為原型和原型鏈的基礎(chǔ)，先了解清楚構(gòu)造函數(shù)以及它的執(zhí)行過程才能更好地幫助我們學(xué)習(xí)原型和原型鏈的知識(shí)。本篇文章帶大家詳細(xì)了解一下JavaScript中的構(gòu)造函數(shù)，介紹一下怎么利用構(gòu)造函數(shù)創(chuàng)建一個(gè)js對(duì)象，希望對(duì)大家有所幫助！

1、什么是構(gòu)造函數(shù)？

一個(gè)普通的函數(shù)被用于創(chuàng)建一個(gè)類對(duì)象時(shí)，它就被稱作構(gòu)造函數(shù)，或者構(gòu)造器。（為方便理解，你可以將JavaScript中構(gòu)造器的創(chuàng)建理解為其他語(yǔ)言中的類的創(chuàng)建，目的就是利用它通過new來(lái)實(shí)列一個(gè)對(duì)象）

function Person(){ //... } //當(dāng)做普通函數(shù)調(diào)用 var obj=Person();  //構(gòu)造函數(shù)調(diào)用 	 var obj=new Person();

構(gòu)造函數(shù)的特點(diǎn)：

• 在書寫規(guī)范上，我們習(xí)慣將構(gòu)造函數(shù)名稱的首字母大寫。

• 通過new來(lái)創(chuàng)建一個(gè)對(duì)象。

• 無(wú)需在內(nèi)寫入return也會(huì)有返回值，而且返回的是一個(gè)對(duì)象。

利用構(gòu)造函數(shù)創(chuàng)建一個(gè)js對(duì)象

• 構(gòu)造函數(shù)創(chuàng)建對(duì)象(方法寫在構(gòu)造函數(shù)里，缺點(diǎn):構(gòu)造函數(shù)每執(zhí)行一次， 就會(huì)創(chuàng)建一次方法。)

	  function Person(name,age,gender){             this.name=name;             this.age=age;             this.gender=gender;             // 方法寫在里面             this.sayName=function(){                  console.log(this.name);              }                 }                function Dog(name,age){               this.name=name;               this.age=age;           }                     var obj=new Person("張三",18,"男");           var obj1=new Person("李四",16,"男");                      var dog=new Dog("樂樂",2);           obj.sayName();           obj1.sayName();                      console.log(obj);           console.log(obj1);           console.log(dog);

• 構(gòu)造函數(shù)創(chuàng)建對(duì)象(方法寫在構(gòu)造函數(shù)外，缺點(diǎn): 方法為全局方法，污染全局。)

	   function Person(name,age,gender){             this.name=name;             this.age=age;             this.gender=gender;             this.sayName=fun;   //方法寫在外面           }     	 function fun(){             console.log(this.name);         }           function Dog(name,age){               this.name=name;               this.age=age;           }                      var obj=new Person("張三",18,"男");           var obj1=new Person("李四",16,"男");                      var dog=new Dog("樂樂",2);           obj.sayName();           obj1.sayName();                      console.log(obj);           console.log(obj1);           console.log(dog);

• 構(gòu)造函數(shù)創(chuàng)建對(duì)象改造(方法通過原型對(duì)象創(chuàng)建)

原型對(duì)象:prototype

我們所創(chuàng)建的每一個(gè)函數(shù)，解析器都會(huì)向函數(shù)中添加一個(gè)prototype屬性。

指向構(gòu)造函數(shù)的原型對(duì)象，我們可以通過__proto__來(lái)訪問該屬性。

構(gòu)造函數(shù).prototype.xxx ， xxx可以是變量，可以是方法。執(zhí)行過程中會(huì)先去對(duì)象中找方法或者變量， 找不到就會(huì)去原型里尋找。

	  function Person(name,age,gender){             this.name=name;             this.age=age;             this.gender=gender;           }           function Dog(name,age){               this.name=name;               this.age=age;           }                    /*為person添加統(tǒng)一的方法， 到原型對(duì)象中*/         Person.prototype.sayName=function(){             console.log(this.name);         }           var obj=new Person("張三",18,"男");           var obj1=new Person("李四",16,"男");                      var dog=new Dog("樂樂",2);           obj.sayName();           obj1.sayName();                      console.log(obj);           console.log(obj1);           console.log(dog);

運(yùn)行結(jié)果：

2、為什么要使用構(gòu)造函數(shù)？

學(xué)習(xí)每一個(gè)概念，不僅要知道它是什么，還要知道為什么，以及解決什么樣的問題。

舉個(gè)例子，我們要錄入一年級(jí)一班中每一位同學(xué)的個(gè)人信息，那么我們可以創(chuàng)建一些對(duì)象，比如：

var p1 = { name: 'zs', age: 6, gender: '男', hobby: 'basketball' }; var p2 = { name: 'ls', age: 6, gender: '女', hobby: 'dancing' }; var p3 = { name: 'ww', age: 6, gender: '女', hobby: 'singing' }; var p4 = { name: 'zl', age: 6, gender: '男', hobby: 'football' }; // ...

像上面這樣，我們可以把每一位同學(xué)的信息當(dāng)做一個(gè)對(duì)象來(lái)處理。但是，我們會(huì)發(fā)現(xiàn)，我們重復(fù)地寫了很多無(wú)意義的代碼。比如 name、age、gender、hobby 。如果這個(gè)班上有60個(gè)學(xué)生，我們得重復(fù)寫60遍。

這個(gè)時(shí)候，構(gòu)造函數(shù)的優(yōu)勢(shì)就體現(xiàn)出來(lái)了。我們發(fā)現(xiàn)，雖然每位同學(xué)都有 name、gender、hobby這些屬性， 但它們都是不同的，那我們就把這些屬性當(dāng)做構(gòu)造函數(shù)的參數(shù)傳遞進(jìn)去。而由于都是一年級(jí)的學(xué)生，age 基本都是6歲，所以我們就可以寫死，遇到特殊情況再單獨(dú)做處理即可。此時(shí)，我們就可以創(chuàng)建以下的函數(shù)：

function Person(name, gender, hobby) {     this.name = name;     this.gender = gender;     this.hobby = hobby;     this.age = 6; }

當(dāng)創(chuàng)建上面的函數(shù)以后， 我們就可以通過 new 關(guān)鍵字調(diào)用，也就是通過構(gòu)造函數(shù)來(lái)創(chuàng)建對(duì)象了。

var p1 = new Person('zs', '男', 'basketball'); var p2 = new Person('ls', '女', 'dancing'); var p3 = new Person('ww', '女', 'singing'); var p4 = new Person('zl', '男', 'football'); // ...

此時(shí)你會(huì)發(fā)現(xiàn)，創(chuàng)建對(duì)象會(huì)變得非常方便。所以，雖然封裝構(gòu)造函數(shù)的過程會(huì)比較麻煩，但一旦封裝成功，我們?cè)賱?chuàng)建對(duì)象就會(huì)變得非常輕松，這也是我們?yōu)槭裁匆褂脴?gòu)造函數(shù)的原因。

在使用對(duì)象字面量創(chuàng)建一系列同一類型的對(duì)象時(shí)，這些對(duì)象可能具有一些相似的特征(屬性)和行為(方法)，此時(shí)會(huì)產(chǎn)生很多重復(fù)的代碼，而使用構(gòu)造函數(shù)就可以實(shí)現(xiàn)代碼復(fù)用。

3、構(gòu)造函數(shù)的執(zhí)行過程

先說(shuō)一點(diǎn)基本概念。

function Animal(color) {  this.color = color; }

當(dāng)一個(gè)函數(shù)創(chuàng)建好以后，我們并不知道它是不是構(gòu)造函數(shù)，即使像上面的例子一樣，函數(shù)名為大寫，我們也不能確定。只有當(dāng)一個(gè)函數(shù)以 new 關(guān)鍵字來(lái)調(diào)用的時(shí)候，我們才能說(shuō)它是一個(gè)構(gòu)造函數(shù)。就像下面這樣：

var dog = new Animal("black");

以下我們只討論構(gòu)造函數(shù)的執(zhí)行過程，也就是以 new 關(guān)鍵字來(lái)調(diào)用的情況。

我們還是以上面的 Person 為例。

function Person(name, gender, hobby) {  this.name = name;  this.gender = gender;  this.hobby = hobby;  this.age = 6; }  var p1 = new Person('zs', '男', 'basketball');

此時(shí)，構(gòu)造函數(shù)會(huì)有以下幾個(gè)執(zhí)行過程：

1）當(dāng)以 new 關(guān)鍵字調(diào)用時(shí)，會(huì)創(chuàng)建一個(gè)新的內(nèi)存空間，標(biāo)記為 Animal 的實(shí)例。

2）函數(shù)體內(nèi)部的 this 指向該內(nèi)存

通過以上兩步，我們就可以得出這樣的結(jié)論。

var p2 = new Person('ls', '女', 'dancing');  // 創(chuàng)建一個(gè)新的內(nèi)存 #f2 var p3 = new Person('ww', '女', 'singing');  // 創(chuàng)建一個(gè)新的內(nèi)存 #f3

每當(dāng)創(chuàng)建一個(gè)實(shí)例的時(shí)候，就會(huì)創(chuàng)建一個(gè)新的內(nèi)存空間(#f2, #f3)，創(chuàng)建 #f2 的時(shí)候，函數(shù)體內(nèi)部的 this 指向 #f2, 創(chuàng)建 #f3 的時(shí)候，函數(shù)體內(nèi)部的 this 指向 #f3。

3） 執(zhí)行函數(shù)體內(nèi)的代碼
通過上面的講解，你就可以知道，給 this 添加屬性，就相當(dāng)于給實(shí)例添加屬性。

4）默認(rèn)返回 this

由于函數(shù)體內(nèi)部的this指向新創(chuàng)建的內(nèi)存空間，默認(rèn)返回 this ，就相當(dāng)于默認(rèn)返回了該內(nèi)存空間，也就是上圖中的 #f1。此時(shí)，#f1的內(nèi)存空間被變量p1所接受。也就是說(shuō) p1 這個(gè)變量，保存的內(nèi)存地址就是 #f1，同時(shí)被標(biāo)記為 Person 的實(shí)例。