通过写一个原型链继承,独立完成原型链图

这篇博客深入解析了JavaScript中的原型链概念,包括构造函数、原型对象、__proto__和prototype之间的关系。通过实例展示了如何使用原型链实现类的继承,并创建了教师和人类的类。文章还详细解释了原型链的工作原理,以及如何通过__proto__和构造函数的原型对象构成原型链,最后给出了一个清晰的原型链图示,帮助读者更好地理解和应用原型链。
摘要由CSDN通过智能技术生成

//首先创建一个教师类

function Teacher(name,age,course,professional){
	this.name=name;
	this.age=age;
	this.course=course;//课程
	this.professional=professional;//职业
}
Teacher.prototype.teaching=function(){//上课
	console.log(this.name + this.professional +"正在上"+ this.course +"课");
}
var t1=new Teacher("张三",18,"语文","老师");
t1.teaching();//运行结果:张三老师正在上语文课

//在创建一个人类

function Human(name,age,course,professional){

}

 //现在让人类继承教师类(原型链继承)

Human.prototype= new Teacher("赵六",24,"数学","老师");
	Human.prototype.showInfo=function(){//信息
	console.log(this.course+this.professional+this.name+"年龄"+this.age+"岁");
}
var h1=new Human();//没有传参
h1.showInfo();//运行结果:数学老师赵六年龄24岁
h1.teaching();//运行结果:赵六老师正在上数学课
console.log(h1);

分析:

首先Human构造函数里有prototype属性(默认创建的),这个属性指向的是这个构造函数的原型对象(专门保存公有的属性和方法)

                                         prototype--------》构造函数的原型对象

其次原型对象里有个属性constructor,这个属性指向的是构造函数

                                         constructor-------》构造函数

最后,用通过构造函数new一个对象(这个对象叫做实例对象)后会有一个__proto__属性,这个属性指向的是构造函数的原型对象

                                        __proto__---------》构造函数的原型对象

注意:

        1,prototype和__proto__指向的是同一个原型对象

        2,__proto__和constructor属性是对象独有的属性,js里万物皆对象,所以函数也是对象,函数也有这俩属性

第2点不是很严谨,constructor可能有的对象本身没有,但是可以沿着原型链找到constructor,沿着原型链找到的就被称为:继承过来的属性。

由第2点可以知道构造函数也有__proto__属性,指向构造函数的原型对象,即构造函数构造函数的原型对象,同理,原型对象也是对象,原型对象也有__proto__属性,也要找构造函数的原型对象。觉得有点绕的话,可以思考两个问题,第一:这个对象(js万物皆对象,可能是函数,可能是原型对象)构造函数是谁? 第二:这个对象构造函数原型对象是谁?

由__proto__连起来的就叫原型链,终点是null

所以原型链图为:

 附:

        类似族谱(并不是族谱)的原型链图

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值