完美原型prototype类的继承方法

原创 2014年06月03日 13:57:05
JavaScript中的面向对象的设计大家用的非常多了,我在进行类的继承应用时发现了一些问题。
看下面代码:
function ClassA()
{
  this.abc = 7678;
  this.def = [1,88,66];
  alert("执行了 ClassA 的构造函数");
}


ClassA.prototype.getABC = function ()
{
  alert(this.abc);
}


function ClassB()
{
  this.xyz = 5252;
}


ClassB.prototype = new ClassA();


ClassB.prototype.getDEF = function ()
{
  alert(this.def);
}


var x = new ClassB();
x.getABC();
var y = new ClassB();
y.getDEF();

这是一个比较常见继承方法,它是通过把子类的原型对象(prototype)设置成父类的一个实例来进行继承的。
但是只简单的这样设置继承有四个缺点:


  缺点一:执行上面代码会发现父类的构造函数不是像JAVA中那样在给子类进行实例化时执行的,而是在设置继承的时候执行的,并且只执行一次。这往往不是我们希望的,特别是父类的构造函数中有一些特殊操作的情况下。


  缺点二:由于父类的构造函数不是在子类进行实例化时执行,在父类的构造函数中设置的成员变量到了子类中就成了所有实例对象公有的公共变量。由于JavaScript中继承只发生在“获取”属性的值时,对于属性的值是String,Number和Boolean这些数据本身不能被修改的类型时没有什么影响。但是Array和Object类型就会有问题。如在上面代码之后加入:
x.def[1] = 100;
alert(x.def[1]);
alert(y.def[1]);
这里我们只改了x.def的值,而y.def也一起改变了。


  缺点三:如果父类的构造函数需要参数,我们就没有办法了。


  缺点四:子类原本的原型对象被替换了,子类本身的constructor属性就没有了。在类的实例取它的constructor属性时,取得的是从父类中继承的constructor属性,从而constructor的值是父类而不是子类。


为了解决这四个缺点,我试了几种方法,下面是我觉得最好的一种。方法如下:

function Class(nd)
{
	var fu = nd.constructor;
	if(typeof(nd.extend)==="function")		//Class的继承
	{
		var Bs = new Function();
		Bs.prototype = nd.extend.prototype;
		fu.prototype = new Bs();
		fu.prototype.Super = nd.extend;
		fu.prototype.constructor = fu;		//constructor是非壮举属性,只能这样设置
		delete nd.extend;
	}
	for(var name in nd)						//为Class添置方法
	{
		var t = name.indexOf("static_")==0;
		var obj = t?fu:fu.prototype;
		obj[t?name.replace("static_",""):name] = nd[name];
	}
	return fu;
}
//========================


var ClassA = Class({constructor: function()
	{
		this.abc = 123;
		this.def = [1,88,66];
	}
	,
	getAbc: function ()
	{
		alert(this.abc);
	}
	,
	abcAdd: function (s)
	{
		return (s+this.abc);
	}
	,
	static_aaa: 123456//这是一个静态变量
	,
	static_ppp: function ()//这是一个静态方法
	{
		alert("static Method "+this.aaa);
	}
});


var ClassB = Class({extend: ClassA, constructor: function()
	{
		this.Super();
		this.xyz = 5252;
	}
	,
	getDEF: function ()
	{
		alert(this.def);
	}
	,
	abcAdd: function ()//重载abcAdd方法
	{
		return (1+this.abc);
	}
});


ClassA.ppp();


var x = new ClassB();
x.getAbc();
var y = new ClassB();
y.getDEF();
x.def[1] = 100;
alert(x.def[1]);
alert(y.def[1]);


版权声明:本文为博主原创文章,未经博主允许不得转载。

js中利用prototype给类添加方法

1.如何定义一个简单的类? 以下是一个没有任何属性和方法的类的定义:function MyClass(){};你可能会想,这不就是个简单的函数声明?没错,这个函数就是一个类的定义的实现。如何使用这个...
  • github_26672553
  • github_26672553
  • 2016年04月29日 10:54
  • 5131

js中的prototype和基于prototype的继承总结

与其他编译语言的继承相比,javascript也有一套继承实现方式,即使用prototype原型及其链的方式。1、我们先用一个简单的例子先理解原型链, (http://img.blog.csdn.n...
  • houyaowei
  • houyaowei
  • 2016年05月18日 15:00
  • 193

js:深入prototype(下:原型重写)

//当属性和方法特别多时,编写起来不是很方便,可以通过json的格式来编写 //由于原型重写,而且没有通过Person.prototype来指定,此时的constructor不会再指向Person而是...
  • Magneto7
  • Magneto7
  • 2014年05月03日 16:02
  • 2568

JS原型继承和类式继承

类式继承(构造函数) JS中其实是没有类的概念的,所谓的类也是模拟出来的。特别是当我们是用new 关键字的时候,就使得“类”的概念就越像其他语言中的类了。类式继承是在函数对象内调用父类的构造函数,使...
  • liuqiao1123
  • liuqiao1123
  • 2016年05月06日 11:26
  • 3690

JavaScript原型的工作原理(以及如何利用它来实现类的继承)

在上一篇文章里,我们以及详细分析过构造函数,还有怎样将其变成面向对象语言里的类。但是JavaScript不是基于类的编程语言,它是基于原型的编程语言。这到底是什么意思呢?简单来说,JavaScript...
  • zlxadhkust
  • zlxadhkust
  • 2014年04月27日 17:41
  • 1171

实现javaScript对象的"继承"的两种方法(prototype与闭包)

实现javaScript对象的"继承"的两种方法(prototype与闭包)
  • canot
  • canot
  • 2016年02月28日 16:13
  • 1285

封装--javascript的原型(prototype)

这里介绍一种基于组合的对象定义为了解决原型所带来的问题,需要通过组合构造函数和原型来实现对象的创建:将属性在构造函数中定义,将方法在原型中定义。这样有效结合了基于原型链和构造函数来定义对象的有点,是目...
  • Yana_li
  • Yana_li
  • 2016年10月10日 20:27
  • 542

js继承,各种继承的优缺点(原型链继承,组合继承,寄生组合继承)

javascript继承方式,以及各种继承的优缺点(原型链继承,组合继承,寄生组合继承)...
  • xuqinggangsls
  • xuqinggangsls
  • 2016年05月24日 15:09
  • 3725

JavaScript prototype原型和原型链详解

用过JavaScript的同学们肯定都对prototype如雷贯耳,但是这究竟是个什么东西却让初学者莫衷一是,只知道函数都会有一个prototype属性,可以为其添加函数供实例访问,其它的就不清楚了,...
  • i10630226
  • i10630226
  • 2015年10月21日 14:25
  • 1462

自定义对象、prototype原型属性

一、自定义对象 1、在javascript没有类的概念,只要有函数即可创建对象。2、自定义对象的格式: 方式1: 使用无参的函数创建对象。 方式2:使用带参的函数创建对象。this表示当前对象。...
  • qq_34944851
  • qq_34944851
  • 2016年11月08日 13:35
  • 432
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:完美原型prototype类的继承方法
举报原因:
原因补充:

(最多只允许输入30个字)