JavaScript面向對象編程

概述

在前端開發中，JavaScript並無想象中那麼簡單，不僅是簡單的UI輸入驗證，還有面向對象。對於剛剛JavaScript入門的你來講，可能會稍稍驚訝：哇，雖然前端開發好找對象，妹子多，可是JavaScript真的能夠向對象編程麼！！！是的，你沒有看錯，本文將經過一些小例子，逐步講解JavaScript的面向對象編程。僅供學習分享使用，若有不足之處，還請指正。

ECMA Script有兩種開發模式：

1. 函數式（過程化）：小的功能，獨立。
2. 面向對象（OOP）：體現了繼承，封裝，多態的思想，可是ECMA Script沒有類的概念。

建立一個對象

建立對象，而後給對象賦值屬性和方法。以下所示：

• this表示new Object實例化出來的對象，this要放在一個做用域下，好比box.run(){},這個是box做用域下的函數，才能夠用this來表示box。
• 若是在全局做用域下，this，表示window,如：document.write(this);//[object Window]

1 var box=new Object(); //建立對象
2 box.name='hex'; //添加屬性
3 box.age=100;
4 box.run=function(){
5     return this.name+this.age+'is running...'; //this表示當前做用域下對象，在此表示box
6 };

可是以上代碼有一個缺點，若是想再實例化一個box2，則須要重複書寫代碼，以下所示：

1 var box2=new Object(); //建立對象
2 box2.name='jack'; //添加屬性
3 box2.age=200;
4 box2.run=function(){
5     return this.name+this.age+'is running...'; //this表示當前做用域下對象，在此表示box
6 };
7 document.getElementById("A01").innerText=box.run();
8 document.getElementById("A02").innerText=box2.run();

經過以上實例，能夠看出，box和box2具備不少重複的代碼，爲了解決以上的問題，能夠採用工廠模式，將重複的代碼抽象出來，以下所示：

 1 function createObject(name,age){
 2     var obj=new Object(); //建立對象
 3     obj.name=name; //添加屬性
 4     obj.age=age;
 5     obj.run=function(){
 6         return this.name+this.age+'is running...'; //this表示當前做用域下對象，在此表示box
 7     };//此處是語句，因此須要加分號
 8     return obj;
 9 }
10 var box1=createObject('hexkj',100);
11 var box2=createObject('jack',200);
12 document.getElementById("A01").innerText=box1.run();
13 document.getElementById("A02").innerText=box2.run();

可是以上依然有一個問題：沒法區分是哪一個對象建立的實例，由於都是Object類型。以下所示：

1 document.writeln(box1);//輸出：[object Object]
2 document.writeln(typeof box2);//輸出：object
3 document.writeln( box1 instanceof Object);//輸出：true

經過構造函數建立對象

ECMA Script能夠採用構造函數的方式建立特定的對象。構造函數規範：

1. 構造函數也是函數，可是首字母必須大寫(小寫也能夠，可是不規範)。
2. 必須使用new 運算符來實例化。

構造函數沒有Object，但後臺會自動建立Object，this就表示Ojbect的實例obj。構造函數不須要返回obj。以下所示：

 1 function Box(name,age){
 2     this.name=name; //添加屬性
 3     this.age=age;
 4     this.run=function(){
 5         return this.name+this.age+'is running...'; 
 6     };//此處是語句，因此須要加分號
 7 }
 8 var box1=new Box('hexkj',150);
 9 var box2=new Box('jack',230);
10 document.getElementById("A01").innerText=box1.run();
11 document.getElementById("A02").innerText=box2.run();

再新增一個構造函數，以下所示：

1 function Desk(name){
2     this.name=name;
3 }
4 var box3=new Desk('Lee');
5 document.writeln(box3 instanceof Desk );//輸出true
6 document.writeln(box1 instanceof Box );//輸出true
7 document.writeln(box1 instanceof Desk );//輸出false

經過以上實例能夠看出，使用構造函數，能夠解決對象識別的問題。

備註：

1. 變量名name比較特殊，若是有問題，可使用user代替。
2. 全局做用域中，this表示window。
3. 普通函數，首字母不須要大寫。

對象冒充調用

即obj原本是沒有run方法的，經過call函數，能夠將obj冒充爲Box的實例，以下所示：

1 var obj=new Object();
2 Box.call(obj,'hex',20);
3 document.writeln(obj.run());//輸出：hex20is running... 

對象比較

對於基本類型，比較值是否相等便可。對於引用類型，比較的是引用地址，全部box1和box2是兩個不一樣的類型，由於他們在內存中的地址不一樣。以下所示：

1 var box1=new Box('hexkj',150);
2 var box2=new Box('hexkj',150);
3 //對於基本類型，比較值是否相等便可
4 document.writeln(box1.name==box2.name); //輸出true
5 document.writeln(box1.age==box2.age);//輸出true
6 document.writeln(box1.run()==box2.run());//輸出true
7 //對於引用類型，比較的是引用地址，全部box1和box2是兩個不一樣的類型，以下所示：
8 document.writeln(box1==box2); //輸出false
9 document.writeln(box1.run==box2.run);//輸出false

