从JavaScript的继承角度解析什么是原型链

继承简介

主要是为了代码的重用。因为可以在继承后直接使用别人定义好的方法,而不用自己书写,如果别人写的方法不够优化的情况下,自己还以重写父类的方法,我在这里推荐一本书《悟透JavaScript》,不错的书,值得看一看。
在JavaScript中由于没有类的概念,只有构造函数的概念。所以不存在想纯面向对象里面的那样的继承

php继承写法:

class subClass extends parClass{
}

高大上的原型链要出来了,准备好哦!

在JavaScript中类的继承使用的是另外一种继承方式,叫做基于原型对象的继承,如何实现的呢?

是时候举例说明

现在有一只猫,猫会爬树方法;同时还有一只老虎,老虎是不会爬树的,如何实现老虎可以爬树的方法?
解决:让老虎的构造函数去继承猫的构造函数实例化的对象。那么使用老虎的构造函数实例化的对象就可以使用猫的方法。

上代码!

<script type="text/javascript">
    // 猫的构造函数
    function Cat(name){
        this.name = name;
        this.action = function(){
            console.log('i am pashu');
        };
    }

    // 老虎的构造函数
    function Tiger(name) {
        this.name = name;
    }

    var cat1 = new Cat('波斯猫');
    console.log(cat1.name);
    cat1.action(); // cat1的爬树

    // 解决!!!!!!这里是重点!!!!
    Tiger.prototype = cat1; // 真正的猫

    var tiger1 = new Tiger('小老虎');
    console.log(tiger1.name);
    tiger1.action(); // tiger1的爬树
    console.log(tiger1); // action方法

</script>

老虎构造函数(类)实例化的对象存在一个叫做_proto_的一个属性(隐式属性,每个浏览的叫法不一定相同,但是JavaScript中对象都这有这个属性),这个属性指向上面老虎构造函数(类)继承的猫的构造函数实例化的对象。所以使用老虎构造函数(类)实例化的对象就可以调用猫的构造函数里面的所有的方法和属性。

上面讲的有点抽象是不是,我们console.log正面理解,注意 protp
这里写图片描述
通过使用 Tiger.prototype = cat1后,发现tiger1可以使用爬树的方法,但是打印tiger1对象,发现只存在两个属性(name,proto),并没有爬树的方法。那爬树方法到底是从哪里来的呢?
这里写图片描述

通过点击[proto]可以发现是一个对象,这个对象上面存在一个爬树的方法。
那么这个proto又是什么?
答:这个就是JavaScript中的原型链。!!!!!!!!呦呦呦,切克闹

什么还不理解!!?我们画图

这里写图片描述
这里写图片描述

通过上面这张图我们可以总计一下:

原型链是会一直指导最上面直到为null,也就是说我们可以在倒数第二层的原型链增加方法,老虎也会拥有,如下代码:

//在上面的代码增加这两行代码,老虎也就可以,卖萌了,这就是利用到了原型链
    Object.prototype.maimeng =function(){
        console.log('我能卖萌');
    };
    //不相信?那我再console.log,看下图,相信了吧!

这里写图片描述

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值