文章目录

  • js继承的6种方式
  • 1、原型链继承
  • 特点：
  • 缺点：
  • 2、借用构造函数继承
  • 特点：
  • 缺点：
  • 3、组合继承（组合原型链继承和借用构造函数继承）
  • 特点：
  • 缺点：
  • 4、原型式继承
  • 特点：
  • 缺点：
  • 5、寄生式继承
  • 特点：
  • 缺点：
  • 6、寄生组合式继承（常用）
  • 寄生:在函数内返回对象然后调用
  • 组合：


js继承的6种方式

想要继承，就必须要提供个父类（继承谁，提供继承的属性）例子：

//父类
    function Person(name) { //给构造函数添加了参数
        this.name = name
        this.sum = function() {
            alert(this.name)
        }
    }
    Person.prototype.age = 10; //给构造函数添加了原型属性

1、原型链继承

原型链继承其核心在于将父类的实例作为子类的原型

特点：
  • 子类的实例也是父类的实例
  • 可以方便的继承父类型的原型中的方法，但是属性的继承无意义
缺点：
  • 只执行一次，无法给属性传值
  • 属性的继承无意义
    例子：
function Person(name, age, sex) {
        this.name = name;
        this.age = age;
        this.sex = sex;
    }
    Person.prototype.sayHi = function() {
        console.log('大家好，我是' + this.name);
    };
    //子类型
    function Student() {
        this.score = 100;
    }
    Student.prototype = new Person();
    Student.prototype.constructor = Student;

    var s1 = new Student()
    s1.sayHi() //大家好，我是undefined
    console.log(s1.name); //undefined
    console.log(s1.age); //undefined
    console.log(s1.constructor); //student

2、借用构造函数继承

借用构造函数继承其核心是在子类的内部调用父类，通过call改变父类中this的指向，等于是复制父类的实例属性给子类

特点：
  • 创建子类实例时，可以向父类传递参数
  • 可以实现多继承
  • 可以方便的继承父类型的属性，但是无法继承原型中的方法
缺点：
  • 实例并不是父类的实例，只是子类的实例
  • 无法继承原型中的方法
  • 无法实现函数复用，每个子类都有父类实例函数的副本，影响性能
    例子：
//构造器
    function Animation(name, age) {
        this.name = name;
        this.age = age;
    }
    Animation.prototype.eat = function() {
        console.log(this.name);
    }

    function Cat(name, age, sex, score) {
        Animation.call(this, name, age); //可以call多个父类对象
        this.sex = sex;
        this.score = score;
    }
    var c1 = new Cat('tom', 18, '男', 100); //可以传参
    c1.eat(); //报错    not  a  function
    console.log(c1 instanceof Animation); //false
    console.log(c1 instanceof Cat);

3、组合继承（组合原型链继承和借用构造函数继承）

组合继承其核心是结合了两种模式的优点，传参和复用

特点：
  • 可以继承父类原型上的属性，可以传参，可复用。
  • 每个新实例引入的构造函数属性是私有的。
缺点：
  • 调用了两次父类构造函数（耗内存），子类的构造函数会代替原型上的那个父类构造函数。
    例子：
//组合原型链和构造函数继承
    function SubType(name) {
        Person.call(this, name); //借用构造函数模式
    }
    SubType.prototype = new Person(); //原型链继承
    var sub = new SubType("gar");
    console.log(sub.name); //"gar"继承了构造函数属性
    console.log(sub.age); //继承了父类原型的属性

4、原型式继承

原型式继承其核心是用一个函数包装一个对象，然后返回这个函数的调用，这个函数就变成了个可以随意增添属性的实例或对象。object.create()就是这个原理。

特点：
  • 类似于复制一个对象，用函数来包装。
缺点：
  • 所有实例都会继承原型上的属性。
  • 无法实现复用。（新实例属性都是后面添加的）
    例子：
//先封装一个函数容器，用来输出对象和承载继承的原型
    function conent(obj) {
        function F() {}
        F.prototype = obj; //继承了传入的参数
        return new F(); //返回函数对象
    }
    var sup = new Person() //拿到父类的实例
    var sup1 = conent(sup);
    console.log(sup1.age); //继承了父类函数的属性

5、寄生式继承

寄生式继承其核心是就是给原型式继承外面套了个壳子。

特点：
  • 没有创建自定义类型，因为只是套了个壳子返回对象（这个），这个函数顺理成章就成了创建的新对象。
缺点：
  • 没用到原型，无法复用。
    例子：
function content(obj) {
        function F() {}
        F.prototype = obj; //继承了传入的参数
        return new F(); //返回函数对象
    }
    var sup = new Person();
    //以上是原型式继承，给原型式继承套个壳子传递参数
    function subobject(obj) {
        var sub = content(obj);
        sub.name = "gar";
        return sub;
    }
    var sup2 = subobject(sup);
    //这个函数经过声明之后就成了可增添属性的对象
    console.log(typeof subobject); //function
    console.log(typeof sup2); //object
    console.log(sup2.name); //"gar",返回了个sub对象，继承了sub的属性

6、寄生组合式继承（常用）

寄生组合式继承其核心是修复了组合继承的问题

寄生:在函数内返回对象然后调用
组合：
  • 函数的原型等于另一个实例。
  • 在函数中用apply或者call引入另一个构造函数，可传参
    例子：
//寄生
    function content(obj) {
        function F() {}
        F.prototype = obj;
        return new F();
    }
    //content就是F实例的另一种表示法
    var con = content(Person.prototype);
    //con实例( F实例)的原型继承了父类函数的原型
    //上述更像是原型链继承，只不过只继承了原型属性

    //组合
    function Sub() {
        Person.call(this); //这个继承了父类构造函数的属性
    }
    //解决了组合式俩次调用构造函数属性的缺点
    //重点
    Sub.prototype = con; //继承了con实例
    con.constructor = Sub; //-定要修复实例
    var sub1 = new Sub();
    //Sub的实例就继承了构造函数属性，父类实例，con的函数属性
    console.log(sub1.age); //10;