Javascript의 상속 메커니즘 코드 예제에 대한 자세한 설명

JavaScript의 inheritance는 많은 책에서 신중하게 여러 유형과 구현 방법으로 나누어져 있습니다. 일반적으로 objectimpersonation 방법과 프로토타입 방법의 두 가지 유형이 있습니다. 이 두 가지 방법에는 각각의 장점과 단점이 있습니다. 먼저 여기에 나열한 다음 하위 수준에서 차이점을 분석하겠습니다. Javascript 클래스 및 객체 생성을 배운 후 이제 Javascript 상속 메커니즘의 구현을 요약하겠습니다. Javascript에는 Java와 같이 상속 메커니즘에 대한 엄격하고 명확한 정의가 없습니다. 상속 메커니즘의 구현을 "모방"하기 위해 자신만의 메소드를 설계할 수 있습니다. 여러 가지 방법이 있습니다:

1. 객체 가장

 <script type="text/javascript">
   function classA(str){
     this.str=str;
     this.printstr=function(){
       document.write(this.str);
       document.write("<br>");
     }
     this.getstr=function(){
       return this.str;
     }    
   }
   function classB(name,str){
     //下面这两句代码相当于将classA代码体中的内容搬到这里
     this.newMethod1=classA;
     this.newMethod1(str);
     //注意，这里的写法
     delete this.newMethod1;
     //新的方法和属性的定义须在删除了newMethod之后定义，因为可能覆盖超类的属性和方法。
     this.name=name;
     this.sayName=function(){
       document.write(this.name);
       document.write("<br>");
     }
     
   }
   var a=new classB("Amy","helloworld");
   a.printstr();
   alert(a.getstr());
   a.sayName();
 </script>

함수로 정의된 코드 블록은 클래스와 동일하며 이 키워드를 사용하여 속성과 메서드를 추가할 수 있습니다. 위 코드에는 다음 두 문장이 있습니다. newMethod1 변수는

this.newMethod1=classA;
 this.newMethod1(str);

classB에 정의되어 있습니다. 이는 classA를 가리키고 classA를 호출하는

reference

입니다. 이 두 문장의 코드는 직접 복사하는 것과 같습니다. 이 시점에서 이런 방식으로 생성된 classB 객체는 당연히 classA의 속성과 메서드를 갖습니다. 객체 가장은 다음과 같이 다중 상속을 구현할 수도 있습니다.

function ClassZ() {
 this.newMethod = ClassX;
 this.newMethod();
 delete this.newMethod;

this.newMethod = ClassY;
 this.newMethod();
 delete this.newMethod;
}

그러나 classY는 classX에서 동일한 이름의 속성과 메서드를 재정의합니다. 디자인에 문제가 없다면 classz는 동일한 속성을 가진 다른 클래스를 상속해서는 안 됩니다. 행동 양식. 2. c

all

() 메소드

 <script type="text/javascript">
   function classA(str){
     this.str=str;
     this.printstr=function(){
       document.write(this.str);
       document.write("<br>");
     }
     this.getstr=function(){
       return this.str;
     }    
   }
   function classB(name,str){
   //利用call方法实现继承
     classA.call(this,str);
     this.name=name;
     this.sayName=function(){
       document.write(this.name);
       document.write("<br>");
     }
     
   }
   var a=new classB("Amy","helloworld");
   a.printstr();
   alert(a.getstr());
   a.sayName();
 </script>

call() 메소드를 사용하여 객체를 첫 번째 매개변수로 전달합니다. 여기서는 현재 객체를 나타내며 다음 매개변수(여러 개가 있을 수 있음)를 참조합니다. call() 메소드의 클래스(function)를 호출하는 데 필요한 매개변수는 여기서 classA 코드 블록의 내용을 직접 복사하는 것과 동일합니다. 방법.

3. 프로토타입 체인

 <script type="text/javascript">
   function cA(){};
   cA.prototype.name="John";
   cA.prototype.sayName=function(){
     document.write(this.name);
     document.write("<br>");
   }
   function cB(){};
   cB.prototype=new cA();
   cB.prototype.age=23;
   cB.prototype.sayAge=function(){
     document.write(this.age);
     document.write("<br>");
   }
   var objB=new cB();
   objB.sayAge();
   objB.sayName();
   document.write("is objB the instance of cA "+(objB instanceof cA));
   document.write("<br>");
   document.write("is objB the instance of cB "+(objB instanceof cB));
   document.write("<br>");
 </script>

여기서는 프로토타입 키워드를 사용하여 함수를 정의할 때 매개변수가 없습니다. 프로토타입 이후의 변수나 메소드는 Java에서

static

로 수정된 속성 및 메소드와 동일합니다. is 모든 개체에 속하며 여기에는 특별한 기능이 있습니다: cB.prototype=new cA(); 이 문장은 cA 개체의 내용을 cB에 복사하는 것과 동일하며 cB는 자체 속성과 메서드를 추가할 수도 있습니다.

4. 혼합 방법

 <script type="text/javascript">
   function cA(name){
     this.name=name;
   };
   cA.prototype.sayName=function(){
     document.write(this.name);
     document.write("<br>");
   }
   function cB(name,age){
     cA.call(this,name);
     this.age=age;
   };
   cB.prototype=new cA();
   cB.prototype.sayAge=function(){
     document.write(this.age);
     document.write("<br>");
   }
   var objB=new cB("Alan",27);
   objB.sayName();
   objB.sayAge();
   document.write("is objB the instance of cA "+(objB instanceof cA));
   document.write("<br>");
   document.write("is objB the instance of cB "+(objB instanceof cB));
   document.write("<br>");
 </script>

여기서는 클래스 본문에 속성을 캡슐화할 수 있으며, 프로토타입을 사용하여 메서드를 정의하는 것이 개인적으로 프로토타입을 사용하여 정의된 함수를 여러 객체에 재사용할 수 있는 좋은 디자인 방법이라고 생각합니다. 여기서 두 가지 점에 유의해야 합니다. 동시에 cB 클래스 본문에 cA.call(this,name)이 있고 cB 프로토타입이 cB 개체에 할당되어야 합니다. 즉, cB.prototype=new cA입니다. (); cA.call(this,name)도 동일합니다. 여기에 cA 클래스 블록의 코드를 복사하고 다음 문장에서 cA의 메서드를 cB에 추가합니다. 동시에 cB는 자체 속성을 추가할 수도 있습니다. 행동 양식.

위 내용은 Javascript의 상속 메커니즘 코드 예제에 대한 자세한 설명의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!