>웹 프론트엔드 >JS 튜토리얼 >javascript-prototype Inheritance_prototype에 대한 좋은 기사

javascript-prototype Inheritance_prototype에 대한 좋은 기사

WBOY
WBOY원래의
2016-05-16 19:09:12952검색

1. 가장 기본적인 사용법: ClassA의 인스턴스를 ClassB에 할당합니다.
ClassB는 ClassA의 모든 속성을 상속합니다.
코드는 다음과 같습니다.


[Ctrl A 모두 선택 참고: 외부 J를 도입해야 하는 경우 실행하려면 새로 고쳐야 합니다.
]

2 . 프로토타입 상속 이론에서 생각해보면
JS의 프로토타입 상속은 프로토타입을 복사하는 것이 아니라
프로토타입을 수정하면 B의 모든 인스턴스에 변화가 발생하게 됩니다.
코드는 다음과 같습니다.

[Ctrl A 모두 선택 참고:
외부 J를 도입해야 하는 경우 실행하려면 새로 고쳐야 합니다
]

3 그러나 하위 클래스 객체 쓰기 작업은 하위 클래스 객체의 멤버에만 액세스합니다.
서로 영향을 미치지 않습니다. 따라서
쓰기는 하위 클래스에 쓰는 것이고 읽는 것은 프로토타입을 읽는 것입니다. 서브클래스에 있는 것).
[Ctrl A 모두 선택 참고:
외부 J를 도입해야 하는 경우 실행하려면 새로 고쳐야 합니다
]
4 . 각 하위 클래스 객체 둘 다 동일한 프로토타입에 대한 참조를 갖고 있으므로

[Ctrl A 모두 선택 참고:
외부 J를 도입해야 하는 경우 실행하려면 새로 고쳐야 합니다.
]5 . 하위 클래스를 생성할 때 프로토타입의 생성자는 실행되지 않습니다


[Ctrl A 모두 선택 참고:
외부 J를 도입해야 하는 경우 실행하려면 새로 고쳐야 합니다
6 다음 단계는 치명적입니다. 하위 클래스 개체의 프로토타입 멤버 개체에 액세스합니다.
<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> <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>[Ctrl A 모두 선택 참고: <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>외부 J를 도입해야 하는 경우 실행하려면 새로 고쳐야 합니다 <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>
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个

[Ctrl+A 全选 注:如需引入外部Js需刷新才能执行]

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

[Ctrl+A 全选 注:如需引入外部Js需刷新才能执行]

带参数的继承问题

[Ctrl+A 全选 注:如需引入外部Js需刷新才能执行]
성명:
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.