认识面向对象：
/*
五点
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>
原文地址：https://www.cnblogs.com/taohuaya/p/9668138.html
时间： 2024-11-01 21:41:07