이 기사에서는 JavaScript 상속의 특징이 무엇인지 설명합니다. js 상속 예제에 대한 설명은 특정 참고 가치가 있습니다. 도움이 필요한 친구들이 참고할 수 있기를 바랍니다.
저는 최근에 JS 객체지향을 배웠습니다. 이번 글에서는 JS 객체지향에서의 상속에 대해 주로 다루었습니다.
JS 상속의 특징:
1. 하위 클래스는 상위 클래스를 상속합니다.
2. 하위 클래스는 상위 클래스의 메서드와 속성을 사용할 수 있습니다.
3. 하위 클래스에 대한 변경 사항은 상위 클래스에 영향을 주지 않습니다. JS 상속을 설명하기 위해
이 코드는 상위 클래스와 해당 프로토타입을 생성하고 하위 클래스도 생성하고 상위 클래스의 비공개 속성을 상속합니다.
<script> //这是父类 function Father(name,age,marry){ this.name=name; this.age=age; this.marry=marry; } //父类的原型 Father.prototype.showName=function(){ alert(this.name); } //子类 function Son(name,age,marry,weight){ Father.call(this,name,age,marry); this.weight=weight; } </script>
하위 클래스 Son이 상속을 원할 때 부모 클래스, 제가 처음에 했던 작업입니다
<script> //这是父类 function Father(name,age,marry){ this.name=name; this.age=age; this.marry=marry; } //父类的原型 Father.prototype.showName=function(){ alert(this.name); } //子类 function Son(name,age,marry,weight){ Father.call(this,name,age,marry); this.weight=weight; } //错误的做法 Son.prototype=Father.prototype; Son.prototype.showAge=function(){ alert(this.age); } var father=new Father('王大锤',30,true); alert(father.showAge); </script>
작업 결과를 보면 하위 클래스의 프로토타입 변경이 상위 클래스의 프로토타입에 영향을 미치는 것을 확인할 수 있습니다. 부모 클래스는 원래 상속의 세 번째 특성을 위반하는 showAge 메서드가 없습니다.
이유 분석: 위 코드의 20번째 줄 Son.prototype=Father.prototype; 여기서 '='는 양쪽에 있는 객체이므로
Reference라는 뜻입니다. 왼쪽은 변할 것이고, 확실히 오른쪽 객체에 영향을 미칠 것입니다 이것이 바로 하위 클래스 프로토타입의 변경 사항이 상위 클래스 프로토타입에 영향을 미치는 이유입니다.
해결책
방법 1: 핵심 아이디어, 이전 문제는 '='가 문제를 일으키는 참조 관계라는 것이 아닙니다. 여기서는 '='가 항상 할당 관계라는 것이 보장됩니다. 견적이 아닙니다. 여기서는 상위 클래스 객체를 하위 클래스에 복사하는 Clone() 메서드를 정의합니다.Clone() 메서드에서 재귀를 사용하는 이유는 복사 과정에서 객체가 객체 내에 중첩될 수 있기 때문입니다.
<script> //这是父类 function Father(name,age,marry){ this.name=name; this.age=age; this.marry=marry; } //父类的原型 Father.prototype.showName=function(){ alert(this.name); } //子类 function Son(name,age,marry,weight){ Father.call(this,name,age,marry); this.weight=weight; } Son.prototype=new Clone(Father.prototype); Son.prototype.showAge=function(){ alert(this.age); } var father=new Father('王大锤',30,true); alert(father.showAge); //通过克隆对象:核心思路是保证 '=' 是赋值的关系,而不是引用,也就是保证 '=' 的右边不是对象 function Clone(obj){ for(var i=0;i<obj.length;i++){ if(typeof(obj[key]=='object')){ this.key=new Clone(obj[key]); }else{ this.key=obj[key]; } } } </script>
이때 부모 클래스 객체의 showAge 메소드는 정의되지 않았습니다
방법 2: 코드는 매우 간단하지만 생각하기 어렵고 이해하기 쉽지 않습니다. 첫 번째 방법으로. 핵심 아이디어: 객체 자체의 속성 변경은 해당 생성자의 속성 변경에 영향을 미치지 않습니다.
<script> //这是父类 function Father(name,age,marry){ this.name=name; this.age=age; this.marry=marry; } //父类的原型 Father.prototype.showName=function(){ alert(this.name); } //子类 function Son(name,age,marry,weight){ Father.call(this,name,age,marry); this.weight=weight; } function fn(){} fn.prototype=Father.prototype; Son.prototype=new fn(); Son.prototype.showAge=function(){ alert(this.age); } var father=new Father('王大锤',30,true); alert(father.showAge); //通过克隆对象:核心思路是保证 '=' 是赋值的关系,而不是引用,也就是保证 '=' 的右边不是对象 // Son.prototype=new Clone(Father.prototype); // function Clone(obj){ // for(var i=0;i<obj.length;i++){ // if(typeof(obj[key]=='object')){ // this.key=new Clone(obj[key]); // }else{ // this.key=obj[key]; // } // } // } </script>
관련 추천:
JS의 상속 방법에 대한 자세한 예js의 상속 방법은 무엇인가요? js 상속의 두 가지 방법 소개(코드 포함)위 내용은 JavaScript 상속의 특징은 무엇입니까? JS 상속의 예의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!