原型對象

咱們建立的 構造函數，都有一個原型屬性（prototype），它也是一個對象。能夠共享特定實例的屬性和方法。以下所示：

1 function Box(){} //聲明一個構造函數，函數體內什麼都沒有，若是有，爲實例屬性，實例方法
2 Box.prototype.name="hex";//原型屬性
3 Box.prototype.age=18;//原型屬性
4 Box.prototype.run=function(){ //原型方法
5     return this.name+this.age+' is running...';
6 };//此處是語句，因此須要加分號
7 var box1=new Box();
8 document.writeln(box1.run());

原型和構造函數的差別：

1. 若是是實例方法，不一樣的實例化，屬性和方法地址是不同的，是惟一的。
2. 若是是原型方法，屬性和方法的地址是共享的，是同樣的。

1 var box2=new Box();
2 document.writeln(box1==box2); //輸出false
3 document.writeln(box1.run==box2.run);//輸出true
4 document.writeln(box1.prototype); //寫法錯誤，輸出undefined 
5 document.writeln(box1.__proto__); //__proto__是一個指針，指向prototype，輸出： [object Object] 
6 document.writeln(box1.constructor);//獲得構造函數自己

判斷一個對象實例，是否是原型對象。經過Box.prototype.isPrototypeOf(box1)進行判斷，以下所示：

1 document.writeln(Box.prototype.isPrototypeOf(box1) ); //輸出true
2 function Desk(name){
3     this.name=name;
4 }
5 var box2=new Desk('Lee');
6 document.writeln(Desk.prototype.isPrototypeOf(box2) ); //輸出true

經過以上實例能夠看出：只要聲明實例對象，都會默認從原型建立。

刪除屬性，經過delete進行刪除，以下所示：

1 delete box2.name;//刪除實例屬性
2 delete Box.prototype.name; //刪除原型屬性

判斷屬性

主要判斷屬性是實例屬性，仍是原型屬性，或者判斷對象是否包含屬性，具體以下所示：

1 document.writeln(box2.hasOwnProperty('name')); //判斷實例中是否有對應屬性，輸出true
2 document.writeln(box1.hasOwnProperty('name')); //輸出false,由於name是在原型中
3 document.writeln('name' in box1); //輸出true ，判斷對象是否包含屬性
4 //判斷是否只有原型中的屬性
5 function isPrototypeProperty(obj , property){
6     //包含屬性，但實例中沒有，則原型中有
7     return property in obj && !obj.hasOwnProperty(property);
8 }
9 document.writeln(isPrototypeProperty(box1,'name')); //是不是原型中的屬性，輸出：true

使用字面量的方式建立對象，這裏的{}就是對象，是Object類型的實例。以下所示：

 1 function Box(){}
 2 Box.prototype={
 3     name:'Lee',
 4     age:20,
 5     run:function(){ //原型方法
 6         return this.name+this.age+' is running...';
 7     }//此處是語句，因此須要加分號
 8 }
 9 var box1=new Box();
10 document.writeln(box1.run());
11 document.writeln(box1.constructor); //輸出 function Object() { [native code] } 

因此採用字面量的方式建立對象，是Object類型，而不是構造函數建立的。如何要讓原型建立的對象指向Box呢？

答：能夠經過強制聲明constructor屬性來指向對應的類型，默認爲Object,也能夠指向String,Array等。以下所示：

 1 function Box(){}
 2 Box.prototype={
 3     constructor:Box,
 4     name:'Lee',
 5     age:20,
 6     run:function(){ //原型方法
 7         return this.name+this.age+' is running...';
 8     }//此處是語句，因此須要加分號
 9 }
10 var box1=new Box();
11 document.writeln(box1.constructor);//輸出：function Box(){} 

若是重寫了prototype，則原有的屬性會消失，以下所示：

1 Box.prototype={
2     age:30
3 }
4 var box2=new Box();
5 document.writeln(box2.name);//輸出undefined

擴展內置對象

ECMAScript自帶的對象，也能夠定義prototype。

1 var box1=[1,3,5,2,7,-2];
2 document.writeln( box1.sort()); //輸出-2,1,2,3,5,7 ，此處採用的是Array自帶的sort方法
3 //查看sort是不是原型對象裏面的方法
4 document.writeln( Array.prototype.sort); //輸出：function sort() { [native code] } 
5 document.writeln( String.prototype.substr); //function substr() { [native code] } 

如何擴展內置對象呢？能夠在內置對象的prototype中新增方法，以下所示：給String對象擴展了一個addString自定義方法。

1 String.prototype.addString=function(){
2     return this+'[By hex]';
3 }
4 var box2='你好啊';
5 document.writeln(box2.addString());//輸出：你好啊[By hex] 

通常不建議給內置對象擴展方法，容易致使命名衝突，不利於維護。

原型的缺點

