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>
