继承、原型链继承、拷贝继承

红太狼 2022-01-30 11:19 266阅读 0赞

#  0.为什么要使用继承 #

方法可能功能相似，但是不是同一个方法(没有指向同一块内存，会造成内存浪费)

<!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <meta http-equiv="X-UA-Compatible" content="ie=edge">
        <title>Document</title>
    </head>
    <body>
        
    </body>
    <script>
        function Person(name,age){
            this.name=name;
            this.age=age;
            this.say=function(){}
        }
        var p1=new Person();
        var p2=new Person();
        
        //p1对象和p2对象的say方法是否是同一个方法：false
        console.log(p1.say===p2.say);
    
        //由于say方法可能功能相似，但是不是同一个方法(没有指向同一块内存，会造成内存浪费)
        //解决方案：把say方法写在他们共同的(父对象)中
        //其实他们共同的父对象，就可以通过：Person.prototype来获取
    
        //-->只要把say方法写在Person.prototype中，那么say方法就是同一个方法
        Person.prototype.run=function(){
            console.log('时速500KM');
        }
        //此时p1和p2都可以访问到run方法
        p1.run();
        p2.run();
        //验证p1.run和p2.run是否是同一个方法？
        console.log(p1.run == p2.run); //指向同一个方法，这种方法避免了内存的浪费
        
        console.log(p1.run == Person.prototype.run);
        //true
    
        var p3=new Person();
        console.log(p3.run == p1.run); //true
        console.log(p3.run === p1.run);//true
        //结论：只要往某个构造函数的prototype对象中添加某个属性、方法，那么这样的属性、方法都可以被所有的构造函数的实例所共享
        //==>这里的【构造函数的prototype对象】称之为原型对象
        //  Person.prototype是 p1 p2 p3 的原型对象
        //  Person.prototype是Person构造函数的【实例】的原型对象
    
        //猜猜看？
        //  Person的原型对象是谁呢？
        //  -->首先要知道Person的构造函数：-->Function
        //  -->所以Person的原型对象是：Function.prototype
    
        //  p1的原型对象是谁呢？
        //  -->首先要知道p1是谁创建的？    -->Person
        //  -->所以p1的原型对象时：     Person.prototype
    
    </script>
    </html>

##  0.1继承方法实现1 ##

##  0.2继承方法实现2 ##

<!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <meta http-equiv="X-UA-Compatible" content="ie=edge">
        <title>Document</title>
    </head>
    <body>
        
    </body>
    <script>
        function Cat(name){
            this.name=name;
        }
        var tom=new Cat("汤姆");
        //目的：把say方法放在tom的原型对象中(Cat.prototype)
        Cat.prototype.say=function(){}
    
        //问题：
        Cat.prototype.s1=function(){}
        Cat.prototype.s2=function(){}
        Cat.prototype.s3=function(){}
        Cat.prototype.s4=function(){}
        Cat.prototype.s5=function(){}
        //通过上面的方式，给tom的原型对象添加了好多方法，也就是让tom拥有了好多方法，但是代码产生了不少的冗余(重复)
    
        //-->为了减少这种重复，改良版：
        Cat.prototype = {
            a1:function(){},
            a2:function(){},
            a3:function(){},
            a4:function(){},
            a5:function(){}
        }
        console.log(tom.s1);    //可以访问
        console.log(tom.a1);    //undefined
        //原因：tom对象在创建的时候已经有了一个确定的原型对象，就是旧的Cat.prototype
        //由于Cat.prototype后面被重新赋值，但是tom对象的原型对象却没有改变，所以tom对象并不能访问到新原型对象中的a1-a5方法
    
        //如何解决这个问题？
        //-->先改变原型、再创建对象
    
    
    
    
    
    
        
        //继承的第一种实现方式：原型链继承
    </script>
    </html>

# 1.原型链继承  #

# 2.拷贝继承 #

# 3.封装拷贝继承函数 #