《JavaScript高级程序设计》之面向对象创建与继承常见模式

  1 //=================method 工厂模式================
  2 var Person = function (name, age) {
  3     var object = {};
  4     
  5     object.name = name;
  6     object.age = age;
  7     object.say = function (words) {
  8         console.info(words);
  9     };
 10     object.getName = function () {
 11         console.info(this.name);
 12     };
 13     
 14     return object;
 15 };
 16 
 17 var person = Person(‘stone‘, 20);
 18 console.info(person.name, person.age);
 19 person.say(‘hello‘);
 20 person.getName();
 21 
 22 //=================method 构造函数模式================
 23 var Person = function (name, age) {
 24     this.name = name;
 25     this.age = age;
 26     this.say = function (words) {
 27         console.info(words);
 28     };
 29 };
 30 
 31 var person = new Person(‘stone‘, 20);
 32 console.info(person.name, person.age);
 33 person.say(‘hello‘);
 34 
 35 var person2 = Person(‘water‘, 21);
 36 console.info(person2.name, person2.age);
 37 person2.say(‘hello‘);
 38 console.info(this.name, this.age);
 39 this.say(‘hello‘);
 40 
 41 //=================method 原型模式================
 42 var Person = function () {};
 43 
 44 Persion.prototype.name = ‘stone‘;
 45 Person.prototype.age = 20;
 46 Person.prototype.say = function (words) {
 47     console.info(words);
 48 };
 49 
 50 var person = new Person();
 51 console.info(person.name, person.age);
 52 person.say(‘hello‘);
 53 
 54 //=================method 组合模式（构造 + 原型）================
 55 var Person = function (name, age) {
 56     this.name = name;
 57     this.age = age;
 58 }
 59 
 60 Person.prototype = {
 61     constructor: Person,
 62     say: function (words) {
 63         consolo.info(words);
 64     }
 65 };
 66 
 67 var person = new Person(‘stone‘, 20);
 68 console.info(person.name, person.age);
 69 person.say(‘hello‘);
 70 
 71 var person2 = Person(‘water‘, 21);
 72 console.info(person2.name, person2.age);
 73 person2.say(‘hello‘);
 74 console.info(this.name, this.age);
 75 this.say(‘hello‘);
 76 
 77 //=================method 动态原型模式================
 78 var Person = function (name, age) {
 79     this.name = name;
 80     this.age = age;
 81     
 82     if (typeof this.say != ‘function‘) {
 83         Person.prototype.say = function (words) {
 84             console.info(words);
 85         };
 86     }
 87 };
 88 
 89 var person = new Person(‘stone‘, 20);
 90 person.say(‘hello‘);
 91 
 92 //=================method 稳妥构造函数模式================
 93 var Person = function (name) {
 94     var o = {};
 95     o.sayName = function () {
 96         console.info(name);
 97     }
 98     return o;
 99 };
100 
101 var person = new Person(‘stone‘);
102 person.sayName();
103 
104 
105 
106 //=====================================继承==================================================//
107 
108 //=================method 原型链继承================
109 var SuperType = function () {
110     this.property = true;
111 };
112 
113 SuperType.prototype.getSuperValue = function () {
114     return this.property;
115 };
116 
117 var SubType = function () {
118     this.subProperty = false;
119 };
120 
121 SubType.prototype = new SuperType();
122 
123 SubType.prototype.getSubValue = function () {
124     return this.subProperty;
125 };
126 
127 //override
128 SubType.prototype.getSuperValue = function () {
129     return this.subProperty;
130 }
131 
132 var instance = new SubType();
133 console.info(instance.getSuperValue());
134 
135 console.info(SuperType.prototype.isPrototypeOf(instance));
136 console.info(SubType.prototype.isPrototypeOf(instance));
137 console.info(Object.prototype.isPrototypeOf(instance));
138 
139 console.info(instance instanceof SuperType);
140 console.info(instance instanceof SubType);
141 console.info(instance instanceof Object);
142 
143 instance.constructor == SuperType  //true
144 instance.constructor == SubType  //fasle
145 
146 //=================method 借用构造函数================
147 var SuperType = function (name) {
148     this.name = name;
149 };
150 
151 var SubType = function (name, age) {
152     SuperType.call(this, name);
153     this.age = age;
154 };
155 
156 var instance = new SubType(‘stone‘, 20);
157 console.info(instance.name, instance.age);
158 
159 //=================method 组合继承================
160 var SuperType = function (name) {
161     this.name = name;
162 };
163 
164 SuperType.prototype.getName = function () {
165     return this.name;
166 };
167 
168 var SubType = function (name, age) {
169     SuperType.call(this, name);
170     this.age = age;
171 };
172 
173 SubType.prototype = new SuperType();
174 
175 SubType.prototype.getAge = function () {
176     return this.age;
177 };
178 
179 var instance = new SubType(‘stone‘, 20);
180 console.info(instance.getName(), instance.getAge());
181 
182 //=================method 原型式继承================
183 function object(o) {
184     var F = function () {};
185     F.prototype = o;
186     return new F();
187 };
188 
189 var person = {
190     name: ‘john‘,
191     friends: [‘van‘, ‘nicholas‘, ‘smart‘]
192 };
193 
194 var anotherPerson = object(person);
195 anotherPerson.name = ‘boy‘;
196 anotherPerson.friends.push(‘hey‘);
197 
198 console.info(person);
199 console.info(anotherPerson);
200 
201 //=================method 寄生式继承================
202 function object(o) {
203     var F = function () {};
204     F.prototype = o;
205     return new F();
206 };
207 
208 var person = {
209     name: ‘john‘,
210     friends: [‘van‘, ‘nicholas‘, ‘smart‘]
211 };
212 
213 var createAnotherPerson = function (o) {
214     var clone = object(o);
215     clone.say = function () {
216         console.info(‘hello‘);
217     };
218     return clone;
219 };
220 
221 var anotherPerson = createAnotherPerson(person);
222 console.info(person);
223 console.info(anotherPerson);
224 
225 //=================method 寄生式组合式继承================
226 
227 // var inheritPrototype = function (subType, superType) {
228     // var F = function () {};
229     // F.prototype = superType.prototype;
230     // F.constructor = subType;
231     // return new F();
232 // };
233 
234 var inheritPrototype = function (subType, superType) {
235     var F = function () {};
236     F.prototype = superType.prototype;
237     var proto = new F();
238     proto.constructor = subType;
239     subType.prototype = proto;
240 };
241 
242 var SuperType = function (name) {
243     this.name = name;
244 };
245 
246 SuperType.prototype.getName = function () {
247     return this.name;
248 };
249 
250 var SubType = function (name, age) {
251     SuperType.call(this, name);
252     this.age = age;
253 };
254 
255 inheritPrototype(SubType, SuperType);
256 
257 SubType.prototype.getAge = function () {
258     return this.age;
259 };
260 
261 var instance = new SubType(‘stone‘, 20);
262 console.info(instance.getName(), instance.getAge());