第二十三 继承

2021-06-07  本文已影响0人  扶光_

一,继承

什么是继承呢?
就是子类可以继承父类的属性和方法。
那么我们来思考一下,是子类的方法多还是父类的方法多呢?
子类的方法>= 父类的方法
因为子类不仅继承了父类所有的属性和方法,自身还有自己的属性和方法。
来说说js中的三种继承方式

1.1.原型链继承

核心:将父类的实例作为子类的原型

   //创建父类构造
  function Father(name){
       this.name = name
   }
   //写一个原型的方法
   Father.prototype.getName = function(){
       return this.name;
   }
  //创建子类构造
   function child(age){
    this.age = age;
   }
//核心语法!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!
   //把老对象的东西 赋值给新对象的原型 继承了老对象的属性和方法
   child.prototype = new Father("光头强");//把实例给原型
   child.prototype.getAge = function(){
       return this.age;
   }
   var cd = new child(18);
 console.log(cd.getAge()+cd.getName());//继承了Father的方法 通过子类也可以输出父类的名字
原型链继承

2.2构造函数继承

核心:利用callapply 把父类的指向通过this指定的属性和方法复制过来

    //创建父类构造 然后定义属性和方法
       function Father(name){
            this.name = name;
            this.arr = ["熊大","熊二","小松鼠"];
            this.getName = function(){
                return this.name;
            }
       }
       //创建子类并继承父类的属性和方法 
       function Son(age){
//核心语句!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!
            Father.call(this,"侯旭")//把原本Father里面的指向变为Son里面的this指向
            this.age = age;
       } 

       var S1  = new Son(18);
       //输出自己的属性 和继承父类的属性和方法
       console.log(S1.age);
       console.log(S1.name);
       console.log(S1.arr);
       console.log(S1.getName());
构造函数继承

2.3原型链和构造函数的组合继承

核心:通过调用父类的构造,继承父类的属性并保存传参的优点,然后通过父类的实例作为子类的原型,实现函数的复用
结合两种继承方式,是最常用的继承方式

function Person(name){
            this.name = name;
            this.friends = ["老大","老二"];
        }
        // 原型方法
        Person.prototype.getName =  function(){
            return this.name;
        }
        function Parent(age){
            Person.call(this,"李五");       //构造函数继承
            this.age = age;
        }
        // 原型链继承
        Parent.prototype = new Person();
        var parent = new Parent(18);
        console.log(parent.name);
        console.log(parent.friends);
        console.log(parent.age);
        console.log(parent.getName());
        parent.friends.push("小刚");
        console.log(parent.friends);

组合继承
上一篇 下一篇

猜你喜欢

热点阅读