继承知识点

1、原型链继承

将子类（构造函数）的原型 指向父类（构造函数）的实例。

  

   

    

     

    
    

     

      function Father() {
     
    
   

    

     

    
    

     
    this.name = 'Fname';
     
    
   

    

     

    
    

     
    this.likes = ['read', 'travel'];
     
    
   

    

     

    
    

     

      }
     
    
   

    

     

    
    

     

      Father.prototype.getName = function() {
     
    
   

    

     

    
    

     
    return this.name
     
    
   

    

     

    
    

     

      }
     
    
   

    

     

    
    

     

      function Son(age) {
     
    
   

    

     

    
    

     
    this.age = age
     
    
   

    

     

    
    

     

      }
     
    
   

    

     

    
    

     

      //重写子类原型使其指向父类的实例
     
    
   

    

     

    
    

     

      Son.prototype = new Father();
     
    
   

    

     

    
    

     

      //需之后添加原型方法,否则会被重写覆盖
     
    
   

    

     

    
    

     

      Son.prototype.getAge = function(){
     
    
   

    

     

    
    

     
    return this.age
     
    
   

    

     

    
    

     

      }
     
    
   

    

     

    
    

     

      var son1 = new Son(20)
     
    
   

    

     

    
    

     

      //顺着原型链可访问父类属性及原型方法
     
    
   

    

     

    
    

     

      console.log(son1.name) // Fname
     
    
   

    

     

    
    

     

      console.log(son1.getName()) //Fname
     
    
  
 

缺点：

⑴ 原型中的所有属性被所有实例共享 ，如有更改 ，引用类型会互相影响 ，基本类型会在实例中新创建，对原型无影响。

  

   

    

     

    
    

     

      var son2 = new Son(16)
     
    
   

    

     

    
    

     

      son1.name = 'Sname';
     
    
   

    

     

    
    

     

      son1.likes.push('eat');
     
    
   

    

     

    
    

     

      son2.name //Fname
     
    
   

    

     

    
    

     

      son2.likes //["read","travel", "eat"]
     
    
   

    

     

    
    

     

      son1.name //Sname
     
    
   

    

     

    
    

     

      son1.likes //["read","travel", "eat"]
     
    
  
 

⑵创建子类实例时，无法向父类构造函数传参，使不同的子类实例拥有不同的父类属性值, 例如让每个子类实例拥有各自的name值和likes值。虽然在创建父类的实例时可以传一次参, 但得到的是共享的属性值。

2、借用构造函数继承

使用call或apply 在子类构造函数中调用父类构造函数。

  

   

    

     

    
    

     

      //解决引用类型共享问题,每个子类实例拥有自己的属性
     
    
   

    

     

    
    

     

      function Father() {
     
    
   

    

     

    
    

     
    this.arr = [1,2,3]
     
    
   

    

     

    
    

     

      }
     
    
   

    

     

    
    

     

      function Son() {
     
    
   

    

     

    
    

     
    Father.call(this)
     
    
   

    

     

    
    

     

      }
     
    
   

    

     

    
    

     

      var son1 = new Son()
     
    
   

    

     

    
    

     

      var son2 = new Son()
     
    
   

    

     

    
    

     

      son2.arr.push(4)
     
    
   

    

     

    
    

     

      console.log(son2.arr) //[1,2,3,4]
     
    
   

    

     

    
    

     

      console.log(son1.arr) //[1,2,3]
     
    
  
 

  

   

    

     

    
    

     

      //解决传参问题:每个子类实例继承了父类属性且拥有各自的值
     
    
   

    

     

    
    

     

      function Father(name) {
     
    
   

    

     

    
    

     
    this.name = name
     
    
   

    

     

    
    

     

      }
     
    
   

    

     

    
    

     

      function Son(name) {
     
    
   

    

     

    
    

     
    Father.call(this, name)
     
    
   

    

     

    
    

     

      }
     
    
   

    

     

    
    

     

      var son1 = new Son("aa")
     
    
   

    

     

    
    

     

      console.log(son1.name) //aa
     
    
   

    

     

    
    

     

      var son2 = new Son("bb")
     
    
   

    

     

    
    

     

      console.log(son2.name) //bb
     
    
  
 

缺点：

如果方法都在构造函数中定义，没有了 函数复用性。每个实例都创建了一份函数副 本，占资源。

3、组合继承（常用） 

原型链+借用构造函数。共享的方法和属性通过原型链继承， 实例各自的属性通过借用构造函数继承。

  

   

    

     

    
    

     

      function Father(name) {
     
    
   

    

     

    
    

     
    this.name = name
     
    
   

    

     

    
    

     
    this.arr = [1,2,3]
     
    
   

    

     

    
    

     

      }
     
    
   

    

     

    
    

     

      Father.prototype.getName = function() {
     
    
   

    

     

    
    

     
    console.log(this.name)
     
    
   

    

     

    
    

     

      }
     
    
   

    

     

    
    

     

      function Son(name, age) {
     
    
   

    

     

    
    

     
    Father.call(this, name)
     
    
   

    

     

    
    

     
    this.age = age
     
    
   

    

     

    
    

     

      }
     
    
   

    

     

    
    

     

      Son.prototype = new Father()
     
    
   

    

     

    
    

     

      Son.prototype.constructor = Son
     
    
   

    

     

    
    

     

      Son.prototype.getAge = function() {
     
    
   

    

     

    
    

     
    console.log(this.age)
     
    
   

    

     

    
    

     

      }
     
    
   

    

     

    
    

     

      var son1 = new Son("xiao",20)
     
    
   

    

     

    
    

     

      son1.arr.push(4)
     
    
   

    

     

    
    

     

      console.log(son1.arr) //[1,2,3,4]
     
    
   

    

     

    
    

     

      son1.getName() //xiao
     
    
   

    

     

    
    

     

      son1.getAge() //20
     
    
   

    

     

    
    

     

      var son2 = new Son("lulu", 16)
     
    
   

    

     

    
    

     

      console.log(son2.arr) //[1,2,3]
     
    
   

    

     

    
    

     

      son2.getName() //lulu
     
    
   

    

     

    
    

     

      son2.getAge() //16
     
    
  
 

 除此还有原型式继承，寄生式继承，寄生组合式继承。

文章来源: root181.blog.csdn.net，作者：前端纸飞机，版权归原作者所有，如需转载，请联系作者。

原文链接：root181.blog.csdn.net/article/details/119855931