1 /* 定义对象的方法：构造函数，函数字面量法，工厂模式，构造函数模式 */ 2 3 /**************************************/ 4 /** **/ 5 /** 1.原生构造函数法 **/ 6 /** **/ 7 /**************************************/ 8 9 //只能创建特定的对象，使用原生的构造函数，比如：Object，Array。 10 var prince = new Object(); 11 prince.name = "Prince"; 12 prince.age = 25; 13 prince.job = "Front End Engineer"; 14 prince.sayJob = function(){ 15 alert(prince.job); 16 }; 17 var xiaobao = new Object(); 18 xiaobao.name = "Zhibao Hu"; 19 xiaobao.age = 25; 20 xiaobao.job = "SEO"; 21 xiaobao.sayJob = function(){ 22 alert(xiaobao.job); 23 }; 24 prince.sayJob(); 25 xiaobao.sayJob(); 26 27 /**************************************/ 28 /** **/ 29 /** 2.字面量法 **/ 30 /** **/ 31 /**************************************/ 32 33 //javascript对象中实行名称可以加双引号，单引号，或者不加，但是json数据一定要用双引号，不加引号或者用单引号都会出错。 34 var xiaoyin = { 35 name : "Chaohuan Yin", 36 age : 24, 37 job : "Wireless Yunyin", 38 sayAge : function(){ 39 //这里如果省略了this就会出错。 40 alert(this.age); 41 } 42 }; 43 xiaoyin.sayAge(); 44 45 //以上两种方法的缺点：使用一个接口创建很多对象，代码重复很多。 46 //为了解决这个问题，人们开始使用工厂模式和他的变体 47 48 /**************************************/ 49 /** **/ 50 /** 3.工厂模式 **/ 51 /** **/ 52 /**************************************/ 53 54 //用函数来封装以特定接口创建对象的细节 55 function createPerson(name,age,job){ 56 var o = new Object(); 57 o.name = name; 58 o.age = age; 59 o.job = job; 60 o.sayAge = function(){ 61 alert(this.age); 62 }; 63 return o; 64 } 65 var tangtang = createPerson("Jin Shi",23,"Shop Yunyin"); 66 tangtang.sayAge(); 67 //工厂模式没有办法知道一个对象的类型，所以出现了构造函数模式，自己定义构造函数 68 69 /**************************************/ 70 /** **/ 71 /** 4.自定义构造函数法 **/ 72 /** **/ 73 /**************************************/ 74 75 function Person(name,age,job){ 76 this.name = name; 77 this.age = age; 78 this.job = job; 79 this.sayName = function(){ 80 alert(this.name); 81 }; 82 } 83 //当构造函数使用 84 var liujie = new Person("Jie Liu",27,"Yunwei"); 85 //当普通函数使用 86 Person("Qinqin Yu",27,"Shop Yunyin");//添加到window中 87 liujie.sayName(); 88 window.sayName(); 89 //在另一个对象的作用域中使用 90 var o = new Object(); 91 Person.call(o,"Prince",25,"F2E"); 92 o.sayName(); 93 94 //将构造函数中的方法提取出来 95 function Person1(name,age,job){ 96 this.name = name; 97 this.age = age; 98 this.job = job; 99 this.sayName = sayName; 100 } 101 function sayName(){ 102 alert(this.name); 103 } 104 var prince = new Person1("Prince Yu",25,"Front End Engineer"); 105 var xiaoyin = new Person1("Chaohuan Yin",24,"Shop Yunyin"); 106 prince.sayName(); 107 xiaoyin.sayName(); 108 109 /**************************************/ 110 /** **/ 111 /** 5.原型模式 **/ 112 /** **/ 113 /**************************************/ 114 //1.原型对象方法 115 function Person2(){} 116 Person2.prototype.name = "Prince"; 117 Person2.prototype.age = 29; 118 Person2.prototype.job = "F2E"; 119 Person2.prototype.sayAge = function(){ 120 alert(this.age); 121 }; 122 var dada = new Person2(); 123 var prince = new Person2(); 124 dada.sayAge(); 125 prince.sayAge(); 126 127 //2.原型对象字面量方法 128 function Person3(){} 129 Person3.prototype = { 130 name : "Prince", 131 age : 30, 132 job : "F2E", 133 sayAge : function(){ 134 alert(this.age); 135 } 136 }; 137 var wangzi = new Person3(); 138 wangzi.sayAge(); 139 140 /**************************************/ 141 /** **/ 142 /** 6.组合使用构造函数模式和原型模式 **/ 143 /** **/ 144 /**************************************/ 145 146 function Person4(name,age,job){ 147 this.name = name; 148 this.age = age; 149 this.job = job; 150 this.friends =["Wangbing","Liutan"]; 151 } 152 Person4.prototype = { 153 constructor : Person4, 154 sayAge : function(){ 155 alert(this.age); 156 } 157 } 158 var dada =new Person4("Prince",25,"F2E"); 159 var xiaobao =new Person4("Zhibao Hu",25,"SEO"); 160 dada.friends.push("Prince Yu"); 161 alert(dada.friends); 162 alert(xiaobao.friends); 163 alert(xiaobao.friends == dada.friends); 164 alert(xiaobao.sayAge == dada.sayAge); 165 //这是用来定义引用类型的一种默认方式