JS继承的六种方式（轻量版）

想要实现继承，就必须提供一个父类

function Person(name){
  this.name = name;
  this.sum = function(){
    console.log(this.name)
  };
};
person.prototype.age = 10;

一、原型链继承

function Per(){
  this.name = 'ker';
};
Per.prototype = new Person();
let per1 = new Per();
console.log(per1.age);//10
//instanceof 判断元素是否在这个元素的原型链上，per1继承了Person的属性，所以返回true
console.log(per1 instanceof Person);//true

二、借用构造函数继承

function Con(){
  Person.call(this,"jer");//核心
  this.age = 12;
};
let con1 = new Con();
console.log(con1.name);//"jer"
console.log(con1.age);//"12"
console.log(con1 instanceof Person);//false



借用构造函数实现继承核心就是改变父类函数执行并改变其this指向，可以使用call，相当于让Person函数执行，并把this指向本函数，相当于把父类的代码复制了一份到子函数体中，所以这种继承方式只是继承了父类函数私有的属性，并不会继承父类原型上公有的属性方法

”

三、组合继承(组合原型链继承和构造函数继承)——常用

function SubType(neme){
  Person.call(this,name);
}
SubType.prototype = new Person();//原型链继承
let sub = new SubType("gar");
console.log(sub.name);//"gar" 继承了构造函数方式的属性
console.log(sub.age);//10 继承了父类原型的属性

四、原型式继承

function content(obj){
  function F(){};
  F.prototype = obj;//继承了传入的参数
  return new F();//返回函数对象
}
let sup = new Person();//拿到父类实例
let sup1 = content(sup);
console.log(sup1.age);//10 继承了父类函数的属性



核心：创建一个函数包裹这个对象，然后返回这个函数的实例，类似于复制了一个对象，用函数来包裹；object.create()就是这个原理

”

五、寄生式继承

function content(obj){
  function F();
  F.prototype = obj;//继承传入的参数
  return new F();
}
let sup = new Person();
function subobject(obj){
  let sub = content(obj);
  sub.name = 'gar';
  return sub;
}
let sup1 = subobject(sup);
console.log(typeof subobject);//function
console.log(typeof sup1);//object
console.log(sup1.name);//“gar”

六、寄生组合式继承——常用

//寄生
function content(obj){
  function F();
  F.prototype = obj;
  return new F();
}
//content就是F实例
let con = content(Person.prototype);
//组合
function Sub(){
  Person.call(this);//继承了父类属性
}
Sub.prototype = con;//继承了con实例
con.constructor = Sub;//重定向没有constructor，手动添加上去
let sub1 = new Sub();//sub1继承了构造函数属性，父类实例属性，con实例属性
console.log(sub1.age);//10

本文使用 mdnice 排版