共享屬性，沒法區分，以下所示：此處box2和box1共享一個family，這並非咱們想要的結果。

 1 Box.prototype={
 2     name:'Lee',
 3     age:20,
 4     family:['蘋果','香蕉','桔子'],
 5     run:function(){ //原型方法
 6         return this.name+this.age+' is running...';
 7     }//此處是語句，因此須要加分號
 8 }
 9 var box1=new Box();
10 box1.family.push('大鴨梨');
11 document.writeln(box1.family);//輸出：蘋果,香蕉,桔子,大鴨梨 
12 var box2=new Box();
13 document.writeln(box2.family);//輸出：蘋果,香蕉,桔子,大鴨梨

因此共享屬性prototype一共有兩個問題：

1. 原型如何傳參數呢？
2. 兩個實例共享同一個屬性。原型對象最大的優勢是共享，也是最大的缺點

爲了解決傳參和共享的問題，能夠採用構造函數+原型 相組合的方式解決：

 1 function Box(name,age){//保持獨立的用構造函數
 2     this.name=name;
 3     this.age=age;
 4     this.family=['蘋果','香蕉','桔子'];
 5 }
 6 Box.prototype={
 7     //保持共享的用原型
 8     constructor:Box,
 9     run:function(){
10         return this.name+this.age+' is running...';
11         }
12 }
13 var box1=new Box('hexkj',24);
14 box1.family.push('大鴨梨');    
15 var box2=new Box('Jack',35);
16 document.writeln(box1.run());//hexkj24 is running...
17 document.writeln(box1.family);//輸出：蘋果,香蕉,桔子,大鴨梨 
18 document.writeln(box2.run());//Jack35 is running...
19 document.writeln(box2.family);//輸出：蘋果,香蕉,桔子    

經過以上混合模式，屬性保持了獨立，方法保持了共享，比較好的解決了上面的兩個問題。可是經過以上方式，Box構造函數和prototype是兩部分,沒有面向對象的封裝效果，看起來比較怪異。能夠採用動態原型的方式進行解決，即將原型挪到構造函數內，且判斷原型是否包含方法便可。以下所示：

 1 function Box(name,age){//保持獨立的用構造函數
 2     this.name=name;
 3     this.age=age;
 4     this.family=['蘋果','香蕉','桔子'];
 5     //原型只有在第一次實例化便可，不須要重複執行
 6     if(typeof this.run !='function'){
 7         Box.prototype.run=function(){
 8             return this.name+this.age+' is running...';
 9         }
10     }
11 }
12 var box1=new Box('hexkj',24);
13 var box2=new Box('Jack',35);
14 box1.family.push('大鴨梨');
15 document.writeln(box1.run());//hexkj24 is running...
16 document.writeln(box1.family);//輸出：蘋果,香蕉,桔子,大鴨梨 
17 document.writeln(box2.run());//Jack35 is running...
18 document.writeln(box2.family);//輸出：蘋果,香蕉,桔子

經過以上方式，實現了封裝，且原型對象只執行了一次，執行效果也是同樣的。經過動態原型的模式，不能夠採用字面量的原型重寫，不然都會消失。

繼承

原型鏈繼承

javascript採用原型鏈來實現。被繼承的函數叫作超類（父類，基類），繼承的函數叫作子類（派生類），以下所示：

 1 function Box(){ //被繼承的函數叫作超類（父類，基類）
 2     this.name='Lee';
 3 }
 4 function Desk(){//繼承的函數叫作子類（派生類）
 5     this.age=18;
 6 }        
 7 //經過原型鏈繼承,Desk如何繼承Box
 8 Desk.prototype=new Box();
 9 var desk=new Desk();
10 document.writeln(desk.name+desk.age);//輸出Lee18 表示Desk繼承了Box的屬性

此處name採用就近原則，若是實例屬性有，則採用實例屬性，不然採用原型屬性。

子類從屬於本身或父類，以下所示：

1 document.writeln(desk instanceof Desk);// true 
2 document.writeln(desk instanceof Box); //true 
3 document.writeln(desk instanceof Object);//true

對象冒充繼承

 1 function Box(name,age){
 2     this.name=name;
 3     this.age=age;
 4     this.run=function(){
 5         return this.name+this.age+' is running....';
 6     }
 7 }
 8 Box.prototype.runner='can not running';    
 9 function Desk(name,age){
10     Box.call(this,name,age);//採用對象冒充調用父類
11 }    
12 var desk=new Desk('hex',18);
13 document.writeln(desk.run()); //輸出：hex18 is running.... 
14 document.writeln(desk.runner);//輸出：undefined  

經過以上實例能夠看出：對象冒充，不能夠繼承原型中的屬性和方法。放在構造函數中，每實例化一次，就分配一個內存地址，放在原型中，又沒法繼承，該如何解決呢？

答：能夠採用組合方法，即原型鏈繼承和對象冒充方式相結合。以下所示：

1 Desk.prototype=new Box(); //重點
2 var desk=new Desk('hex',18);
3 document.writeln(desk.runner);//輸出：can not running 表示能夠訪問原型中的方法和屬性

備註

滄海月明珠有淚，藍田日暖玉生煙。