The little things (instances) inherited in JS's object-oriented

This chapter will introduce you to the little things (instances) of inheritance in JS object-oriented, so that you can understand what are the characteristics of inheritance in JS? Some little knowledge about inheritance in object-oriented. It has certain reference value. Friends in need can refer to it. I hope it will be helpful to you.

Characteristics of inheritance in JS:

1. Subclasses inherit parent classes;

2. Subclasses can be used Methods and properties of the parent class

3. Changes to the subclass do not affect the parent class

The following is an example to illustrate JS inheritance

This code creates a The parent class and its prototype also create a subclass and inherit the private properties of the parent class

<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>

When the subclass Son wants to inherit the prototype of the parent class, my approach is to do this at the beginning The results of the

<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>

can be found that the change in the prototype of the subclass affects the prototype of the parent class. There is no showAge method in the prototype of the parent class, which violates This is the third feature inherited from the previous one.

Analysis reason: Line 20 of the above code Son.prototype=Father.prototype; The '=' here is an object on both sides, so it means a reference. If it is a reference, the object on the left changes , will definitely affect the object on the right. That's why changes to the prototype of the subclass affect the prototype of the parent class.

Solution

Method 1: Core idea, the previous problem is not that '=' is the reference relationship that causes the problem, then here we guarantee '= ' is always an assignment relationship, not a reference. Here we define a Clone() method to copy the parent class object to the child class.

The reason why recursion is used in the Clone() method is that objects may be nested within objects during the copy process.

<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>

Method 2: The code is very simple, but it is difficult to think of and not as easy to understand as the first method. Core idea: Changes in the properties of the object itself will not affect changes in the properties of its constructor.

<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>

The above is the detailed content of The little things (instances) inherited in JS's object-oriented. For more information, please follow other related articles on the PHP Chinese website!