JS 原型模式工廠模式構造函數的區別

時間 2019-11-08

原文原文鏈接

原型模式工廠模式構造函數的區別，看代碼：javascript

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>OOP</title>
 6 </head>
 7 <body>
 8 <script type="text/javascript">
 9 
10 /*---@原型模式--
11 */
12 function Person1(){  //構造函數，空的
13 }
14 Person1.prototype.name = "Nicholas"; //每一個函數都有一個prototype的屬性
15 Person1.prototype.age = 29;//這裏不能把Person1換成this
16 Person1.prototype.job = "Software Engineer";
17 Person1.prototype.sayName2 = function(){
18 document.write("<br/>原型模式"+this.name);//這裏是this
19 };
20 var person1 = new Person1();
21 person1.sayName2(); //"Nicholas"
22 console.log(person1.sayName2 instanceof Object); //true
23 console.log(Person.prototype);//Object
24 
25 
26 
27 //@--工廠模式
28 /*1.要在函數內部new一個實例化對象；
29   2.有返回值，返回new的那個對象；
30   3.函數名首字母最好不要大寫，由於構造函數函數名必須是大寫；
31  */
32 function createPerson() {
33     var o=new Object();//**這裏的Object首字母大寫了
34     o.name = "plant";
35     o.age = 29;
36     o.job = "Software Engineer";
37     o.sayName = function () {
38         document.write("<br/>工廠模式："+o.name);
39     };
40     return o;
41 }
42 var person1 = new createPerson();
43 person1.sayName();
44 
45 
46 /*----@構造函數---
47   1.可使用this來指向當前做用域中的對象；
48   2.函數名首字母移到要大寫；
49   3.無返回值；
50  */
51 function Person(name,age,job){
52     this.name=name;
53     this.age=age;
54     this.job=job;
55     this.sayName1=function(){
56         document.write("<br/>構造函數的輸出"+this.name);
57     }
58 };
59 
60 var pp1=new Person("hynix",31,"Big data");
61 pp1.sayName1();
62 </script>
63 </body>
64 </html>