JavaScript 상속의 특징은 무엇입니까? JS 상속의 예

이 기사에서는 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(&#39;王大锤&#39;,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(&#39;王大锤&#39;,30,true);
        alert(father.showAge);

        //通过克隆对象:核心思路是保证 &#39;=&#39; 是赋值的关系，而不是引用，也就是保证 &#39;=&#39; 的右边不是对象
        function Clone(obj){
            for(var i=0;i<obj.length;i++){
                if(typeof(obj[key]==&#39;object&#39;)){
                    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(&#39;王大锤&#39;,30,true);
        alert(father.showAge);
        //通过克隆对象:核心思路是保证 &#39;=&#39; 是赋值的关系，而不是引用，也就是保证 &#39;=&#39; 的右边不是对象
        // Son.prototype=new Clone(Father.prototype);
        // function Clone(obj){
        //     for(var i=0;i<obj.length;i++){
        //         if(typeof(obj[key]==&#39;object&#39;)){
        //             this.key=new Clone(obj[key]);
        //         }else{
        //             this.key=obj[key];
        //         }
        //     }
        // }  
</script>

관련 추천:

JS의 상속 방법에 대한 자세한 예

js의 상속 방법은 무엇인가요? js 상속의 두 가지 방법 소개(코드 포함)

위 내용은 JavaScript 상속의 특징은 무엇입니까? JS 상속의 예의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!