js 中的常用的继承方式及其优缺点

原型继承

   var person = {
      friends: ["a", "b", "c", "d"]
    }

    var p1 = Object.create(person)

    p1.friends.push("aaa")
    console.log(p1);
    console.log(person);

   // 把父类的实例作为子类的原型
    // 缺点：子类的实例共享了父类构造函数的引用属性   不能传参

组合继承

function Father(name) {
      this.name = name
      this.hobby = ["篮球", "足球", "乒乓球"]
    }

    Father.prototype.getName = function () {
      console.log(this.name);
    }

    function Son(name, age) {
      Father.call(this, name)
      this.age = age
    }

    // 在子函数中运行父函数，但是要利用call把this改变一下，
    // 再在子函数的prototype里面new Father() ,使Father的原型中的方法也得到继承，最后改变Son的 
  原型中的constructor

    // 缺点：调用了两次父类的构造函数，造成了不必要的消耗，父类方法可以复用
    // 优点可传参，不共享父类引用属性

    Son.prototype = new Father()
    Son.prototype.constructor = Son


    var s = new Son("ming", 20)
	
	function displayDate(){
		 console.log(s);
		
	}

 

寄生组合继承

function Father(name) {
      this.name = name
      this.hobby = ["篮球", "足球", "乒乓球"]
    }

    Father.prototype.getName = function () {
      console.log(this.name);
    }

    function Son(name, age) {
      Father.call(this, name)
      this.age = age
    }

    Son.prototype = Object.create(Father.prototype)
    Son.prototype.constructor = Son

    var s2 = new Son("ming", 18)

	
	function displayDate(){
		 console.log(s2);
		
	}

 

extend

    // ----------------------方法四：ES6的extend（寄生组合继承的语法糖）
    //     子类只要继承父类，可以不写 constructor ，一旦写了，则在 constructor 中的第一句话
    // 必须是 super 。

    class Son3 extends Father { // Son.prototype.__proto__ = Father.prototype
      constructor(y) {
        super(200)  // super(200) => Father.call(this,200)
        this.y = y
      }
    }

以上文章摘自

身为三本的我就是凭借这些前端面试题拿到百度京东offer的，前端面试题2021及答案_晟小明的博客-CSDN博客