JavaScript实现继承的方法

JavaScript中要实现继承,其实就是实现三层含义:1、子类的实例可以共享父类的方法;2、子类可以覆盖父类的方法或者扩展新的方法;3、子类和父类都是子类实例的“类型”。

JavaScript中,并不直接从语法上支持继承,但是可以通过模拟的方法来实现继承,以下是关于实现继承的几种方法的总结:1、构造继承法2、原型继承法3、实例继承法4、拷贝继承法

1、构造继承法:在子类中执行父类的构造函数。

1<SCRIPT LANGUAGE="JavaScript"> 2  <!-- 3        function dwn(s) 4        { 5                document.write(s+‘<br/>‘); 6        } 7 8        //定义一个Collection类型 9        function Collection(size)10        {11                this.size = function(){return size};  //公有方法,可以被继承12        }1314        //定义一个_Collection类型15        function _Collection(_size)16        {17                this._size = function(){return _size};  //公有方法,可以被继承18        }1920        Collection.prototype.isEmpty = function()  //静态方法,不能被继承21        {22                return this.size() == 0;23        }2425        //定义一个ArrayList类型,它“继承”Colleciton类型26        function ArrayList()27        {28                var m_elements = [];  //私有成员,不能被继承29                m_elements = Array.apply(m_elements,arguments);3031                //ArrayList类型继承Colleciton32                this.base = Collection;33                this.base.call(this,m_elements.length);3435                this.base = _Collection;                   //可以实现多态继承36                this.base.call(this,m_elements.length);    3738                this.add = function()39                {40                        return m_elements.push.apply(m_elements,arguments);        41                }4243                this.toArray = function()44                {45                        return m_elements;46                }47        }4849        ArrayList.prototype.toString = function()50        {51                return this.toArray().toString();52        }5354        //定义一个SortedList类型,它继承ArrayList类型55        function SortedList()56        {57                //SortedList类型继承ArrayList58                this.base = ArrayList;59                this.base.apply(this,arguments);6061                this.sort = function()62                {63                        var arr = this.toArray();64                        arr.sort.apply(arr,arguments);65                }66        }6768        //构造一个ArrayList69        var a = new ArrayList(1,2,3);70        dwn(a);          //1,2,371        dwn(a.size());   //3 a从Collection继承了size()方法72        dwn(a.isEmpty);  //undefined 但是a没有继承到isEmpty()方法7374        dwn(a._size());  //3 可以实现多态继承7576        //构造一个SortedList77        var b = new SortedList(3,1,2);78        dwn(b.toArray());79        b.add(4,0);    //b 从ArrayList继承了add()方法80        dwn(b.toArray());  //b从ArrayList继承了toArray()方法81        b.sort();      //b自己实现sort()方法82        dwn(b.toArray());83        dwn(b);84        dwn(b.size());   //b从Collection继承了size()方法85  //-->86  </SCRIPT>

2、原型继承法:JavaScript是一种基于原型的语言。要了解什么是“原型继承法”,先了解一下prototype的特性:prototype的最大特性是能够让对象实例共享原型对象的属性,因此如果把某个对象作为一个类型的原型,那么我们说这个类型的所有实例都一这个对象为原型。这个时候,实际上这个对象的类型也可以作为那些以这个对象为原型的实例的类型。假如:Point类的对象作为Point2D类型的原型(Point2D.prototype = new Point(2)),那么说Point2D的所有实例都是以Point类的对象为原型。此时,实际上Point类就可以作为Point2D类型的对象的类型(相当于Point2D类型“继承”了Point类型)。见例:

