JS中继承的几种方法(原型链继承/构造函数继承/组合继承(原型链+constructor))/寄生式继承/寄生组合继承/ES6继承)

// 1.原型链继承
function Parent(){
  this.name = "Kevin"
}
Parent.prototype.getName = function(){
  console.log(this.name);
  return this.name
}

function Child () {}
Child.prototype = new Parent();

let child1 = new Child();
console.log(child1.getName()) // kevin

//引用类型的属性被所有实例共享
//不能向 Parent 传参

// 2.构造函数继承
/**
 * 优点
 * 解决了原型链继承存在的两个缺点。
 * 
    避免了引用类型的属性被所有实例共享
    能向 Parent 传参

  * 缺点：
    方法都在构造函数中定义，每次创建实例都会创建一遍方法。
 */
function Parent(){
  this.names = ["Kevin","daisy"]
}
function Child(){
  Parent.call(this)
}

let child2 = new Child();
child2.names.push("Lucy");
console.log(child2.names); // ["kevin", "daisy", "Lucy"]

let child3 = new Child();
console.log(child3.name); //["kevin", "daisy"]


// 三、组合继承(融合原型链继承和构造函数继承)
function Parent(name){
  this.name = name;
  this.colors = ["red","blue","green"]
}
Parent.prototype.getName = function(){
  console.log(this.name)
}

function Child(name,age){
  Parent.call(this,name);
  this.age = age;
}
Child.prototype = new Parent();
Child.prototype.constructor = Child;


let child4 = new Child("kevin","18");
child4.colors.push("black");

console.log(child4.name); //kevin
console.log(child4.age); //18
console.log(child.colors); //["red","blue","green","black"]

let child5 = new Child("daisy","20");
console.log(child5.name); //daisy
console.log(child5.age); //20
console.log(child5.colors); //["red","blue","green"]

// 4.寄生式继承
function createObj(o){
  let clone = Object.create(o);
  clone.sayName = function(){
    console.log("hi")
  }
  return clone;
}

//5.寄生组合式继承
/**
 * 
 * 这种方式的高效率体现它只调用了一次 Parent 构造函数，
 * 并且因此避免了在 Parent.prototype 上面创建不必要的、多余的属性。
 * 与此同时，原型链还能保持不变；因此，还能够正常使用 instanceof 和 isPrototypeOf。
 * 开发人员普遍认为寄生组合式继承是引用类型最理想的继承范式。
 * 
 */
function Parent(name){
  this.name = name;
  this.colors = ["red","blue","green"]
}
Parent.prototype.getName = function(){
  console.log(this.name)
}

function Child(name, age){
  Parent.call(this,name);
  this.age = age
}

//封装创建新的对象的方法，以传入的原型作为新对象的原型
function object(o){
  function F() {}
  F.prototype = o;
  return new F()
}
function prototype(Child, Parent){
  // 新的原型对象由父的原型对象生成
  const prototype = object(Parent.prototype);
  prototype.constructor = Child;
  Child.prototype = prototype;
}
prototype(Child, Parent);

let child6 = new Child("kevin", "18");
child6.colors.push("black");
console.log(child6.name); // kevin
console.log(child6.age); // 18
console.log(child6.colors); // ["red", "blue", "green", "black"]

let child7 = new Child("daisy", "20");
console.log(child7.name); // daisy
console.log(child7.age); // 20
console.log(child7.colors); // ["red", "blue", "green"]



// 6.ES6继承
class Parent {
  constructor(name){
    this.name = name
  }
  sayHello(){
    console.log("Hello")
  }
}
class Child extends Parent{
  constructor(name,age){
    super(name);
    this.age = age
  }
}
const child = new Child("Child",10);
console.log(child.name); //输出:Child
child.sayHello(); //输出Hello





// //寄生组合
// function Parent(name){
//   this.name = name;
//   this.colors = ["red","green","blue"]
// }
// function Child(name,age){
//   Parent.call(this,name);
//   this.age = age
// }

// // Child.prototype = new Parent();
// // Child.prototype.constructor = Child;

// //封装创建新的对象的方法，以传入的原型作为新对象的原型
// function object(o){
//   function F(){}
//   F.prototype = o;
//   return new F()
// }

// function prototype(Child,Parent){
//   // 新的原型对象由父的原型对象生成
//   const prototype = object(Parent.prototype)
//   prototype.constructor = Child;
//   Child.prototype = prototype
// }
// prototype(Child,Parent)


//根据传入的原型生成个新的原型对象
// function object(o){
//   function F(){}
//   F.prototype = o;
//   return new F()
// }
// function prototype(Child,Parent){
//   const prototype = object(Parent.prototype)
//   prototype.constructor = Child;
//   Child.prototype = prototype
// }
// prototype(Child,Parent)

//同上
// function create(obj) {
//   function F() {}
//   F.prototype =  obj
//   return F
// }
// function extend(Child, Parent) {
//   const clone = create(Parent.prototype)
//   clone.constructor = Child
//   Child.prototype = clone
// }
// extend(Child, Parent)