本文列举了《JavaScript高级程序设计:第二版》书中讲到的6种创建JavaScript对象的模式,这里有英文版下载。
代码里边用到的一些公用方法本文后边有附。附件为源码。
1、原型链
Gmis.inheritance.Animal = function(nickname, legCount, characters) { this.nickname = nickname; this.legCount = legCount; this.characters = characters; } Gmis.inheritance.Animal.prototype = { constructor : Gmis.inheritance.Animal, getNickName : function() { return this.nickname; }, getLegCount : function() { return this.legCount; }, getCharacters : function() { return this.characters; }, getCharacterString : function() { return "[" + (this.characters == undefined ? "undefined" : this.characters.join(",")) +"]"; }, toString : function() { return "nickname: " + this.getNickName() + ", legCount: " + this.getLegCount() + ", charachters: " + this.getCharacterString(); } }; /** * 1、原型链<br> * 优点:继承了超类的方法--在通过new创建实例的时候,已经给实例添加了一个指向原型的属性,对原型方法的调用都是通过该隐藏实例查找过去的<br> * 缺点:<br> * 1、没有继承超类的属性<br> * 2、实例的构造函数是超类的构造函数<br> * * @param {String} type * @param {int} legCount */ Gmis.inheritance.Cat = function(nickname, legCount) { this.nickname = nickname; this.legCount = (legCount == undefined) ? 4 : legCount; }; Gmis.inheritance.Cat.prototype = new Gmis.inheritance.Animal(); var cat = new Gmis.inheritance.Cat("jiafei", 4, ['lovely', 'agile']); Gmis.inheritance.util.printAnimal("1、原型链", cat.toString()); Gmis.util.printMessage("Gmis.inheritance.Cat.prototype.constructor:\n" + Gmis.inheritance.Cat.prototype.constructor); Gmis.util.printMessage("cat.constructor:\n" + cat.constructor); Gmis.util.printMessage("Gmis.inheritance.Cat.prototype.constructor" + (Gmis.inheritance.Cat.prototype.constructor === cat.constructor ? " === " : " !== ") + "cat.constructor: ");
1、原型链 nickname: jiafei, legCount: 4, charachters: [undefined] Gmis.inheritance.Cat.prototype.constructor: function (nickname, legCount, characters) { this.nickname = nickname; this.legCount = legCount; this.characters = characters; } cat.constructor: function (nickname, legCount, characters) { this.nickname = nickname; this.legCount = legCount; this.characters = characters; } Gmis.inheritance.Cat.prototype.constructor === cat.constructor
2、借用构造函数
/** * 2、借用构造函数<br> * 优点:可以继承属性<br> * 缺点:不能继承方法<br> * * @param {String} nickname * @param {int} legCount */ Gmis.inheritance.Dog = function(nickname, legCount) { Gmis.inheritance.Animal.call(this, nickname, legCount); }; Gmis.inheritance.Dog.prototype.toString = function() { return "Dog.... nickname: " + this.nickname + ", legCount: " + this.legCount; }; var dog = new Gmis.inheritance.Dog("huhu", 4); Gmis.inheritance.util.printAnimal("2、借用构造函数", dog.toString());
2、借用构造函数 Dog.... nickname: huhu, legCount: 4
3、组合继承
/** * 3、组合继承--组合借用构造函数和原型链两种方式,各取其利<br> * 优点:<br> * 1、可以继承属性<br> * 2、可以继承方法<br> * 3、子类的构造函数指向子类本身<br> * 缺点:<br> * 1、调用了两次超类构造函数,如下所示,分别在a1、a2出调用了超类构造函数<br> * 2、覆盖超类的方法的时候,没有办法在复用超类方法的基础上添加新的功能,如下toString方法<br> * * @param {String} nickname * @param {int} legCount * @param {String} desc */ Gmis.inheritance.Pig = function(nickname, legCount, characters, desc) { // a1、第二次调用构造函数 Gmis.inheritance.Animal.call(this, nickname, legCount, characters); this.desc = desc; }; // a2、第一次调用构造函数 Gmis.inheritance.Pig.prototype = new Gmis.inheritance.Animal(); Gmis.inheritance.Pig.prototype.constructor = Gmis.inheritance.Pig; Gmis.inheritance.Pig.prototype.getDesc = function() { return this.desc; }; Gmis.inheritance.Pig.prototype.toString = function() { // 如果return this.toString() + ", desc: " + desc;会陷入死循环的,又没有超类的引用,无法super.toString() return "nickname: " + this.getNickName() + ", legCount: " + this.getLegCount() + ", charachters: " + this.getCharacterString() + ", desc: " + this.getDesc(); }; var pig = new Gmis.inheritance.Pig('pipi', 4, ['fat', 'sleepy'], 'lovely'); Gmis.inheritance.util.printAnimal("3、组合继承", pig.toString()); Gmis.util.printMessage("pig.constructor:\n" + pig.constructor);
3、组合继承 nickname: pipi, legCount: 4, charachters: [fat,sleepy], desc: lovely pig.constructor: function (nickname, legCount, characters, desc) { // a1、第二次调用构造函数 Gmis.inheritance.Animal.call(this, nickname, legCount, characters); this.desc = desc; }
4、原型继承
/** * 4、原型继承<br> * 优点:实现简单的拷贝<br> * 缺点: 1、无法扩展<br> * 2、所有实例共用引用类型的属性值<br> * * @param {Object} instance * @return {Object} */ Gmis.inheritance.createSubInstance = function(instance) { var F = function() {}; F.prototype = instance; return new F(); }; var animal = new Gmis.inheritance.Animal('turkey', 2, ['beautiful', 'agile']); var chick = Gmis.inheritance.createSubInstance(animal); var chick2 = Gmis.inheritance.createSubInstance(animal); // 新加的属性也会出现到chick中 chick2.getCharacters().push('fan'); Gmis.inheritance.util.printAnimal("4、原型继承", chick.toString());
4、原型继承 nickname: turkey, legCount: 2, charachters: [beautiful,agile,fan]
5、寄生继承
/** * 5、寄生继承<br> * 优点:可以扩展属性和方法<br> * 缺点:<br> * 1、所有实例共用引用类型的属性值<br> * * @param {Object} instance * @return {} */ Gmis.inheritance.createExtensionSubInstance = function(instance, wingCount) { var F = function(wingCount) { this.wingCount = wingCount }; F.prototype = instance; F.prototype.getWingCount = function() { return this.wingCount; } F.prototype.toString = function() { return "nickname: " + this.getNickName() + ", legCount: " + this.getLegCount() + ", charachters: " + this.getCharacterString() + ", wingCount: " + this.getWingCount(); } return new F(wingCount); }; var animal = new Gmis.inheritance.Animal('quail', 2, ['beautiful', 'agile']); var quail = Gmis.inheritance.createExtensionSubInstance(animal, 2); Gmis.inheritance.util.printAnimal("5、寄生继承", quail.toString());
5、寄生继承 nickname: quail, legCount: 2, charachters: [beautiful,agile], wingCount: 2
6、寄生组合继承
/** * 6、寄生组合继承 -- 通过原型继承方法, 通过借用构造函数继承属性<br> * 优点:<br> * 1、解决5的缺点1,实例不共用引用类型的属性<br> * 2、解决3的缺点1,只调用一次构造函数<br> * 注:Ext.extend用的就是这种方式<br> */ Gmis.inheritance.extend = function(subType, superType) { subType.prototype = Gmis.inheritance.createSubInstance(superType.prototype); subType.prototype.constructor = subType; }; Gmis.inheritance.Rabbit = function(nickname, legCount, characters, desc) { Gmis.inheritance.Animal.call(this, nickname, legCount, characters); this.desc = desc; if (!this.getDesc) { Gmis.inheritance.Rabbit.prototype.getDesc = function() { return this.desc; }; Gmis.inheritance.Rabbit.prototype.toString = function() { return "nickname: " + this.getNickName() + ", legCount: " + this.getLegCount() + ", charachters: " + this.getCharacterString() + ", desc: " + this.getDesc(); }; } }; //不能把这一行代码放在构造函数里边,因为在运行构造函数的开始处已经给实例原型属性赋了值 Gmis.inheritance.extend(Gmis.inheritance.Rabbit, Gmis.inheritance.Animal); var rabbit = new Gmis.inheritance.Rabbit("tutu", 4, ['quick', 'red eyes'], 'desc'); var rabbit2 = new Gmis.inheritance.Rabbit("tutu2", 4, ['quick2', 'red eyes2'], 'desc2'); //这个实例属性的设置不会影响到rabbit实例 rabbit2.getCharacters().push("charachter3"); Gmis.inheritance.util.printAnimal("6、寄生组合继承", rabbit.toString());
6、寄生组合继承 nickname: tutu, legCount: 4, charachters: [quick,red eyes], desc: desc
7、拷贝继承
* 7、拷贝继承--实则是拷贝,可以用来实现多继承 * @param {Object} subInstance * @param {Object} superInstance */ Gmis.inheritance.copyInherite = function(subInstance,superInstance){ for(var name in superInstance){ if(!(name in subInstance)){ subInstance[name] = superInstance[name]; } } } Gmis.inheritance.Racer = function(){ if(!this.run){ Gmis.inheritance.Racer.prototype.run = function(){ return this.nickname + " is running"; } } }; Gmis.inheritance.copyInherite(rabbit,new Gmis.inheritance.Racer()); Gmis.inheritance.util.printAnimal("7、拷贝继承", rabbit.toString() + ", " + rabbit.run());
7、拷贝继承 nickname: tutu, legCount: 4, charachters: [quick,red eyes], desc: desc, tutu is running
其他代码:
Gmis = {}; Gmis.inheritance = {}; Gmis.inheritance.util = {}; Gmis.util = {}; Gmis.inheritance.util.printAnimal = function(type, message) { Gmis.util.printMessage(message == undefined ? type : type + " " + message); }; Gmis.util.printMessage = function(message) { message += "\n"; var output = document.getElementById("output"); output.innerText = output.innerText == null ? message : output.innerText + message; } Gmis.inheritance.Animal = function(nickname, legCount, characters) { this.nickname = nickname; this.legCount = legCount; this.characters = characters; } Gmis.inheritance.Animal.prototype = { constructor : Gmis.inheritance.Animal, getNickName : function() { return this.nickname; }, getLegCount : function() { return this.legCount; }, getCharacters : function() { return this.characters; }, getCharacterString : function() { return "[" + (this.characters == undefined ? "undefined" : this.characters.join(",")) +"]"; }, toString : function() { return "nickname: " + this.getNickName() + ", legCount: " + this.getLegCount() + ", charachters: " + this.getCharacterString(); } };