What are the characteristics of JavaScript inheritance? Examples of js inheritance-JS Tutorial-php.cn

What are the characteristics of JavaScript inheritance? Examples of js inheritance

不言

Release： 2018-09-15 15:25:35

Original

1345 people have browsed it

This article brings you what are the characteristics of JavaScript inheritance? The explanation of js inheritance examples has certain reference value. Friends in need can refer to it. I hope it will be helpful to you.

I recently learned the object-oriented approach of JS. This article mainly discusses the things inherited in the object-oriented approach of JS.

Features of inheritance in JS:

1. Subclasses inherit parent classes;

2. Subclasses can use the methods and attributes of parent classes

3. Changes to subclasses do not affect the parent class

The following uses an example to illustrate JS inheritance

This code creates a parent class and its prototype, and also creates a Subclass, and inherits 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>

Copy after login

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>

Copy after login

can be found that changes to the prototype of the subclass affect the prototype of the parent class, and the prototype of the parent class There is no showAge method in the prototype, which violates the third characteristic of inheritance.

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

That’s why changes in 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 Well, then it is guaranteed that '=' 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 copying 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>

Copy after login

At this time, the showAge method of the parent class object is undefined

Method 2: The code is very simple, But it’s hard to imagine that it’s 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>

Copy after login

Related recommendations:

Detailed explanation of inheritance methods in JS

What are the inheritance methods in js? Introduction to two methods of js inheritance (with code)

The above is the detailed content of What are the characteristics of JavaScript inheritance? Examples of js inheritance. For more information, please follow other related articles on the PHP Chinese website!