您的足迹:首页 > web前端 >Javascript类的继承,使用this.callParent调用超类方法

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调用用法不统一
Ext4出来之后,看了一些资料,发现Ext4 Class非常强大,完美的解决我想的问题,其实,那时候挺兴奋,想研究以下源码的,打开代码库,发现Ext对类的支持过于强大(对我而言),结构异常复 杂,那时候也由于重心没在这块,所以,就先放下没有继续研究。今天终于静下心来,用心阅读了Ext4 Class相关的源码.
Ext使用callParent就能调用到父类的方法,非常简单,用法如下:
Js代码   
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页面
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>

相关推荐

网友评论(0)