1 <!DOCTYPE html>
2 <html>
3 <head>
4 <meta charset="UTF-8">
5 <title></title>
6 <script type="text/javascript">
7
8 /*
9 *
10 * 创建一个Person构造函数
11 * - 在Person构造函数中，为每一个对象都添加了一个sayName方法，目前我们的方法是在构造函数内部创建的，
12 * 也就是构造函数每执行一次就会创建一个新的sayName方法，也就是所有实例的sayName都是唯一的。
13 * 这样就导致了构造函数执行一次就会创建一个新的方法，
14 * 执行10000次就会创建10000个新的方法，而10000个方法都是一摸一样的
15 * 这是没有必要的，完全可以使所有的对象共享同一个方法
16 *
17 */
18
19 function PersonOne(name , age , gender){
20 this.name = name;
21 this.age = age;
22 this.gender = gender;
23 //向对象中添加一个方法
24 this.sayName = function(){
25 alert("Hello大家好，我是："+this.name);
26 }
27 }
28
29 //创建一个Person的实例
30 var per = new PersonOne("孙悟空",18,"男");
31 var per2 = new PersonOne("猪八戒",28,"男");
32 per.sayName();
33 per2.sayName();
34
35 //------------------------------------------------------------------------------------
36
37 //那怎么办呢？试着将sayName方法在全局作用域中定义
38
39 function PersonTwo(name , age , gender){
40 this.name = name;
41 this.age = age;
42 this.gender = gender;
43 //向对象中添加一个方法
44 this.sayName = fun;
45 }
46
47 function fun(){
48 alert("Hello大家好，我是:"+this.name);
49 };
50
51 //创建一个Person的实例
52 var per = new PersonTwo("孙悟空",18,"男");
53 var per2 = new PersonTwo("猪八戒",28,"男");
54 per.sayName();
55 per2.sayName();
56
57 /*
58 * 可是将函数定义在全局作用域，污染了全局作用域的命名空间
59 * 而且定义在全局作用域中也很不安全
60 */
61
62 //------------------------------------------------------------------------------------
63
64 //那么可以怎么改呢？向原型中添加sayName方法
65
66 /**
67 * 以后我们创建构造函数时，可以将这些对象共有的属性和方法，统一添加到构造函数的原型对象中，
68 * 这样不用分别为每一个对象添加，也不会影响到全局作用域，就可以使每个对象都具有这些属性和方法了
69 */
70
71 function PersonThree(name , age , gender){
72 this.name = name;
73 this.age = age;
74 this.gender = gender;
75 }
76 //向原型中添加sayName方法
77 PersonThree.prototype.sayName = function(){
78 alert("Hello大家好，我是:"+this.name);
79 };
80
81 //创建一个Person的实例
82 var per = new PersonThree("孙悟空",18,"男");
83 var per2 = new PersonThree("猪八戒",28,"男");
84 per.sayName();
85 per2.sayName();
86
87
88
89 </script>
90 </head>
91 <body>
92 </body>
93 </html>