從認識面向對象到構造函數的標準寫法
阿新 • • 發佈：2018-09-18
typeof 添加 cti 設計 per 求和函數 spl 自己的 重復 
認識面向對象：
/*
五點
1、發展歷史
2、編程思想
面向過程的編程思想：只關心數學邏輯。
面向對象的編程思想：直接生活邏輯映射到我們的程序中。
3、語法
類 對象
類：具有一類相同特征的事物的抽象概念。
對象：具體的某一個實體，唯一的。
4、代碼
5、結構
基本數據類型(單個數據) -> 數組(批量數據) -> 對象(既能夠存儲數據，又能夠存儲函數)
*/
我們想創建兩個對象，利用傳統的對象方式：
1 <script> 2 /*View Code3 【註】面向對象的特點是繼承、封裝、多態。 4 */ 5 6 var person1 = new Object(); 7 person1.name = ‘blue‘; 8 person1.sex = "男"; 9 person1.showName = function(){ 10 alert("我的名字叫" + this.name); 11 }12 person1.showSex = function(){ 13 alert(‘我是‘ + this.sex + "的"); 14 } 15 16 person1.showName(); 17 person1.showSex(); 18 19 /* 20 重復代碼太多，封裝函數。 21 */ 22 23 varperson2 = new Object(); 24 person2.name = ‘red‘; 25 person2.sex = "女"; 26 person2.showName = function(){ 27 alert("我的名字叫" + this.name); 28 } 29 person2.showSex = function(){ 30 alert(‘我是‘ + this.sex + "的"); 31 } 32 33 person2.showName(); 34 person2.showSex(); 35 36 </script>
上面重復代太多，必須加以改進（利用封裝函數）：
這種方式叫做工廠方法\函數
1 <script> 2 /* 3 工廠方式 4 5 1、原料 6 2、加工 7 3、出廠 8 9 下述方法，叫做工廠方法/工廠函數。 10 【註】設計思想：工廠模式。 11 */ 12 function createPerson(name, sex){ 13 //1、原料 14 var person = new Object(); 15 16 //2、加工 17 person.name = name; 18 person.sex = sex; 19 person.showName = function(){ 20 alert("我的名字叫" + this.name); 21 } 22 person.showSex = function(){ 23 alert(‘我是‘ + this.sex + "的"); 24 } 25 26 //3、出廠 27 return person; 28 } 29 30 31 var person1 = createPerson("blue", "男"); 32 person1.showName(); 33 person1.showSex(); 34 var person2 = createPerson("red", "女"); 35 person2.showName(); 36 person2.showSex(); 37 38 alert(person1.showName == person2.showName); //false 39 /* 40 工廠函數和系統創建對象的形式有啥區別？ 41 1、沒有new 42 2、每一個對象都有一套自己的函數，浪費。 43 */View Code
/*
工廠函數和系統創建對象的形式有啥區別？
1、沒有new
2、每一個對象都有一套自己的函數，浪費。
*/
來看一下系統是怎麽創建對象的：
1 <script> 2 //系統創建對象的方式 3 var arr = new Array(); 4 var d = new Date(); 5 var obj = new Object(); 6 7 /*alert(typeof Array); //function 8 alert(typeof Date); //function*/ 9 10 var arr1 = [1, 2, 3]; 11 var arr2 = [6, 7, 8]; 12 alert(arr1.push == arr2.push); //true 13 14 /* 15 1、系統創建對象的函數，前面調用的時候加new 16 2、創建出來對象，共用的是一套函數。 17 */ 18 </script>View Code
/*
1、系統創建對象的函數，前面調用的時候加new
2、創建出來對象，共用的是一套函數。
*/
怎麽才能讓我們（自定義創建對象）創建的對象也 可以用new調用和公用一套函數呢？
這裏就用到構造函數：
//構造函數
/*
工廠方式
1、原料
2、加工
3、出廠
下述方法，叫做工廠方法/工廠函數。
【註】設計思想：工廠模式。
【註】我們通過new去調用的函數叫做構造函數，所謂構造函數就是去創建對象的。
【註】為了區分構造函數，和普通函數，一般情況下，構造函數的首字母大寫。
【註】如果在調用函數的前面加了new
1、自動完成原料 和 出廠操作
2、該函數中的this，指向新創建出來的對象。
【註】JavaScript中是用構造函數替代類的功能。
*/
1 <script> 2 //構造函數 3 /* 4 工廠方式 5 6 1、原料 7 2、加工 8 3、出廠 9 10 下述方法，叫做工廠方法/工廠函數。 11 【註】設計思想：工廠模式。 12 13 14 【註】我們通過new去調用的函數叫做構造函數，所謂構造函數就是去創建對象的。 15 【註】為了區分構造函數，和普通函數，一般情況下，構造函數的首字母大寫。 16 【註】如果在調用函數的前面加了new 17 1、自動完成原料 和 出廠操作 18 2、該函數中的this，指向新創建出來的對象。 19 20 21 【註】JavaScript中是用構造函數替代類的功能。 22 */ 23 function CreatePerson(name, sex){ 24 //1、原料 25 // var person = new Object(); 26 // this = new Object() 27 28 //2、加工 29 this.name = name; 30 this.sex = sex; 31 this.showName = function(){ 32 alert("我的名字叫" + this.name); 33 } 34 this.showSex = function(){ 35 alert(‘我是‘ + this.sex + "的"); 36 } 37 38 //3、出廠 39 // return person; 40 //return this; 41 } 42 43 44 var person1 = new CreatePerson("blue", "男"); 45 person1.showName(); 46 person1.showSex(); 47 var person2 = new CreatePerson("red", "女"); 48 person2.showName(); 49 person2.showSex(); 50 51 alert(person1.showName == person2.showName); //false 52 /* 53 工廠函數和系統創建對象的形式有啥區別？ 54 1、沒有new 55 2、每一個對象都有一套自己的函數，浪費。 56 */ 57 </script>View Code
現在可以用new 調用了，但是每一個對象還是都有一套自己的函數（對象方法\函數），要想用讓每個對象都公用一套對象的方法\函數。就要用到 prototype原型來 定義對象方法\函數。
先來看一下小例子，給數組對象直接給對象添加對象方法\函數 的方法行不行;
1 /* 2 prototype 原型 3 */ 4 var arr1 = [10, 20, 30, 40]; 5 var arr2 = [60, 70, 80, 90]; 6 7 //求和函數 8 arr1.sum = function(){ 9 var res = 0; 10 for(var i = 0; i < this.length; i++){ 11 res += this[i]; 12 } 13 return res; 14 } 15 16 alert(arr1.sum()); 17 alert(arr2.sum()); // arr2.sum is not a functionView Code
可見不行，下面我們用 prototype原型給數組對象添加對象方法\函數。
1 <script> 2 /* 3 prototype 原型2 4 */ 5 var arr1 = [10, 20, 30, 40]; 6 var arr2 = [60, 70, 80, 90]; 7 8 //求和函數 9 /*arr1.sum = function(){ 10 var res = 0; 11 for(var i = 0; i < this.length; i++){ 12 res += this[i]; 13 } 14 return res; 15 }*/ 16 17 /* 18 【註】如果你想給一類對象添加函數，那麽我們可以通過prototype原型將函數添加在構造函數上。 19 */ 20 Array.prototype.sum = function(){ 21 var res = 0; 22 for(var i = 0; i < this.length; i++){ 23 res += this[i]; 24 } 25 return res; 26 } 27 28 alert(arr1.sum()); 29 alert(arr2.sum()); // arr2.sum is not a function 30 31 alert(arr1.sum == arr2.sum); //true 32 33 </script>View Code
經過上面的給數組對象添加求和的方法。就可以這樣給構造函數添加 對象方法\函數了。
構造函數的標準寫法：
1 <script> 2 function CreatePerson(name, sex){ 3 //添加屬性 4 this.name = name; 5 this.sex = sex; 6 } 7 //函數要通過原型prototype添加 8 //添加函數 9 CreatePerson.prototype.showName = function(){ 10 alert("我的名字叫" + this.name); 11 } 12 13 CreatePerson.prototype.showSex = function(){ 14 alert(‘我是‘ + this.sex + "的"); 15 } 16 17 var person1 = new CreatePerson("blue", "男"); 18 var person2 = new CreatePerson(‘red‘, "女"); 19 person1.showName(); 20 person1.showSex(); 21 person2.showName(); 22 person2.showSex(); 23 alert(person1.showName == person2.showName); //true 24 25 </script>View Code
從認識面向對象到構造函數的標準寫法