学习prototypejs中的继承实现机制(二)：让$super更像java中的super关键字

上一篇博客"Object.extend()、Class.create()、Class#addMethods()"中详细地介绍了prototypejs库中与继承有关的方法的用法，那篇文章的开篇也引出了我想要解决的一个问题：

是不是和java中的继承有点像，我们居然可以使用$super来调用父类中的方法。不过有些差别：java中可以使用super调用父类中的任何公开的方法，但是在prototypejs里面$super只是一个方法，不是父对象。我们先研究下，prototypejs是如何做到$super，后面再看我们能不能改造它，让$super更像java中的super关键字。

这篇博客，我们就来动动prototypejs库Class#addMethods源码，看看能不能实现我要的功能。先来看一段熟悉的代码，这个是$super的基本用法。后面我们用到的测试代码和这个差不多，所以一定要先熟悉下面这段代码。

var Base = Class.create({
	initialize:function(){
		this.logs = [];
	},
	showLog:function(tips){
		console.log("parent["+ tips+"],logs="+this.logs);
	},
	appendLog:function(msg){
		this.logs.push(msg);
	}
});

var Child = Class.create(Base,{
	initialize:function($super, id){
		$super(id);
		this.fatal = [];
	},
	
	showLog:function($super, tips){
		$super(tips);
		console.log("child["+ tips+"],fatal="+this.fatal);
	},
	appendLog:function($super,msg){
		if(msg.indexOf("fatal") != -1)
		{
			this.fatal.push(msg);
		}
		else
		{
			$super(msg);
		}
	}
});

var cobj = new Child("aty");
cobj.showLog("cas");

在OOP语言(如java)中，如果子类Child继承父类Base，那么编写某个子类方法的需求，无外乎下面几个：

1.子类方法需要调用父类中的个同名方法(通过super关键字来调用)。

2.子类方法需要调用父类中的不同名方法(通过super关键字来调用)。

3.子类方法需要调用子类自身的其他方法(通过this关键字来调用)。

4.子类方法需要调用多个父类和子类自身的方法。

还有下面这种场景(姑且称为需求5)也是不支持的：上面的例子中Base类中的方法showLog和appendLog，子类Child覆盖了这2个方法的实现，Child#showLog是无法调用Base#appendLog的，同样Child#appendLog里面也无法调用Base#showLog。

很容易验证：prototypejs库实现了需求1、需求2、需求3，需求4和需求5支持的没有那么好。这些需求在java等语言中统统可以满足，现在我们要做的就是提供类似java中的super关键字。prototypejs真的不能满足需求需求4和需求5吗？其实是可以的，只不过得费点手段，不像java那般直接。

var Base = Class.create({
	initialize:function(){
		this.logs = [];
	},
	showLog:function(tips){
		console.log("parent["+ tips+"],logs="+this.logs);
	},
	appendLog:function(msg){
		this.logs.push(msg);
	}
});

var Child = Class.create(Base,{
	initialize:function($super,id){
		$super(id);
		this.fatal = [];
	},
	
	showLog:function($super,  tips){
		$super(tips);
		console.log("child["+ tips+"],fatal="+this.fatal);
	},
	appendLog:function($super, msg){
		if(msg.indexOf("fatal") != -1)
		{
			this.fatal.push(msg);
		}
		else
		{
			$super(msg);
		}
		
		// prototypejs将方法存在原型上
		var parent = Child.superclass.prototype;
		
		// 调用父类中的2个方法
		parent.appendLog.call(this, "debug");
		parent.showLog.call(this, "call parent in child");
		
		this.showLog("call child self");
	}
});

var cobj = new Child("aty");
cobj.appendLog("fatal");

这段代码完成能够正常运行，而且执行结果也完全符合我们的预期。执行结果如下：

也就是说需求4和需求5，prototypejs库其实都是支持的，只不过写起来麻烦一下。上面这种方式，也是我阅读源码后才发现的。如果想实现类似java中的super，上面这段代码可以给我们很好的启示：其实就是将Child.superclass.prototype这个对象，像$super一样传递给子类的函数。也就是说我们可以按照下面的格式书写子类中的方法：

var Child = Class.create(Base,{
	showLog:function($super, _super, tips){
		$super(tips);//prototypejs中的$super
		_super.showLog(tips);//这种方式是不是很像java中super
		console.log("child["+ tips+"],fatal="+this.fatal);
	}
});

