首页 > Web开发 > 详细

js的继承

时间:2021-07-27 15:40:42      阅读:22      评论:0      收藏:0      [点我收藏+]

首先,es5和es6的继承有区别:

简单来说es5是子类的原型指向父类  子类再作为构造函数去生成新对象 这样就会一改都改

共享实例属性,属于引用类型传值

es6则是用关键字class定义类, extends关键字实现继承 super指代 这样就是新对象了

以下内容来自https://zhuanlan.zhihu.com/p/359282706

ES5的继承

ES5的继承是先创建子类的实例, 然后再创建父类的方法添加到this上.

通过原型和构造函数机制实现的.

// ES5的继承
// 原型链方式: 子类的原型指向父类的实例
// 缺点: 1. 因为原型链继承共享实例属性,属于引用类型传值, 修改某个实例的属性会影响其他的实例 2. 不能实时向父类的构造函数中传值, 很不方便
function Parent() {
    this.values = [1];
}
function Child(){

}
Child.prototype = new Parent();
const child1 = new Child();
console.log(child1.values); // [ 1 ]
child1.values.push(2);
const child2 = new Child();
console.log(child2.values); // [ 1, 2 ]

ES6的继承

ES6的继承是先创建父类的实例对象this(必须先调用super方法), 再调用子类的构造函数修改this.

通过关键字class定义类, extends关键字实现继承. 子类必须在constructor方法中调用super方法否则创建实例报错. 因为子类没有this对象, 而是使用父类的this, 然后对其进行加工

super关键字指代父类的this, 在子类的构造函数中, 必须先调用super, 然后才能使用this

// ES6的继承
// 在子类的构造器中先调用super(), 创建出父类实例, 然后再去修改子类中的this去完善子类
class Parent {
    constructor(a, b) {
        this.a = a;
        this.b = b;
    }
}

class Child extends Parent {
    constructor(a, b, c) {
        super(a, b);
        this.c = c;
    }
}

const child = new Child(1, 2, 3);
console.log(child); // { a: 1, b: 2, c: 3 }

js的继承

原文:https://www.cnblogs.com/lx2331/p/15065279.html

(0)
(0)
   
举报
评论 一句话评论(0
关于我们 - 联系我们 - 留言反馈 - 联系我们:wmxa8@hotmail.com
© 2014 bubuko.com 版权所有
打开技术之扣,分享程序人生!