不错的一篇关于javascript-prototype继承

时间:2024-04-23 09:15:42 

1.最基本的用法 把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+"");  </script>



2.从原型继承理论的角度去考虑, 
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>



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

<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>



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

<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>



5.构造子类时 原型的构造函数不会被执行

<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>



6.接下来是致命的,在子类对象中访问原型的成员对象:

<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>



7.所以 在prototype继承中 原型类中不能有成员对象! 所有成员必须是值类型数据(string也可以)
用prototype继承有执行效率高,不会浪费内存,为父类动态添置方法后子类中马上可见等的优点。

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

9.prototype继承也有四个比较明显的缺点:
缺点一:父类的构造函数不是像JAVA中那样在给子类进行实例化时执行的,而是在设置继承的时候执行的,并且只执行一次。这往往不是我们希望的,特别是父类的构造函数中有一些特殊操作的情况下。
缺点二:由于父类的构造函数不是在子类进行实例化时执行,在父类的构造函数中设置的成员变量到了子类中就成了所有实例对象公有的公共变量。由于JavaScript中继承只发生在“获取”属性的值时,对于属性的值是String,Number和Boolean这些数据本身不能被修改的类型时没有什么影响。但是Array和Object类型就会有问题。
缺点三:如果父类的构造函数需要参数,我们就没有办法了。
缺点四:子类原本的原型对象被替换了,子类本身的constructor属性就没有了。在类的实例取它的constructor属性时,取得的是从父类中继承的constructor属性,从而constructor的值是父类而不是子类。

10.可以针对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;
}

希望各位 js 高手能把更好的方式介绍给大家
针对第3,6个

<script> function ClassA() {     this.a=[]     this.aa=100; } function ClassB() {     this.b=function(){return "classbb"}; } ClassB.prototype=new ClassA(); var objB1=new ClassB(); var objB2=new ClassB(); objB1.a.push(1,2,3); objB1.aa=10100 alert(objB2.a); alert(objB2.aa); </script>



针对继承,
Array.prototype 就不能继承 ClassA,ClassB

<script>  function ClassA()  {      this.a=[]      this.aa=100;  }  function ClassB()  {      this.b=function(){return "classbb"};  }  ClassB.prototype=new ClassA();  Array.prototype= new ClassB();  var _array= new Array()  alert(_array.b())  </script>



带参数的继承问题

<div id="a">aaa</div>  <script>  function ClassB()  {      this.b=function(){return "classbb"};  }  function ClassC(R){   el=document.getElementById(R)  return el  }  ClassB.prototype=new ClassC()  var st=new ClassB()  alert(st("a").innerHTML)  </script>


标签:不错的一篇关于javascript-prototype继承
0
投稿

猜你喜欢

  • Pytorch可视化之Visdom使用实例

    2021-01-05 12:16:13
  • Python中使用多进程来实现并行处理的方法小结

    2023-10-23 14:21:38
  • 关于Vue的异步组件

    2024-05-09 10:52:35
  • sp_executesql 使用复杂的Unicode 表达式错误的解决方法

    2012-01-29 17:58:52
  • JS清空上传控件input(type="file")的值的代码第1/2页

    2023-08-13 07:22:28
  • 详解vue3.0 的 Composition API 的一种使用方法

    2024-04-28 09:23:48
  • 使用Pycharm分段执行代码

    2021-09-04 13:24:14
  • python打造爬虫代理池过程解析

    2021-10-14 23:43:44
  • Pycharm更换python解释器的方法

    2023-03-23 10:02:58
  • python使用imap-tools模块下载邮件附件的示例

    2023-09-16 08:39:38
  • 编写python代码实现简单抽奖器

    2023-04-07 12:32:48
  • python基础教程之面向对象的一些概念

    2022-12-01 09:51:52
  • python登陆asp网站页面的实现代码

    2021-01-20 00:03:31
  • 在JavaScript中对HTML进行反转义详解

    2024-05-02 16:21:19
  • 详解Python对某地区二手房房价数据分析

    2022-04-07 04:47:30
  • springBoot下实现java自动创建数据库表

    2024-01-24 12:26:31
  • 详解让Python性能起飞的15个技巧

    2023-10-13 18:12:27
  • yolov5模型配置yaml文件详细讲解

    2022-02-04 07:21:30
  • scrapy实践之翻页爬取的实现

    2023-09-25 23:09:26
  • 一种弹出提示信息时页面背景色调改变的方法

    2008-12-01 12:22:00
  • asp之家 网络编程 m.aspxhome.com