从认识面向对象到构造函数的标准写法

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>
View Code

上面重复代太多,必须加以改进(利用封装函数):

这种方式叫做工厂方法函数

技术分享图片
 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 function
View 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

 





























以上是关于从认识面向对象到构造函数的标准写法的主要内容,如果未能解决你的问题,请参考以下文章

面向对象之原型链

重新认识JavaScript面向对象: 从ES5到ES6

JS面向对象的几种写法

JS面向对象——class定义类类的构造函数实例方法访问器方法静态方法继承super多态

心得面向对象_1

js构造函数--面向对象