1  <SCRIPT LANGUAGE="JavaScript"> 2  <!-- 3        function dwn(s) 4        { 5                document.write(s+"<br/>"); 6        } 7 8        function Point(dimension)  //定义一个Point类 9        {10                this.dimension = dimension;11        }1213        Point.prototype.distance = function() //静态方法,可以被继承14        {15                return this.dimension*2;16        }1718        function Point2D(x,y)    //定义一个Point2D类19        {20                this.x = x;21                this.y = y;22        }2324        Point2D.prototype = new Point(2);   //运行“原型继承法”使Point2D继承Point2526        function Point3D(x,y,z)   //定义Point3D类27        {28                this.x = x;29                this.y = y;30                this.z = z;31        }3233        Point3D.prototype = new Point(3);   //Point3D继承Point类3435        var p2 = new Point2D(1,2);  //构造一个Point2D对象3637        var p3 = new Point3D(1,2,3); //构造一个Point3D对象3839        dwn(p2.dimension);            //240        dwn(p3.dimension);            //341        dwn(p2.distance());           //4 可以继承静态方法42        dwn(p3.distance());           //6 可以继承静态方法4344        dwn(p2 instanceof Point2D);   //p2是Point2D对象45        dwn(p2 instanceof Point);     //Point2D继承Point,p2是Point对象4647        dwn(p3 instanceof Point3D);   //p3是Point3D对象48        dwn(p3 instanceof Point);     //Point3D继承Point,p3是Point对象4950  //-->51  </SCRIPT>

3、实例继承法   构造继承法和原型继承法各有各的缺点,如:   构造继承法没有办法继承类型的静态方法,因此它无法很好的继承JavaScript的核心对象。   原型继承法虽然可以继承静态方法,但是依然无法很好地继承核心对象中的不可枚举方法。   其中,javascript核心对象包括:     Array  表述数组。     Boolean  表述布尔值。     Date  表述日期。     Function  指定了一个可编译为函数的字符串 JavaScript 代码。     Math  提供了基本的数学常量和函数;如其 PI 属性包含了π的值。     Number  表述实数数值。     Object  包含了由所有 JavaScript 对象共享的基本功能。     RegExp  表述了一个正则表达式;同时包含了由所有正则表达式对象的共享的静态属性。     String  表述了一个 JavaScript 字符串。  (1)构造继承法的局限性:

1  <SCRIPT LANGUAGE="JavaScript"> 2  <!-- 3        function MyDate() 4        { 5                this.base = Date; 6                this.base.apply(this,arguments); 7        } 8 9        var date = new MyDate();10        alert(date.toGMTSring());   //对象不支持此方法或属性11        //核心对象(Date)的某些方法不能被构造继承,原因是核心对象并不像我们自定义的一般对象那样在构造函数里进行赋值或初始化操作。12  //--> 

(2)原型继承的局限性

1  <SCRIPT LANGUAGE="JavaScript"> 2  <!-- 3        function MyDate() 4        { 5 6        } 7        MyDate.prototype = new Date(); 8        var date = new MyDate(); 9        alert(date.toGMTSring());    //‘[object]不是日期对象‘10  //-->11  </SCRIPT>

以上说明了“构造继承法”和“原型继承法”的局限性(局限之一:不能很好的继承核心对象),下面介绍如何用实例继承法来继承核心对象。

在介绍之前首先了解以下关于构造函数:构造函数通常没有返回值,它们只是初始化由this值传递进来的对象,并且什么也不返回。如果函数有返回值,被返回的对象就成了new表达式的值。

