基于ECMAScript5的承继链实现 _Web前端

基于ECMAScript5的继承链实现

记得以前写过一篇基于javascript function的类继承链实现。在ECMAScript3.1中，可以把function模拟成类。但是，因为原型链，构造体的实现非常繁琐。

现在各大浏览器升级到ECMAScript5之后，逐渐抛弃了以function来模拟类的思路。而转变为以对象来模拟类的思路。即：

var Cat = {};

?以上的代码，可以看成是一个对象，也可以看成是一个类。当然像现在流行的静态语言中，比如java，Class本身就是对象。(究竟是先有对象还是先有类这样究竟是鸡生蛋还是蛋生鸡这样的哲学问题这里不加以讨论)

由此，新的Class函数如下：

var Class = (function() {

		/**
		 * Initialze object from class.
		 * @param class object.
		 */
		var initializeClass = (function() {
			if (Object.create) {
				return Object.create;
			} else {
				return function(o) {
					function F() {}  
			        F.prototype = o;  
			        return new F();
				};
			}
		})();

		/**
		 * The main function of Class.
		 * 
		 * @param classContent
		 * @param superClass
		 */
		return function() {

			var classPrototype = arguments[arguments.length - 1] || {};

			for (var index = 0; index < arguments.length - 1; index++) {

				var superClass = arguments[index];
				
				if (typeof superClass["initialize"] == "function") {
					classPrototype.superclass = superClass["initialize"];
				} else {
					classPrototype.superclass = function() {};
				}
				
				for (var prop in superClass) {

					if (prop == "initialize" || prop == "newInstance") {
						continue;
					}
					
					if (classPrototype.hasOwnProperty(prop)) {
						if (typeof superClass[prop] == "function") {
							classPrototype.superclass[prop] = superClass[prop];
						}
					} else {
						classPrototype[prop] = superClass[prop];
					}
				}
			}
			classPrototype.newInstance = function() {
				var instance = initializeClass(this);
				if (instance["initialize"]) {
					instance["initialize"].apply(instance, arguments);
				}
				return instance;
			};
			return classPrototype;
		};
	})();

大致功能为为对象增加getInstance方法和父类的superclass对象使其能够调用父类的构造体和方法。

测试：

	var Animal = Class({
		initialize: function(age) {
			this.age = age;
		},
		eat: function() {
			alert("eat");
		}
	});

	var Cat = Class(Animal, {
		initialize: function(name, age) {

			// 调用父类构造体
			Cat.superclass.call(this, age);

			// 本类属性
			this.name = name;

			// 调用父类方法
			this.superclass.eat();
		},
		eat: function() {
			alert("eat fish");
		}
	});
	var animal = Animal.newInstance(12);
	animal.eat();
	var cat = Cat.newInstance("123", 12);
	alert(cat.name);
	alert(cat.age);
	cat.eat();

此方式注意点：

1.无法完全使用instanceof 来模糊判断是何种类型(判断父类)。但是可以用isPrototypeOf来精确判断是何种子类

2.无需使用关键字new来实例化对象。。而要用newInstance方法。(废话)

大家可以比较下我以前的那篇文章，会发现，继承的实现不是简单了一点半点。

至于instanceof的判断限制问题，大家完全可以不用担心

例如下面的java代码，instanceof用来判断何种接口，然后判断完后无非为了调用接口的方法。

public interface Animal {
}

public interface Cat extends Animal {
     void eatFish()；
}

public interface Dog extends Animal {
     void eatFood（）；
}


public class Test {
     public void animalExecute(Animal animal) {
          if (animal instanceof Cat) {
                (（Cat） animal).eatFish();
          } else if (animal instanceof Dog) {
                (（Cat） animal).eatFood();
          }
     }
}

而javascript在没有instanceof的情况下，代码可以这么实现

var Animal = Class({});

var Dog = Class(Animal, {
       eatFood: function() {};
})

var Cat = Class(Animal, {
       eatFish: function() {};
})

function animalExecute(animal) {
       
       if (animal.eatFood) {// Dog
              animal.eatFood();
       } else if (animal.eatFish) {// Cat
              animal.eatFish();
       }
}

?也就是说，javascript完全无需instanceof，也能完成相同功能

另外，在写组建的时候，通常都会用composite模式，在此模式下，instanceof就没有必要了。

为了解决instanceof的问题。我们引入function作为Object.create的模板，就能解决这个问题

var Class = (function() {  
      
    /**  
     * Inherits function.(node.js)  
     *   
     * @param ctor subclass's constructor.  
     * @param superctor superclass's constructor.  
     */  
    var inherits = function(ctor, superCtor) {  
        ctor.super_ = superCtor;  
          
        // ECMAScript 5  
        if (Object.create) {  
            ctor.prototype = Object.create(superCtor.prototype, {  
                constructor: {  
                    value: ctor,  
                    enumerable: false,  
                    writable: true,  
                    configurable: true  
                }  
            });  
        } else {  
            function F() {};  
            F.prototype = superCtor.prototype;  
            ctor.prototype = new F();  
            ctor.prototype.constructor = ctor;  
        }  
    };  
      
    /**  
     * Class function.  
     */  
    return function() {  
          
        var subClazz = arguments[arguments.length - 1] || function() {};  
          
        var fn = subClazz.initialize == null ? function() {} : subClazz.initialize;  
          
        for (var index = 0; index < arguments.length - 1; index++) {  
            inherits(fn, arguments[index]);  
        }  
          
        for (var prop in subClazz) {  
              
            if (prop == "initialize") {  
                continue;  
            }  
              
            fn.prototype[prop] = subClazz[prop];  
        }  
        
        return fn;  
    }  
      
})();  
  
/**  
 * The definition of Cat Class.  
 */  
