设为首页 加入收藏

TOP

Javascript继承机制的实现(一)
2017-10-13 10:50:24 】 浏览:580
Tags:Javascript 继承 机制 实现

学完了java script类和对象的创建之后,现在总结一下java script继承机制的实现。java script并不像Java那样对继承机制有严格明确的定义,它的实现方式正如它的变量的使用方式那样也是十分宽松的,你可以设计自己的方法“模仿”继承机制的实现。有以下几种方法:

1、对象冒充

 1 <script type="text/java script">
 2     function classA(str){
 3         this.str=str;
 4         this.printstr=function(){
 5             document.write(this.str);
 6             document.write("<br>");
 7         }
 8         this.getstr=function(){
 9             return this.str;
10         }        
11     }
12     function classB(name,str){
13         //下面这两句代码相当于将classA代码体中的内容搬到这里
14         this.newMethod1=classA;
15         this.newMethod1(str);
16         //注意,这里的写法
17         delete this.newMethod1;
18         //新的方法和属性的定义须在删除了newMethod之后定义,因为可能覆盖超类的属性和方法。
19         this.name=name;
20         this.sayName=function(){
21             document.write(this.name);
22             document.write("<br>");
23         }
24         
25     }
26     var a=new classB("Amy","helloworld");
27     a.printstr();
28     alert(a.getstr());
29     a.sayName();
30 </script>
View Code

function定义的代码块就相当于一个类,你可以用而且它有this关键字,你可以用this为它添加属性和方法,上述代码中有以下两句:

this.newMethod1=classA;
this.newMethod1(str);

classB中定义了newMethod1变量,它是一个引用,指向了classA,并且还调用了classA,这两句代码的作用等同于直接将classA代码块中的内容直接复制到这里,这样创建的classB对像当然具有classA的属性和方法了。对象冒充还可以实现多继承,如下:

function ClassZ() {
this.newMethod = ClassX;
this.newMethod();
delete this.newMethod;

this.newMethod = ClassY;
this.newMethod();
delete this.newMethod;
}

不过,classY会覆盖classX中同名的属性和方法,如果设计没问题的话,classz也不应该继承具有相同属性和方法的不同类。

2、利用call()方法

 1 <script type="text/java script">
 2     function classA(str){
 3         this.str=str;
 4         this.printstr=function(){
 5             document.write(this.str);
 6             document.write("<br>");
 7         }
 8         this.getstr=function(){
 9             return this.str;
10         }        
11     }
12     function classB(name,str){
13     //利用call方法实现继承
14         classA.call(this,str);
15         this.name=name;
16         this.sayName=function(){
17             document.write(this.name);
18             document.write("<br>");
19         }
20         
21     }
22     var a=new classB("Amy","helloworld");
23     a.printstr();
24     alert(a.getstr());
25     a.sayName();
26 </script>
View Code

call()方法中第一个参数传递一个对象,这里的this指的是当前对象,后面的参数(可能有多个)是指传递给调用call()方法的类(函数)所需要的参数,classA.call()也是相当于直接将classA代码块中的内容直接复制到这里,classB的对象同样可以直接使用classB中的变量和方法。

3、原型链

 1 <script type="text/java script">
 2     function cA(){};
 3     cA.prototype.name="John";
 4     cA.prototype.sayName=function(){
 5         document.write(this.name);
 6         document.write("<br>");
 7     }
 8     function cB(){};
 9     cB.prototype=new cA();
10     cB.prototype.age=23;
11     cB.prototype.sayAge=function(){
12         document.write(this.age);
13         document.write("<br>");
14     }
15     var objB=new cB();
16     objB.sayAge();
17     objB.sayName();
18     document.write("is objB the instance of cA "+(objB instanceof cA));
19     document.write("<br>");
20     document.write("is objB the instance of cB "+(objB instanceof cB));
21     document.write("<br>");
22 </script>
View Code

这里对类的定义要用prototype关键字,定义function时不带有参数,prototype后面的变量或方法相当于java中被static修饰后的属性和方法,是属于所有对象的,这里有个特殊之处:cB.prototype=new cA();该句话相当于将cA对象内容复制给cB,cB还可以追加自己的属性和方法。

4、混合方法

 1 <script type="text/java script">
 2     function cA(name){
 3         this.name=name;
 4     };
 5     cA.prot
编程开发网
首页 上一页 1 2 下一页 尾页 1/2/2
】【打印繁体】【投稿】【收藏】 【推荐】【举报】【评论】 【关闭】 【返回顶部
上一篇读 Zepto 源码之集合元素查找 下一篇JavaScript DOM编程艺术(第二版..

评论

帐  号: 密码: (新用户注册)
验 证 码:
表  情:
内  容:

最新文章

热门文章

C 语言

C++基础

windows编程基础

linux编程基础

C/C++面试题目