1  <SCRIPT LANGUAGE="JavaScript"> 2  <!-- 3        function dwn(s) 4        { 5                document.write(s+‘<br/>‘); 6        } 7        function MyDate() 8        { 9                var instance = new Date();   //instance是一个新创建的日期对象10                instance.printDate = function()  //对日期对象instance扩展printDate()方法11                {12                        dwn(instance.toLocaleString());13                }14                return instance;   //将instance作为构造函数的返回值返回15        }1617        var date = new MyDate();18        dwn(date.toGMTString());19        date.printDate();    20        dwn(date instanceof MyDate);  //false21        dwn(date instanceof Date);    //true22        //对象的构造函数将会是实际构造的对象的构造函数(new Date()),而不是类型本身的构造函数(new MyDate())23  //-->24  </SCRIPT>

4、拷贝继承法

拷贝继承法是通过对象属性的拷贝来实现继承。

1  <script language="JavaScript"> 2        function Point(dimension) 3        { 4                this.dimension = dimension; 5        } 6 7        var Point2D = function(x,y) 8        { 9                this.x = x;10                this.y = y;11        }1213    Point2D.extend = function()14        {15            var p = new Point(2);16            for(var each in p)   //将对象的属性进行一对一的复制。17            {18                 //this[each] = p[each];19                 this.prototype[each] = p[each];20            }21        }22    Point2D.extend();23        //alert(Point2D.dimension);24        alert(Point2D.prototype.dimension);25  </script>
时间: 2024-07-31 02:29:21

JavaScript实现继承的方法的相关文章

JavaScript对象继承的方法

写这个话题单纯是给自己做笔记了,不然老忘记. 第一种方法:     function fn1(x) {         this.x = x;     }     function fn2(x, y) {         this.tmpObj = fn1;         this.tmpObj(x);         delete this.tmpObj;         this.y = y;     } 第二种方法:call()或apply()     function fn1(x) {

JavaScript中继承的实现方法--详解

最近看<JavaScript王者归来>中关于实现继承的方法,做了一些小总结: JavaScript中要实现继承,其实就是实现三层含义:1.子类的实例可以共享父类的方法:2.子类可以覆盖父类的方法或者扩展新的方法:3.子类和父类都是子类实例的“类型”. JavaScript中,并不直接从语法上支持继承,但是可以通过模拟的方法来实现继承,以下是关于实现继承的几种方法的总结:1.构造继承法2.原型继承法3.实例继承法4.拷贝继承法 1.构造继承法:在子类中执行父类的构造函数. 1<SCRIPT

javascript 继承实现方法

1. [代码][JavaScript]代码     //1.对象冒充//说明:构造函数使用this关键字给所有属性和方法赋值(即采用类声明的构造函数方式).因为构造函数只是一个函数,所以可使ClassA的构造函数成为ClassB的方法,然后调用它.ClassB就会收到ClassA的构造函数中定义的属性和方法.function ClassA(sColor) {this.color = sColor;this.showColor = function() {alert(this.color);};}

JavaScript中继承的主要方法

1. 原型链继承 子类使用基类对象重写prototype function SuperType(){ this.property = true; } SuperType.prototype.getSuperValue = function(){ return this.property; }; function SubType(){ this.subproperty = false; } //inherit from SuperType SubType.prototype = new Super

javascript类继承

function extend(subClass, superClass) { var f = function() {}; f.prototype = superClass.prototype; subClass.prototype = new f(); subClass.superClass = superClass.prototype; } var parent = function (name, age) { this._name = name; this._age = age; };

【转载】Javascript原型继承-学习笔记

阮一峰这篇文章写的很好 http://www.ruanyifeng.com/blog/2011/06/designing_ideas_of_inheritance_mechanism_in_javascript.html 笔记如下: 一直很难理解Javascript语言的继承机制. 它没有"子类"和"父类"的概念,也没有"类"(class)和"实例"(instance)的区分,全靠一种很奇特的"原型链"(p

javascript深度克隆与javascript的继承实现

1.javascript深度克隆: //注意这里的对象包括object和array function cloneObject(obj){ var o = obj.constructor === Array ? [] : {}; for(var key in obj){ if(obj.hasOwnProperty(key)){ o[key] = typeof obj[key] === "object" ? cloneObject(obj[key]) : obj[key]; } } ret

JavaScript原型继承的陷阱

JavaScript原型继承的陷阱 JavaScript默认采用原型继承.虽然没有类(class)的概念,它的函数(function)可以充当构造器(constructor).构造器结合this,new可以构建出类似Java的类.因此,JavaScript通过扩展自身能模拟类式(class-based)继承. JavaScript和其它面向对象语言一样,对象类型采用引用方式.持有对象的变量只是一个地址,而基本类型数据是值.当原型上存储对象时,就可能有一些陷阱. 先看第一个例子 var creat

浅话javascript的继承

javascript的继承和java或C#的继承是不一样的,后者是基于类的继承,而javascript是通过原型来继承的.所以,先得理一理原型是个什么鬼. 当一个函数对象被创建时,Function构造器产生的函数对象会运行类似这样一些代码:this.prototype={constructor:this},新对象被赋予prototype这样一个属性,它的值是一个包含constructor属性的对象.可以看出,这个constructor指向新对象本身.prototype属性指向的对象自然不会只有c