JavaScript 상속의 특징은 무엇입니까? JS 상속의 예
- 不言원래의
- 2018-09-15 15:25:351331검색
이 기사에서는 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>
관련 추천:
위 내용은 JavaScript 상속의 특징은 무엇입니까? JS 상속의 예의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!