美文网首页
JS的继承(原型继承与Class继承)

JS的继承(原型继承与Class继承)

作者: Sharp丶TJ | 来源:发表于2021-12-16 00:02 被阅读0次

一、原型继承

//父构造函数
function Father(value){
this.value=value
   this.name='libai'
}
//子构造函数
function Son(value){
Father.call(this,value)
}
let obj2=new Son(0)
obj2.value // 0
obj2.name // libai

上面代码中,在子构造函数中调用父构造函数,并使用 call 函数传入 this,这样子构造函数就会继承父构造函数的方法。

然后通过Son.prototype = Father.prototype

这种方式直接把父构造函数的原型传给子构造函数,但是这种方式有个缺点,那就是当我修改了 Son 的原型时,也会修改父构造函数的原型,因为这种方式是把原型地址赋值给了 Son

Son.prototype=Object.create(Father.prototype)
Son.prototype.constructor = Son

采取 Object.create 就相当于覆盖了原来 Son.prototype 的值,并让 Son.prototype.proto指向父构造函数的原型,由于覆盖原因,为了避免突发的情况发生所以要让 Son.prototype.constructor 指回 Son 构造函数

二、Class继承

Class可以通过extends关键字实现继承,这比ES5的通过修改原型链实现继承,要清晰和方便很多.

class Father{
    constructor(value){
        this.value=value
        this.name="qiuyanxi"
    }
    say(){
    console.log(123)}
}

class Son extends Father{ //使用extends关键字来继承
    constructor(value,age){
        super(value)  //这里要使用super方法来继承父构造函数的属性
        this.age=age
    }
    say(){
    super.say()} //这里同样要使用super方式来继承父构造函数的属性
}

super关键字: 他表示父类的构造函数,用来新建父类的this对象;

子类必须在constructor方法中调用super方法,否则新建实例时会报错,这是因为子类没有自己的this对象,而是继承父类的this对象,然后对其进行加工,如果不调用super方法,子类就得不到this对象;

相关文章

  • JS的继承(原型继承与Class继承)

    一、原型继承 上面代码中,在子构造函数中调用父构造函数,并使用 call 函数传入 this,这样子构造函数就会继...

  • iOS开发JavaScript学习之继承与原型链

    在OC里面有class的概念,但是这里js中并没有,是基于原型的继承。 详细见继承与原型链

  • js基础之实现继承的几种方式

    js 实现继承的方式有: 原型链继承; 构造函数继承; 组合继承(原型链继承 + 构造函数继承)(最常用);(原型...

  • 2019-03-25 继承

    js中通过原型来实现继承 组合继承:原型继承+借用构造函数继承

  • JavaScript笔记3

    RegExp、JSON、创建对象、构造函数、原型对象、原型链、原型继承、class、class继承 RegExp ...

  • 浅析JS继承方法

    JS 实现继承的方法有:1.原型链继承2.构造函数继承3.组合继承(原型链继承 + 构造函数继承)4.原型式继承(...

  • js之继承

    文章主讲 JS 继承,包括原型链继承、构造函数继承、组合继承、寄生组合继承、原型式继承、 ES6 继承,以及 多继...

  • 继承模式

    原型继承 子类型的原型为父类型的一个实例对象 继承封装 class 等同于 class 继承

  • js继承遇到的小问题

    这两天在看js继承方面,它不像OC那种传统的类继承。js继承方式还是挺多的。比如:原型继承、原型冒充、复制继承 原...

  • js的继承方式

    js的继承方式 一、原型链继承 原型继承的缺点: 二. 构造函数继承 构造函数继承的缺点: 三. 组合式继承 组合...

网友评论

      本文标题:JS的继承(原型继承与Class继承)

      本文链接:https://www.haomeiwen.com/subject/qvsmfrtx.html