var Cat = Class({  
      
    /**  
     * Constructor.  
     *   
     * @param name Cat's name  
     */  
    initialize: function(name) {
        this.name = name;  
    },  
      
    /**  
     * Eat function.  
     */  
    eat: function() {  
        alert(this.name + " is eating fish.");  
    }  
});  
  
/**  
 * The definition of Black Cat Class.  
 */  
var BlackCat = Class(Cat, {  
      
    /**  
     * Constructor.  
     *   
     * @param name Cat's name.  
     * @param age Cat's age.  
     */  
    initialize: function(name, age) {  
        // call the constructor of super class.  
        BlackCat.super_.call(this, name);  
        this.age = age;  
          
    },  
      
    /**  
     * Eat function.  
     */  
    eat: function() {  
        alert(this.name + "(" + this.age + ") is eating dog.");  
    }  
});  
  
/**  
 * The definition of Black Fat Cat Class.  
 */  
var BlackFatCat = Class(BlackCat, {  
      
    /**  
     * Constructor.  
     *   
     * @param name Cat's name.  
     * @param age Cat's age.  
     * @param weight Cat's weight.  
     */  
    initialize: function(name, age, weight) {  
        // call the constructor of super class.  
        BlackFatCat.super_.call(this, name, age);  
        this.weight = weight;  
    },  
      
    /**  
     * Eat function.  
     */  
    eat: function() {  
        alert(this.name + "(" + this.age + ") is eating dog. My weight: " + this.weight);  
    }  
});  
  
  
/**  
 * The definition of Dog Class.  
 */  
var Dog = Class({});  
  
var cat = new BlackFatCat("John", 24, "100kg");  
cat.eat();  
  
// true  
alert(cat instanceof Cat);  
  
// true  
alert(cat instanceof BlackCat);  
  
// true  
alert(cat instanceof BlackFatCat);  
  
// true  
alert(cat.constructor === BlackFatCat);  
  
// false  
alert(cat instanceof Dog);

可以很明显的看到instanceof可以判断原型链上的function。

1 楼 danny.chiu 2011-05-18

学习了，其实无论是原型式继承，还是模仿类式继承，都可以实现相同的功能，各有所长。关键还是思路。

引用

var Animal = Class({});

var Dog = Class(Animal, {
       eatFood: function() {};
})

var Cat = Class(Animal, {
       eatFish: function() {};
})

function animalExecute(animal) {
       
       if (animal.eatFood) {// Dog
              animal.eatFood();
       } else if (animal.eatFish) {// Cat
              animal.eatFish();
       }
}

个人觉得适合用接口的思路：

var Animal = Class({
       eat: function() {
              throw new Error('interface...');
       };
});

var Dog = Class(Animal, {
       eat: function() {
              return 'dog eating food';
       };
})

var Cat = Class(Animal, {
       eat: function() {
              return 'cat eating fish';
       };
})

function animalExecute(animal) {
       
       // 接口检查
       //Interface.ensureImplements(animal, Animal);
       animal.eat();
}

关于接口及接口检查的实现，请光临在下的小坦克(tank/js/util.js)，希望大家多多交流，共同进步。

2 楼 rainsilence 2011-05-18

danny.chiu 写道

学习了，其实无论是原型式继承，还是模仿类式继承，都可以实现相同的功能，各有所长。关键还是思路。

引用

var Animal = Class({});

var Dog = Class(Animal, {
       eatFood: function() {};
})

var Cat = Class(Animal, {
       eatFish: function() {};
})

function animalExecute(animal) {
       
       if (animal.eatFood) {// Dog
              animal.eatFood();
       } else if (animal.eatFish) {// Cat
              animal.eatFish();
       }
}

个人觉得适合用接口的思路：

var Animal = Class({
       eat: function() {
              throw new Error('interface...');
       };
});

var Dog = Class(Animal, {
       eat: function() {
              return 'dog eating food';
       };
})

var Cat = Class(Animal, {
       eat: function() {
              return 'cat eating fish';
       };
})

function animalExecute(animal) {
       
       // 接口检查
       //Interface.ensureImplements(animal, Animal);
       animal.eat();
}

关于接口及接口检查的实现，请光临在下的小坦克(tank/js/util.js)，希望大家多多交流，共同进步。

呵呵，实际在实现继承的时候，特别是在用装饰模式的时候。完全的装饰类是很少有的。子类总会多几个方法。
你的这个实现是多态。而我这个只是用来代替instanceof的思路。。目的不一样。。

3 楼 danny.chiu 2011-05-18

呵呵，我只是面向接口的思路，如果说到您的用实例方法代替instanceof的话，还不如直接给类定义个属性(this.instanceof = 'className')，这样倒也可以一致了。如果非用您那种思路，首先判断变复杂了，没有统一的接口，必须知道对象的具体实现，其次给重构带了诸多陷阱，比如不能随便删除方法；不能随便修改方法名字；不能随便添加方法，因为需要看下其他同父子类是否有同名的方法，不然你的判断就失效了。
ＰＳ：其实真的可以在实现的时候，像superclass一样，添加一个instanceof的属性。

4 楼 rainsilence 2011-05-18

danny.chiu 写道

最后一句话的确有点道理。。但是我最后的解决方案只是针对上面的java代码实现的功能而言的。（意思为，如果非要实现这样的代码，你也可以这样写）一般架构而言，都应该写成接口的形式。但是基于产品的高度来考虑，总会有人关心没有了instanceof会怎么样？By the way，一般前端ui架构核心主要是合成模式。只需要定义个接口合成就ｏｋ了。也不会用到上面instanceof的情况。

ps.直接给类定义个属性(this.instanceof = 'className')这样是不可取的，与其这样，不如isPrototypeOf。