为了实现上面这种_super的写法，我们需要修改prototypejs的源码来达到目的。其实就是Class#addMethods()方法，这个方法会将$super和_super注入到函数中。下面源码来自prototypejs-1.7.3版本，注释的位置就是我们需要修改的地方，是实现_super的关键。

function addMethods(source) {
    var ancestor   = this.superclass && this.superclass.prototype,
        properties = Object.keys(source);

    if (IS_DONTENUM_BUGGY) {
      if (source.toString != Object.prototype.toString)
        properties.push("toString");
      if (source.valueOf != Object.prototype.valueOf)
        properties.push("valueOf");
    }

    for (var i = 0, length = properties.length; i < length; i++) {
      var property = properties[i], value = source[property];
      if (ancestor && Object.isFunction(value) &&
          value.argumentNames()[0] == "$super") {
        var method = value;
		
		/****这里将$super注入到子类函数****************/
        value = (function(m) {
          return function() { 
			return ancestor[m].apply(this, arguments); 
		};
        })(property).wrap(method);
		/****这里将$super注入到子类函数****************/
		
        value.valueOf = (function(method) {
          return function() { return method.valueOf.call(method); };
        })(method);

        value.toString = (function(method) {
          return function() { return method.toString.call(method); };
        })(method);
      }
      this.prototype[property] = value;
}

下面这段是测试代码，我们要做的就是让这段代码能够正常运行。

var Base = Class.create({
	initialize:function(){
		this.logs = [];
	},
	showLog:function(tips){
		console.log("parent["+ tips+"],logs="+this.logs);
	},
	appendLog:function(msg){
		this.logs.push(msg);
	}
});

var Child = Class.create(Base,{
	initialize:function($super, _super, id){
		$super(id);
		this.fatal = [];
	},
	
	showLog:function($super, _super, tips){
		$super(tips);
		_super.showLog(tips);
		_super.showLog.call(this, tips);
		console.log("child["+ tips+"],fatal="+this.fatal);
	},
	appendLog:function($super,  _super, msg){
		if(msg.indexOf("fatal") != -1)
		{
			this.fatal.push(msg);
		}
		else
		{
			$super(msg);
		}
	}
});

var cobj = new Child("aty");
cobj.appendLog("fatal");
cobj.appendLog("debug");
cobj.showLog("my_super");
console.log(window.logs == undefined);

正确的执行结果应该是下面这个样子：

parent[my_super],logs=debug
parent[my_super],logs=debug
parent[my_super],logs=debug
child[my_super],fatal=fatal
true

第一版改造的代码和执行结果如下：

value = (function(m, childMethod){
	return function(){
		// 将arguments对象转换成数组
		var argsArray = Array.prototype.slice.call(arguments);
		return childMethod.apply(this, [ancestor[m], ancestor].concat(argsArray));
	};
})(property, method);

代码运行并没有什么异常，但是执行结果却不符合我们的期望。分析执行结果，可以看到log这个变量本来应该是在cobj这个对象中的，结果却被添加到全局对象window中。也就是说$super中的上下文对象this弄错了。

第二版改造代码和执行结果如下：

value = (function(m, childMethod){
	return function(){
		// 将arguments对象转换成数组
		var argsArray = Array.prototype.slice.call(arguments);
		//使用了bind绑定正确的上下文
		return childMethod.apply(this, [ancestor[m].bind(this), ancestor].concat(argsArray));
	};
})(property, method);

可以看到已经快符合预期了，就是这种调用方式_super.showLog(tips)存在问题，不能访问到logs这个变量的值。

第三版改造的代码和执行结果如下：

value = (function(m, childMethod){
	return function(){
		// 将arguments对象转换成数组
		var argsArray = Array.prototype.slice.call(arguments);
		
		//复制ancestor中所有方法,不能修改ancestor,原型对象是共享的,
		//因为修改原型是一件很危险的事,
		var copy = {};
		for(var eachKey in ancestor)
		{
			var eachValue = ancestor[eachKey];
			if(Object.isFunction(eachValue))
			{
				copy[eachKey] = eachValue.bind(this);
			}
		}
		return childMethod.apply(this, [ancestor[m].bind(this), copy].concat(argsArray));
	};
})(property, method);

可以看到执行结果跟我们的预期是完全一致的。改造中使用的技巧也很简单，无非就是使用bind方法改变函数中上下文对象(就是this)。很像java中的super关键字了吧，哈哈，改造至此结束。