从认识面向对象到构造函数的标准写法
Posted taohuaya
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了从认识面向对象到构造函数的标准写法相关的知识，希望对你有一定的参考价值。
认识面向对象：
/*
五点
1、发展历史
2、编程思想
面向过程的编程思想：只关心数学逻辑。
面向对象的编程思想：直接生活逻辑映射到我们的程序中。
3、语法
类 对象
类：具有一类相同特征的事物的抽象概念。
对象：具体的某一个实体，唯一的。
4、代码
5、结构
基本数据类型(单个数据) -> 数组(批量数据) -> 对象(既能够存储数据，又能够存储函数)
*/
我们想创建两个对象，利用传统的对象方式：
1 <script> 2 /* 3 【注】面向对象的特点是继承、封装、多态。 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 var person2 = 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 */
/*
工厂函数和系统创建对象的形式有啥区别？
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>
/*
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>
现在可以用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 function
可见不行，下面我们用 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>
经过上面的给数组对象添加求和的方法。就可以这样给构造函数添加 对象方法函数了。
构造函数的标准写法：
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>
以上是关于从认识面向对象到构造函数的标准写法的主要内容，如果未能解决你的问题，请参考以下文章