javascript的prototype继承

转载 2012年03月28日 19:47:36

基本的用法 把ClassA的一个实例赋值给ClassB ClassB就继承了ClassA的所有属性

<script>
function ClassA()
{
    this.a='a';
}

function ClassB()
{
    this.b='b';
}

ClassB.prototype=new ClassA();
var objB=new ClassB();
for(var p in objB)document.write(p+"<br>");
</script>


从原型继承理论的角度去考虑 js的原型继承是引用原型 不是复制原型
所以 修改原型会导致所有B的实例的变化

<script>
function ClassA()
{
    this.a='a';
}

function ClassB()
{
    this.b='b';
}

ClassB.prototype=new ClassA();
var objB=new ClassB();
alert(objB.a);
ClassB.prototype.a='changed!!';
alert(objB.a);
</script>


然而 子类对象的写操作只访问子类对象中成员 它们之间不会互相影响
因此 写是写子类 读是读原型(如果子类中没有的话)

<script>
function ClassA()
{
    this.a='a';
}

function ClassB()
{
    this.b='b';
}

ClassB.prototype=new ClassA();
var objB1=new ClassB();
var objB2=new ClassB();
objB1.a='!!!';
alert(objB1.a);
alert(objB2.a);
</script>


每个子类对象都执有同一个原型的引用 所以子类对象中的原型成员实际是同一个

<script>
function ClassA()
{
    this.a=function(){alert();};
}

function ClassB()
{
    this.b=function(){alert();};
}

ClassB.prototype=new ClassA();
var objB1=new ClassB();
var objB2=new ClassB();
alert(objB1.a==objB2.a);
alert(objB1.b==objB2.b);
</script>



构造子类时 原型的构造函数不会被执行
<script>
function ClassA()
{
    alert("a");
    this.a=function(){alert();};
}

function ClassB()
{
    alert("b");
    this.b=function(){alert();};
}

ClassB.prototype=new ClassA();
var objB1=new ClassB();
var objB2=new ClassB();
</script>


接下来是致命的,在子类对象中访问原型的成员对象:
<script>
function ClassA()
{
    this.a=[];
}

function ClassB()
{
    this.b=function(){alert();};
}

ClassB.prototype=new ClassA();
var objB1=new ClassB();
var objB2=new ClassB();
objB1.a.push(1,2,3);
alert(objB2.a);
//所有b的实例中的a成员全都变了!!
</script>


所以 在prototype继承中 原型类中不能有成员对象! 所有成员必须是值类型数据(string也可以)

用prototype继承有执行效率高,不会浪费内存,为父类动态添置方法后子类中马上可见等的优点。

我就非常喜欢用prototype继承。

prototype继承是通过把子类的原型对象(prototype)设置成父类的一个实例来进行继承的。

只简单的这样设置继承的确如楼主所说,有不少缺点。总的来说有四个缺点:

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

  缺点二:由于父类的构造函数不是在子类进行实例化时执行,在父类的构造函数中设置的成员变量到了子类中就成了所有实例对象公有的公共变量。由于JavaScript中继承只发生在“获取”属性的值时,对于属性的值是String,Number和Boolean这些数据本身不能被修改的类型时没有什么影响。但是Array和Object类型就会有问题。
  缺点三:如果父类的构造函数需要参数,我们就没有办法了。

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


我也曾经为了这四个缺点头疼过,于是对prototype继承进行改造。
我试了几种方法,下面是我觉得最好的一种。我把它写成Function对象的一个方法,这样用的时候方便。方法如下:
//类的继承-海浪版
Function.prototype.Extends = function (parentClass)
{
  var Bs = new Function();
  Bs.prototype = parentClass.prototype;
  this.prototype = new Bs();
  this.prototype.Super = parentClass;
  this.prototype.constructor = this;
}

javascript prototype 原理 及 javascript 的 继承机制

本篇文章转载自两篇不同的文档: 1.javascript 原型函数 prototype 工作原理   2.Javascript继承机制原理   第一篇文章是理解prototype的基本原理...
  • F781492604
  • F781492604
  • 2013年06月08日 21:55
  • 920

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

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

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

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

JavaScript继承机制之prototype, __proto__, constructor

每个函数都自动具有prototype属性, 每个对象都自动有__proto__, 它们的关系就是是同一个对象. 看下面的代码: function A(){ } var a = new A(); ...
  • pgmsoul
  • pgmsoul
  • 2013年02月18日 16:05
  • 2122

JavaScript prototype原型和原型链详解

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

JS中的prototype属性实现继承

在JS中没有类的概念,继承是通过对象和对象之间实现的。其中主要是利用prototype属性来实现的。 函数中的prototype属性,又叫原型对象。构造函数可以通过prototype属性来添加函数。...
  • IstarI
  • IstarI
  • 2016年07月07日 15:15
  • 877

JavaScript中prototype用法

1 概述 大部分面向对象的编程语言,都是以类class作为对象的基础语法,js语言不是如此,它的面向对象编程基于‘原型对象’。 首先说说构造函数的缺点: js通过构造函数生成新的对象,因此构造函数可以...
  • jasonzds
  • jasonzds
  • 2016年12月17日 14:23
  • 1508

javascript prototype 、_proto_和constructor之间的关系

javascript没有父类和子类的概念,它们之间的集成是通过一种“原型链”来集成,每个function对象都有prototype属性,可以用来做内存块共享,在各个实例中共享数据。先总结几条规律1.任...
  • yingxiake
  • yingxiake
  • 2016年03月06日 17:06
  • 801

JS原型链 new 与 Object.Create()区别 代码及继承的方法

/*var F=function(){} var son=new F(); console.log(son.__proto__==F.prototype)//true*/ /* var F={a:...
  • fangchao3652
  • fangchao3652
  • 2016年01月21日 16:18
  • 4448

javascript 函数属性prototype详解

在JavaScript中并没有类的概念,但JavaScript中的确可以实现重载,多态,继承。这些实现其实方法都可以用JavaScript中的引用和变量作用域结合prototype来解释。 1、pro...
  • napoleonjk
  • napoleonjk
  • 2014年11月26日 14:54
  • 1944
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:javascript的prototype继承
举报原因:
原因补充:

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