js中的继承

js中的继承

定义

什么是继承？
通过某种方式，让一个对象可以访问到另一个对象中的属性和方法叫做继承
或者说子类去继承父类的公有属性和私有属性

继承的应用

为什么要使用继承？
代码或功能可以重复使用，节省内存空间，简化代码。

继承的分类

原型继承

让子类的原型指向父类的对象 Child.prototype = new Parent;
代码如下：

function Parent() {  // 父类
        this.x = 100;
    }
    Parent.prototype.getX = function () {
        return this.x;
    }
    function Child() {  // 子类
        this.y = 200;
    }
    Child.prototype = new Parent; // 让子类的原型指向父类对象
    Child.prototype.getY = function () {
        return this.y;
    }
    var c1 = new Child();
    console.log(c1.x); //  100    x是继承父的x
    console.log(c1.getX()); // 100   getX是继承父的getX

特点：即继承了父类的私有属性也继承了父类的公有属性

call继承

Parent.call(this);
代码如下：

function Parent() {    // 父类
       this.x = 100;
   }
   Parent.prototype.getX = function () {   // 子类
       return this.x;
   }
   function Child() {
       Parent.call(this);  // 让parent中的this指向一个空对象，并且执行
       this.y = 200;
   }
   var c1 = new Child();
   console.log(c1.x);   //  100

特点：只能继承父类的私有属性

组合继承

1.Parent.call(this); // 继承父的私有属性
2.Child.prototype = Object.create(Parent.prototype); 子类继承父类的公有属性

代码如下：

 function Parent() {  // 父类
        this.x = 100;
    }
    Parent.prototype.getX = function () { // 子类
        return this.x;
    }
    function Child() {
        Parent.call(this); // 继承父的私有属性
        this.y = 200;
    }
    // 为了不影响父类的原型对象  copy一份赋值给了Child.prototype
    Child.prototype = Object.create(Parent.prototype);
    // 最好手动的修改一个Child原型对象上constructor指向
    Child.prototype.constructor = Child;  // 手动修改constructor的指向,保证类的完整性
    var c = new Child();
    console.log(c.x);
    console.log(c.getX())

ES6中的继承

1， super(); 类似于之前的call继承 继承父类的私有属性
2，extends 类似于原型对象 继承公有属性
两个需要一起写

class Parent{
        constructor() {
            this.x = 100;
        }
        getX(){
            return this.x;
        }
    }
    class Child extends Parent{
        constructor() {
            super();
            this.y = 200;
        }
        getY(){
            return this.y
        }
    }
    var child = new Child();
    console.log(child.x); // 100
    console.log(child.getX()); // 100