Javascript类的继承,使用this.callParent调用超类方法

以前在做Ext3开发的时候,一直用使用Ext.extend()来做类的继承,在以后写代码,都习惯了使用Ext.extend类似功能的代码来做类继承,但是遇到一个问题一直无法解决,如下面的代码:
 
MyClass1 = function() {};
MyClass1.prototype = {
    say: function() {
        alert('MyClass1 say hello world!');
    }
};

MyClass2 = Ext.extend(MyClass1, {
    say: function() {
        MyClass2.superclass.say.call(this);
        alert('MyClass2 say hello world!');
    }
});
 
每次子类需要调用超类方法,都要像下面这样写:
 
MyClass2.superclass.say.call(this);
 
这种写法有几个弊端:
  • 类名要内置到函数代码模块中,如果一旦修改类名,就非常麻烦
  • 每次的调用都要写一长串代码,有时候为了省事复制粘贴,忘记改类名,就会出错
  • 有时候需要传参,使用call与apply调用用法不统一
 
所以,很长一段时间在想如何改进super的调用?能做到java那样,如:
 
public MyClass2 extends MyClass1{
    public void say() {
        super.say();
        System.out.println('MyClass2 say hello world!');
    }
}
 
自己试了好几种方法,总是不能完美解决,就放弃了一段时间,再后来也没有多想这事。
 
Ext4出来之后,看了一些资料,发现Ext4 Class非常强大,完美的解决我想的问题,其实,那时候挺兴奋,想研究以下源码的,打开代码库,发现Ext对类的支持过于强大(对我而言),结构异常复杂,那时候也由于重心没在这块,所以,就先放下没有继续研究。今天终于静下心来,用心阅读了Ext4 Class相关的源码(Ext的开发者很厉害,不得不佩服)。

Ext使用callParent就能调用到父类的方法,非常简单,用法如下:
 
MyClass2 = Ext.define({
    say: function() {
        this.callParent(); // 调用父类的say()

        // 如果要为父类方法传参,只需要像下面这样写
        //this.callParent(arguments);
        //this.callParent([param1, param2]);

        alert('say: hello world!');
    }
});
 
我把其中和类继承相关的代码剥离出来,重新编码,其他有关Config,Statics等特性全部移除,代码变简单了很多,也容易懂了很多。下面是应用的例子,Class的源码和例子都使用了requirejs,附件中是class.js的源码:
 
require(['class/Class'], function(Class) {
    var MyCls1 = Class.define({
        say: function() {
            alert('MyCls1 say: hello world!');
            // 输出'MyCls1 say: hello world!'
        }
    });
    new MyCls1().say();

    var MyCls2 = Class.define({
        extend: MyCls1,
        say: function() {
            this.callParent();
            alert('MyCls2 say: hello world!');
            // 输出'MyCls1 say: hello world!'
            // 输出'MyCls2 say: hello world!'
        }
    });
    new MyCls2().say();

    var MyCls3 = Class.define({
        extend: MyCls2,
        say: function() {
            this.callParent();
            alert('MyCls3 say: hello world!');
            // 输出'MyCls1 say: hello world!'
            // 输出'MyCls2 say: hello world!'
            // 输出'MyCls3 say: hello world!'
        }
    });
    new MyCls3().say();
    
    Class.override(MyCls2, {
        constructor: function(config) {
            this.name = config.name;
        },
        say: function() {
            this.callParent();
            alert('the new method MyCls2 say: hello world! by ' + this.name);
            // 输出'MyCls1 say: hello world!'
            // 输出'the new method MyCls2 say: hello world! by max'
            // 输出'MyCls3 say: hello world!'
        }
    });
    
    new MyCls3({
        name: 'max'
    }).say();
});
 
例子html页面
 
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Test Unit</title>

<script type="text/javascript" src="../src/lib/requirejs.js"></script>
<script type="text/javascript">
require.config({
    baseUrl: '../src'
});
</script>
<script type="text/javascript" src="unit/Class.js"></script>

</head>
<body>

</body>
</html>
 
原创文章,转载请注明出处http://zhangdaiping.iteye.com

你可能感兴趣的:(JavaScript)