js中的继承_childtype parenttype-CSDN博客

本文链接：https://blog.csdn.net/qq_42525666/article/details/129317110

一、原型有三大特性：封装继承多态

封装：指的是把很多属性、方法全都集中到原型里，要访问的时候都是统一入口，不会像过程式编程（后面有介绍）一样到处都是作用域比较广的变量。

继承：指的是两个原型之间，子类可以继承父类的属性和方法。

多态：父类有一个属性叫做“name”，子类也可以有一个叫“name”的属性，子类只会生效自己的“name”。

二、js中的继承

原型链继承Child.prototype=new Parent()

子类实例-->父类实例-->父类构造函数原型

// 子类构造函数所生成的实例会经过两层__proto__找到父类原型
new Child().__proto__.__proto__ === Parent.prototype
// 接下来，由子类构造函数生成的实例所没有的属性和方法，都会去父类原型找。

缺点：引用类型的属性会被子类修改，造成污染。子类构造函数在实例化时不能给父类构造函数传参直接实例化赋值的new Parent()

构造函数继承（盗用构造函数）

var Child = function(childType, parentType){
    Parent.call(this, parentType)
    this.childType = childType
}

优点：可以传参数。引用类型的属性不会被子类修改

缺点：不能继承原型，父类方法不能重用。 new Child() 会绑定两次实例对象

组合继承（ = 原型链继承 + 盗用构造函数）

知道上面两种继承方式的优点和缺陷，那么我们可以利用1 + 1 > 2 的方法实现组合继承。完美解决了原型链继承和盗用构造函数继承出现的问题

var Child = function(childType, parentType){
    Parent.apply(this, [parentType])
    this.childType = childType
}
Child.prototype = new Parent();
Child.prototype.constructor = Child;

实例和原型上存在两份相同的属性，一份在this，一份在prototype（this不等于prototype，虽然简单用起来差不多），也就是说实例化了两次Parent，性能上欠佳，所以才有了下面的原型式到寄生组合的进化。第一次new Parent()会调用父类构造函数，而后子类构造函数每一次生成新实例都会调用父类构造函数。也就是说，多了第一次会调用父类构造函数的情况。

4. 原型式继承

// 自己简单点写是这样，作用约等于Object.create()
function create(options){
    var Temp = function(){};
    Temp.prototype = options; 
    return new Temp();        
}
// 这里命名为parentPrototype跟寄生组合有关,往下看寄生组合
var parentPrototype = {
    name:'me'
}
var ChildPrototype = create(parentPrototype);
// 下面写的也是原型式
var ChildPrototype = Object.create(parentPrototype);

优点：不用实例化父类，只是用Object.create创建了一个副本

缺点：不能改动自己的原型（因为返回new已经实例化了），所以也不能复用

5.寄生式继承

也有把原型式归到寄生式里面的，因为就包了个壳

优点：在原型式继承的基础上，增强了对象

缺点：多包了一层，当然是多走了一次函数啦。不能复用，跟原型式一样

function clone(options){   
    let clone = Object.create(options);
    clone.personName = "you";
    return clone        
}        
var parentPrototype = {            
    name:"me"     
}        
var ChildPrototype = clone(parentPrototype);

这种方式可以使克隆对象在原基础上增强，即添加属性和方法

注意：原型继承和寄生继承都重点关注对象的使用，而不考虑构造函数的使用

6.寄生组合继承（组合继承 + 原型继承 + 寄生继承）

优点：以上所有的优点

缺点：写起来复。多执行了call、create

function Parent(name) {
    this.name = name;
}
 // 定义原型上的一个方法
Parent.prototype.method = function () {
    console.log(this.name);
};
// 函数式
function Child(name, age) {
    Person.call(this, name);
}
// 如果没有Object.create方法,就自己简单写一下
if (!Object.create) {
    Object.create = function (proto) {
        function Temp() {}
        Temp.prototype = proto;
        return new Temp();
    };
}
// 寄生
function clone(options){   
    let clone = Object.create(options);
    clone.personName = "you";
    return clone        
} 
// 原型链上寄生
Child.prototype = clone(Parent.prototype);
// 修改constructor指向
Child.prototype.constructor = Child;

7.class继承

寄生组合继承太麻烦了， es6新增class继承，没有缺点。在 ES5 之前我们都是利用构造函数实现面向对象编程。ES6 的class作为语法糖，其实内部也是利用了构造函数实现面向对象编程。

Class 可以通过 extends关键字实现继承，让子类继承父类的属性和方法。
除了私有属性，父类的所有属性和方法，都会被子类继承，其中包括静态方法。

class Parent {
  constructor(x, y) {
    this.x = x;
    this.y = y;
  }
  toString() {
    return '(' + this.x + ', ' + this.y + ')';
  }
}

class Child extends Parent {
  constructor(x, y, color) {
    super(x, y); // 调用父类的constructor(x, y)参数一致，实现继承，解决代码冗余
    this.color = color;
  }
 //重写父类方法
  toString() {
    return this.color + ' ' + super.toString(); // 调用父类的toString()
  }
  // 新增方法，并在新增方法中调用父类方法内容
  ChildMethod(){
     super.toString()
     // 逻辑
  }
}

上面示例中，constructor()方法和toString()方法内部，都出现了super关键字。super在这里表示父类的构造函数，用来新建一个父类的实例对象。
ES6 规定，子类必须在constructor()方法中调用super()，否则就会报错。所以父类的构造函数必定会先运行一次

Object.getPrototypeOf()方法可以用来从子类上获取父类。因此，可以使用这个方法判断，一个类是否继承了另一个类

super这个关键字，既可以当作函数使用，也可以当作对象使用。在这两种情况下，它的用法完全不同。
第一种情况，super作为函数调用时，代表父类的构造函数。ES6 要求，子类的构造函数必须执行一次super函数。
作为函数时，super()只能用在子类的构造函数之中，用在其他地方就会报错。
第二种情况，super作为对象时，在普通方法中，指向父类的原型对象；在静态方法中，指向父类。
由于super指向父类的原型对象，所以定义在父类实例上的方法或属性，是无法通过super调用的。