Javascript中構造函數與new命令

 

典型的面向對象編程語言（好比C++和Java），存在「類」（class）這個概念。所謂「類」就是對象的模板，對象就是「類」的實例。可是，在JavaScript語言的對象體系，不是基於「類」的，而是基於構造函數（constructor）和原型鏈（prototype）。

 

如下的內容會分爲以下細節：

1.對象的概念

2.構造函數

3.new 命令

　　3.1：基本原理

　　3.2：基本用法

 

 

1.對象的概念

　　「面向對象編程」（Object Oriented Programming，縮寫爲OOP）是目前主流的編程範式。它的核心思想是將真實世界中各類複雜的關係，抽象爲一個個對象，而後由對象之間的分工與合做，完成對真實世界的模擬。

　　在Javascript的重要數據類型-對象這篇文章中，提到了js中對象的一些基本知識，好比說對象的建立，對象的引用，對象的屬性等等。若是沒有掌握對象的基礎知識，請移步Javascript的重要數據類型-對象。

　　在有了對象的基礎知識以後，對js中對象作一個簡單的總結。以下：

　　a：對象是單個實物的抽象。

　　b：對象是一個容器，封裝了‘屬性’和‘方法’。

　　一本書、一輛汽車、一我的均可以是「對象」。當實物被抽象成「對象」，實物之間的關係就變成了「對象」之間的關係，從而就能夠模擬現實狀況，針對「對象」進行編程。

　　所謂屬性，就是對象的一種狀態；所謂方法，就是對象的一種行爲。

　　好比說，能夠把動物抽象爲animal對象，屬性記錄的就是哪種動物，以及該動物的大小和顏色等。方法表示該動物的某種行爲（奔跑，獵食，交配，休息等等）。

 

2.構造函數

　　‘面向對象編程’的第一步，就是要生成對象。而js中面向對象編程是基於構造函數（constructor）和原型鏈（prototype）的。

　　前面說過，「對象」是單個實物的抽象。一般須要一個模板，表示某一類實物的共同特徵，而後「對象」根據這個模板生成。

　　js語言中使用構造函數（constructor）做爲對象的模板。所謂構造函數，就是提供一個生成對象的模板，並描述對象的基本結構的函數。一個構造函數，能夠生成多個對象，每一個對象都有相同的結構。

　　看一下構造函數的基本結構。

1     var Keith = function() {
2         this.height = 180;
3     };
4     //兩種寫法相同。
5     function Keith() {
6         this.height = 180;
7     }

　　上面代碼中，Keith就是構造函數，它提供模板，用來生成對象實例。爲了與普通函數區別，構造函數名字的第一個字母一般大寫。

　　構造函數的三大特色：

　　a：構造函數的函數名的第一個字母一般大寫。

　　b：函數體內使用this關鍵字，表明所要生成的對象實例。

　　c：生成對象的時候，必須使用new命令來調用構造函數。

 

 

3.new 命令

 

　　3.1：基本原理

　　new命令的做用，就是執行一個構造函數，而且返回一個對象實例。使用new命令時，它後面的函數調用就不是正常的調用，而是依次執行下面的步驟。

　　a：建立一個空對象，做爲將要返回的對象實例。

　　b：將空對象的原型指向了構造函數的prototype屬性。

　　c：將空對象賦值給構造函數內部的this關鍵字。

　　d：開始執行構造函數內部的代碼。

　　也就是說，構造函數內部，this指向的是一個新生成的空對象，全部針對this的操做，都會發生在這個空對象上。構造函數之所謂構造函數，意思是這個函數的目的就是操做一個空對象（即this對象），將其構造爲須要的樣子。

　　以上是new命令的基本原理，這個很重要。如下會用具體實例來驗證該原理的過程。

　　

　　3.2：基本用法

　　new命令的做用，就是調用一個構造函數，而且返回一個對象實例。

1     function Keith() {
2         this.height = 180;
3     }
4 
5     var boy = new Keith();
6     console.log(boy.height);　　//180

　　上面代碼中經過new命令，讓構造函數Keith生成一個對象實例，並賦值給全局變量boy。這個新生成的對象實例，從構造函數Keith中繼承了height屬性。也就說明了這個對象實例是沒有height屬性的。在new命令執行時，就表明了新生成的對象實例boy。this.height表示對象實例有一個height屬性，它的值是180。

