介绍什么是原型,什么是原型对象以及什么是原型链(生活例子讲解生动形象)

构造函数的实例的原型就是构造函数的原型对象

原型链是js的一种继承方式,他的基本思想就是通过原型链继承多个引用类型的属性和方法。每个构造函数都有一个原型对象,原型有一个属性指回构造函数
在这之前大家思考一个问题?什么是原型,什么是原型对象,什么是构造函数,下面我们通过代码解释
function foo(name,age){
            this.name = name
            this.age = age
            console.log(this.name)
            console.log(this.age)
     }
     foo.prototype.del = function(a,b){
         console.log(a-b)
     }
     var childfoo = new foo("杨雨",25)
     childfoo.del(20,10)
     console.log(foo.prototype)
     console.log(childfoo.__proto__)
     console.log(childfoo.__proto__ == foo.prototype)

效果:

11
分析:

首先要明白:构造函数是用于创建特定类型对象的。我们有一个构造函数,他有一个原型对象:foo.prototype,我们通过foo.prototype加点的形式来创建原型对象的方法,原型对象的方法可以被实例继承使用,但是不能自己直接使用,比如我们直接使用foo.del(),就会报错(foo.del is not a function),而我们又创建了一个foo实例,名为childfoo,实例都会有一个__proto__属性,这个属性指向原型,实例的原型就是构造函数的原型对象(这个可以从上图输出第四十五行看到)。所以我们的实例可以使用构造函数的方法。实例要想使用某个方法或者某个属性先在自己内部找,找不到再通过__proto__,去他的原型里边找,还没有的话,再次通过__proto__去他的原型的原型里边找,这样链式寻找就形成了原型链。有的话就直接使用,没有就该报啥错报啥错吧。

生活举例

我们想买苹果(home是smallMarket的一个实例),发现家里没有,我们就去最近的smallMarket去寻找(home.__proto__ = smallMarket.prototype )结果发现smallMarket也没有,但是superMarket有,所以,我们需要建立联系,smallMarket.prototype.apple = superMarket.prototype.apple 在这个例子当中,home的原型就是苹果,smallMarket的原型对象也是苹果

代码实现:

function superMarket() {

        }
        superMarket.prototype.apple = "苹果"

        function smallMarket() {

        }
        smallMarket.prototype.apple = superMarket.prototype.apple
        var home = new smallMarket()
        console.log(smallMarket.prototype)
        console.log(home.apple)

效果:

11

一个构造函数也可以成为另一个构造函数的实例

function aa(say){
            this.say = say
        }
        aa.prototype.wawa = function(){
            console.log('wawawawa')
        }
        function Animal(name){
            this.name = name
            console.log(this.name)
        }
        Animal.prototype.say=function(){
            console.log("旺旺")
        }
       
        Animal.prototype =new aa("哈哈哈")
        let cat = new Animal('喵喵')
        console.log(Animal.prototype)
        console.log(cat.__proto__.__proto__)
        cat.__proto__.__proto__.wawa()

log:

xiaog

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值