5.javascript 对象继承 ---组合模式_es6 组合模式-优快云博客

本文深入探讨了JavaScript中组合式继承的实现方式，通过具体代码示例解析了如何使子类继承父类的属性和方法，同时保持代码复用性和各子类原型链的独立性。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

<script>
  		var superClass=function(id){
  			//引用类型共有属性
  			this.books=["javascript","css","html"];
  			this.id=id[0];
  		}
  		superClass.prototype.showBook=function(){
  			console.log(this.books)
  		}
  		//子类

  		var suberClass=function(id){
  			superClass.call(this,arguments);
  		}

  		//创建第一个实例
  		var instance1=new suberClass(10);
  		instance1.books.push("java")
  		console.log(instance1.books);//["javascript", "css", "html", "java"]
  		//console.log(instance1.showBook())//instance1.showBook() is no function

  		var instance2=new suberClass(10);
  		console.log(instance2.books);//["javascript","css","html"]
    </script>

代码剖析:

SuperClass.call（this,arguments）这一句是关键！！！由于call可以修改函数的作用环境，因此在子类中，对superClass调用这个方法就是在子类环境中执行的，

由于父类绑定了this，所以子类自然也继承了父类共有属性。

由于这类型继承没有涉及prototype，所有父类的原形自然不会被子类继承。如果想父类原形被子类继承只能放到构造函数里面，这样每个实例都会单独拥有一份而不能被公用

这违背了代码复用的原则。为了解决这个问题，后来有了组合式继承

    <script>
    var superClass = function(id) {
        //引用类型共有属性
        this.books = ["javascript", "css", "html"];
        this.id = id;
    }
    superClass.prototype.showBook = function() {
        console.log(this.books)
    }

    //子类1

    var suberClass = function(id) {
        superClass.call(this, arguments);
    }
    suberClass.prototype = new superClass();

    //子类2
    var suberClass2 = function(id) {
        superClass.call(this, arguments);
    }
    suberClass2.prototype = new superClass();
    //覆盖父类原型链某个方法
    suberClass2.prototype.showBook = function() {
        console.log("子类2showBook被修改了");
    }

    //创建第一个实例
    var instance1 = new suberClass(10);
    instance1.books.push("java")
    console.log(instance1.books); //["javascript", "css", "html", "java"]
    instance1.showBook() //["javascript", "css", "html", "java"]

    // instance1.prototype.showBook=function(){  //不要给实例添加原形方法！！切记没任何意义切报错
    // 	console.log("子类showBook被修改了");
    // }


    //第二个例子
    var instance2 = new suberClass2(10);
    console.log(instance2.books); //["javascript","css","html"]
    instance2.showBook() //子类2showBook被修改了
    

    //再次调用实例1的原型链方法，并没有被其他子类覆盖，
    instance1.showBook() //["javascript", "css", "html", "java"]
    </script>

子类原型链不会互相影响，子类可以继承父类，我们的目的达到了。博主宣布，下班收工回家吃饭