　　使用new命令時，根據須要，構造函數也能夠接受參數。

 1     function Person(name, height) {
 2         this.name = name;
 3         this.height = height;
 4     }
 5 
 6     var boy = new Person('Keith', 180);
 7     console.log(boy.name); //'Keith'
 8     console.log(boy.height); //180
 9 
10     var girl = new Person('Samsara', 160);
11     console.log(girl.name); //'Samsara'
12     console.log(girl.height); //160

　　用以上的一個例子，來對構造函數的特色和new基本原理進行一個梳理。

　　上面代碼中，首先，咱們建立了一個構造函數Person，傳入了兩個參數name和height。構造函數Person內部使用了this關鍵字來指向將要生成的對象實例。

　　而後，咱們使用new命令來建立了兩個對象實例boy和girl。

　　當咱們使用new來調用構造函數時，new命令會建立一個空對象boy，做爲將要返回的實例對象。接着，這個空對象的原型會指向構造函數Person的prototype屬性。也就是boy.__proto__ prototype===Person.prototype的。要注意的是空對象指向構造函數Person的prototype屬性，而不是指向構造函數自己。而後，咱們將這個空對象賦值給構造函數內部的this關鍵字。也就是說，讓構造函數內部的this關鍵字指向一個對象實例。最後，開始執行構造函數內部代碼。

　　由於對象實例boy和girl是沒有name和height屬性的，因此對象實例中的兩個屬性都是繼承自構造函數Person中的。這也就說明了構造函數是生成對象的函數，是給對象提供模板的函數。

　　

　　一個問題，若是咱們忘記使用new命令來調用構造函數，直接調用構造函數了，會發生什麼？

　　這種狀況下，構造函數就變成了普通函數，並不會生成實例對象。並且因爲後面會說到的緣由，this這時表明全局對象，將形成一些意想不到的結果。

1     function Keith() {
2         this.height = 180;
3     }
4 
5     var person = Keith();
6     console.log(person.height); //TypeError: person is undefined
7     console.log(window.height); //180

　　上面代碼中，當在調用構造函數Keith時，忘記加上new命令。結果是this指向了全局做用域，height也就變成了全局變量。而變量person變成了undefined。

　　所以，應該很是當心，避免出現不使用new命令、直接調用構造函數的狀況。

　　爲了保證構造函數必須與new命令一塊兒使用，一個解決辦法是，在構造函數內部使用嚴格模式，即第一行加上use strict。

1     function Person(name, height) {
2         'use strict';
3         this.name = name;
4         this.height = height;
5     }
6     var boy = Person();
7     console.log(boy) //TypeError: name is undefined

　　上面代碼的Person爲構造函數，use strict命令保證了該函數在嚴格模式下運行。因爲在嚴格模式中，函數內部的this不能指向全局對象。若是指向了全局，this默認等於undefined，致使不加new調用會報錯（JavaScript不容許對undefined添加屬性）。

　　另外一個解決辦法，是在構造函數內部判斷是否使用new命令，若是發現沒有使用，則直接返回一個實例對象。

1     function Person(name, height) {
2     if (!(this instanceof Person)) {
3             return new Person(name, height);
4         }
5         this.name = name;
6         this.height = height;
7     }
8     var boy = Person('Keith');
9     console.log(boy.name) //'Keith'

　　上面代碼中的構造函數，無論加不加new命令，都會獲得一樣的結果。

　　若是構造函數內部有return語句，並且return後面跟着一個複雜數據類型（對象，數組等），new命令會返回return語句指定的對象；若是return語句後面跟着一個簡單數據類型（字符串，布爾值，數字等），則會忽略return語句，返回this對象。

 1     function Keith() {
 2         this.height = 180;
 3         return {
 4             height: 200
 5         };
 6     }
 7     var boy = new Keith();
 8     console.log(boy.height); //200
 9 
10     function Keith() {
11         this.height = 100;
12         return 200;
13     }
14     var boy = new Keith();
15     console.log(boy.height); //100

　　另外一方面，若是對普通函數（內部沒有this關鍵字的函數）使用new命令，則會返回一個空對象。

1     function Keith() {
2         return 'this is a message';
3     }
4     var boy = new Keith();
5     console.log(boy); // Keith {}

　　上面代碼中，對普通函數Keith使用new命令，會建立一個空對象。這是由於new命令老是返回一個對象，要麼是實例對象，要麼是return語句指定的對象或數組。本例中，return語句返回的是字符串，因此new命令就忽略了該語句。

　　

 

 

 

完。

 

感謝你們的閱讀。

轉載請註明出處：http://www.cnblogs.com/Uncle-Keith/p/5803551.html