Javascript继承机制的实现

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

1、对象冒充

 1 <script type="text/javascript">
 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>

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/javascript">
 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>

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

3、原型链

 1 <script type="text/javascript">
 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>

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

4、混合方法

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

这里可以将属性封装在类体内,而方法利用原型方式定义,个人感觉,这是一个很好的设计方法,利用prototype定义的函数可以为多个对象重用,这里需要注意两点:cB类体内有cA.call(this,name);同时还要将cB原型赋为cB对象,即:cB.prototype=new cA();cA.call(this,name)同样相当于将cA类块内的代码复制于此,后面一句话又将cA的方法添加给cB,同时cB还可以追加自己的属性和方法。

以上是本次对Javascript继承机制的总结,不足之处望各位指正批评。

时间: 2024-12-08 06:17:43

Javascript继承机制的实现的相关文章

重温Javascript继承机制

原文:http://mozilla.com.cn/post/21667/ =========================== 上段时间,团队内部有过好几次给力的分享,这里对西风师傅分享的继承机制稍作整理一下,适当加了些口语化的描述,留作备案. 一.讲个故事吧 澄清在先,Java和Javascript是雷锋和雷峰塔的关系.Javascript原名Mocha,当时还叫做LiveScript,创造者是Brendan Eich,现任Mozilla公司首席技术官. 1994年,历史上第一个比较成熟的网

【JavaScript】重温Javascript继承机制

上段时间,团队内部有过好几次给力的分享,这里对西风师傅分享的继承机制稍作整理一下,适当加了些口语化的描述,留作备案. 一.讲个故事吧 澄清在先,Java和Javascript是雷锋和雷峰塔的关系.Javascript原名Mocha,当时还叫做LiveScript,创造者是Brendan Eich,现任Mozilla公司首席技术官. 1994年,历史上第一个比较成熟的网络浏览器——Navigator0.9版诞生在网景公司(Netscape),极为轰动.但是,Navigator0.9只能用来浏览,不

Javascript继承机制的设计思想

转自:http://www.ruanyifeng.com/blog/2011/06/designing_ideas_of_inheritance_mechanism_in_javascript.html 我一直很难理解Javascript语言的继承机制. 它没有"子类"和"父类"的概念,也没有"类"(class)和"实例"(instance)的区分,全靠一种很奇特的"原型链"(prototype chain

javascript继承机制 &amp; call apply使用说明

一.继承机制 1.对象冒充:构造函数使用 this 关键字给所有属性和方法赋值,可使 ClassA 构造函数成为 ClassB 的方法,然后调用它. function ClassZ() { this.newMethod = ClassX; this.newMethod(); delete this.newMethod; this.newMethod = ClassY; this.newMethod(); delete this.newMethod; } 这里存在一个弊端,如果存在两个类 Clas

javascript 继承机制设计思想

作者: 阮一峰 原文链接:http://www.ruanyifeng.com/blog/2011/06/designing_ideas_of_inheritance_mechanism_in_javascript.html 我一直很难理解Javascript语言的继承机制. 它没有"子类"和"父类"的概念,也没有"类"(class)和"实例"(instance)的区分,全靠一种很奇特的"原型链"(proto

javascript 继承(转)

javascript继承一直不好理解,每次遇到了看了似乎懂了,但是没有彻底研究过而且遇到一次忘记一次,这次想彻底的解决掉,用最简单直白的阐述.引入了前辈的一些看法,进行了收集加工整理. 用百度脑图做了整理 一,javascript中继承的由来 1-1.javascript的出现 javascript出现是为了增强用户和浏览器之间的交互.比如,如果网页上有一栏"用户名"要求填写,浏览器就无法判断访问者是否真的填写了,只有让服务器端判断.如果没有填写,服务器端就返回错误,要求用户重新填写,

javascipt继承机制(from阮一峰)

Javascript继承机制的设计思想 我一直很难理解Javascript语言的继承机制. 它没有"子类"和"父类"的概念,也没有"类"(class)和"实例"(instance)的区分,全靠一种很奇特的"原型链"(prototype chain)模式,来实现继承. 我花了很多时间,学习这个部分,还做了很多笔记.但是都属于强行记忆,无法从根本上理解. 直到昨天,我读到法国程序员Vjeux的解释,才恍然大悟,

27、理解js的继承机制(转载自阮一峰)

Javascript继承机制的设计思想 作者: 阮一峰 日期: 2011年6月 5日 我一直很难理解Javascript语言的继承机制. 它没有"子类"和"父类"的概念,也没有"类"(class)和"实例"(instance)的区分,全靠一种很奇特的"原型链"(prototype chain)模式,来实现继承. 我花了很多时间,学习这个部分,还做了很多笔记.但是都属于强行记忆,无法从根本上理解. 直到昨天,

javascript 之 prototype继承机制

理解Javascript语言的继承机制 javascript没有"子类"和"父类"的概念,也没有"类"(class)和"实例"(instance)的区分,全靠一种很奇特的"原型链"(prototype chain)模式,来实现继承. 1.引言 1994年,网景公司急需一种网页脚本语言,使得浏览器可以与网页互动.工程师Brendan Eich 负责开发这种新语言.他觉得,没必要设计得很复杂,这种语言只要能够完