javascript中的继承

原型和原型链

原型 1.prototype 每个函数都有一个prototype属性,被称为显式原型
2._ _ prooto _ _ 每个实例对象都有proto属性,其被称为隐式原型
每一个实例对象的隐式原型proto属性指向自身构造函数的显示原型prototype
3.constructor 每个prototype 原型都有一个constructor属性,指向它关联的构造函数
原型链 获取对象属性时,如果对象本身并没有这个属性,那么就去的它的原型proto上去找如果还查不到,就去找原型的原型,一直找到最顶层(object.prototype)为止,Object.prototype对象也有__proto__ 属性值为null
构造函数:是一种规范,function变量名首字母大写,使用方法主要是通过new实例话,当然了也可以直接调用,本身与普通函数就没有什么区别

js中的继承主要有以下几种

原型链继承

实例对象能通过原型链查找的形式获取获取原型上的属性和方法,在实例子函数之前修改子函数的protype指向为父函数的实例对象,在将修改后的prototype指向回原本与自己关联的构造函数,此时实例化后的子函数就通过通过原型链查找的形式就能获取父函数的属性和方法
缺点:因为是通过原型链的机制完成的继承,父函数本身的私有属性和方法,以及共有属性和方法都会成为子函数的共有属性和方法,原型链本身就是一个引用数据类型,当我吗修改子函数的实例对象上通过继承而来的属性和方式是,父函数上的属性和方法也会跟着便

    // 父函数
    function Parent(x) {
        this.x = x
    }
    Parent.prototype.getx = function () {
        console.log(this.x);
    }
    // 子函数
    function Children(y) {
        this.y = y
    }
    // 该
    Children.prototype = new Parent('父函数')
    Children.prototype.constructor = Children
    Children.prototype.gety = function () {
        console.log(this.y);
    }
    let exampleParent= new Parent('子函数')
    console.log(exampleParent);

call继承

通过在子函数中调用父函数并该变父函数的this指向为当前的实例对象,实现了父函数的私有属性和方法的继承,缺点:没有继承夫函数的共有属性和方法

    // 父函数
    function Parent(x) {
        this.x = x
    }
    // 子函数
    function Children(y) {
        Parent.call(this,'父函数')
        this.y = y
    }
    Children.prototype.gety = function () {
        console.log(this.y);
    }
    let exampleParent= new Parent('子函数')
    console.log(exampleParent.x); //父函数

组合继承

结合以上两种继承,在子函数中调用要继承的父函数通过call方法改变父函数的this为当前的实例对象,完成了父函数的私有属性继承,继承父函数的共有属性和方法,,然后将父函数的prototype放到里面赋值给子实例对象的prototype,为了原型链的完整性,在将重写后prototype中的constructor指向会子函数

    // 父函数
    function Parent(x) {
        this.x = x
    }
    Parent.prototype.getx = function () {
        console.log(this.x);
    }
    // 子函数
    function Children(y) {
        Parent.call(this,'父函数')
        this.y = y
    }
    // 该
    Children.prototype = Parent.prototype
    Children.prototype.constructor = Children
    Children.prototype.gety = function () {
        console.log(this.y);
    }
    let exampleParent= new Parent('子函数')
    console.log(exampleParent);

寄生组合继承

首先实例化子函数,在子函数中调用要继承的父函数通过call方法改变父函数的this为当前的实例对象,完成了父函数的私有属性继承,继承父函数的共有属性和方法,通过Object.creare()创建一个对象,开辟一块新的内存地址,这样就不会出现修改子涵数继承过来的公有属性而该变父函数的问题了,然后将父函数的prototype放到里面赋值给子实例对象的prototype,为了原型链的完整性,在将重写后prototype中的constructor指向会子函数

    // 父函数
    function Parent(x) {
        this.x = x
    }
    Parent.prototype.getx = function () {
        console.log(this.x);
    }
    // 子函数
    function Children(y) {
        Parent.call(this,'父函数')
        this.y = y
    }
    // 该
    Children.prototype = Object.create(Parent.prototype)
    Children.prototype.constructor = Children
    Children.prototype.gety = function () {
        console.log(this.y);
    }
    let exampleParent= new Parent('子函数')
    console.log(exampleParent);

ES6中的Class类和继承

ES6中的继承就很简单了通过extends和super就完成继承了

    class Parent {
        constructor(x) {
            this.x = x
        }
        getx(){
            console.log(this.x);
        }
    }
    class Children extends Parent{
        constructor(x,y){
            super(x)
            this.y=y
        }
        gety(){
            console.log(this.y);
        }
    }
    let exampleParent= new Parent('子函数')
  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值