标签：function prototype console 继承 子类 JS constructor 父类

原型链继承

让父类中的属性和方法在子类实例的原型上

   function A(x){
        this.x = x;
   }
   A.prototype.getX = function(){
     console.log(this.x);
  }
   function B(y){
      this.y = y;
}
   B.prototype = new A();  //原型链继承的核心
   B.prototype.constructor = B; //B.prototype重定向之后，没有了constructor这个函数，需要我们手动去添加一个，才能确保原型链的完整性
   B.prototype.getY = function(){
       console.log(this.y);
  } 

特点：

1. 它是重定向了子类的原型对象，让子类的prototype指向父类的实例，实例想要调取这些方法，是基于_proto_原型链查找机制完成的
2. 子类可以重写父类上的方法
3. 父类中的私有或者公有的属性方法，最后都会变为子类中的公有的属性和方法

call继承

子类方法中把父类当做普通函数执行，让父类中的this指向子类的实例，相当于给子类的实例设置了很多私有的属性或方法

 function A(x){
        this.x = x;
   }
   A.prototype.getX = function(){
     console.log(this.x); 
  }
   function B(y){
      A.call(this,100); //等价于 b1.x=100;
      this.y = y;
}
   B.prototype.getY = function(){
       console.log(this.y);
  } 
let b1 = new B(200)

特点：

1. 只能继承父类私有的属性或方法
2. 父类私有的变成子类私有的

寄生组合继承

call继承 + 类似于原型继承
特点：父类私有和公有的属性方法分别是子类实例的私有和公有属性方法

   function A(x){
     this.x = x;
  }
    A.prototype.getX = function(){
       console.log(this.x);
  }
  function B(y){
    A.call(this,100);
    this.y = y;
  }
  //Object.create(OBJ): 创建一个空对象，让空对象._proto_指向OBJ
  B.prototype = Object.create(A.prototype);
  B.prototype.constructor = B;
  B.prototype.getY = function(){
    console.log(this.y)
 }

关于在IE浏览器下是不能使用_proto_的 Object.create的处理

   //正常的Object.create的写法
    object.create = function(obj){
      let oo = {};
      oo._proto_ = obj;
      return oo;
   }
  //在IE浏览器下的写法
   object.create = function(obj){
      function Fn(){}
      Fn.prototype = object；
      return new Fn();
   }

ES6中的继承

class child extends parent{}

   class A{
     constructor(x){
        this.x = x;
    }
   getX(){
      console.log(this.x);
     }
 }
  class B extends A{
    constructor(y){
    //子类只要继承父类，可以不写constructor，一旦写了，则在constructor中的第一句必须是super(),否则会报错
    /*不写constructor浏览器会自己默认创建 
         constructor(...args){
            super(...arg);
          }
     */
      super(100); //相当于A.call(this,100）
      this.y = y;
    }
  getY(){
    console.log(this,y);
  }
}

标签：function,prototype,console,继承,子类,JS,constructor,父类
来源： https://www.cnblogs.com/wen-Ya/p/14915727.html

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。