1.javascript继承
js使用class实现继承,本质是使用原型来完成
//人的类class Person{constructor(name) {this.name = name}//走路的方法handleWalk(){console.log("走路");}}// 学生类class Student extends Person{constructor(name,age) {//通过super执行父类的构造函数super(name)this.age = age}//介绍handleJob(){console.log(this.name+",今年"+this.age+"岁"+",爱读书")}}let std = new Student("沉默小管",18)std.handleJob()std.handleWalk()// 老师类class Teacher extends Person{constructor(name,age) {super(name)this.age = age}//介绍handleJob(){console.log(this.name+",今年"+this.age+"岁"+",教学生")}}let teacher = new Teacher("沉默小管",18)teacher.handleJob()teacher.handleWalk()
执行结果:
通俗解释:
创建一个Person类,类里的所有方法可以看做为显示原型。
创建Student类和Teacher类就会有显示原型和隐示原型,因为这两个类都继承了Person类,这两个类的隐示原型就是Person的显示原型。new出来的teacher和std的实例对象的显示原型就是自己的参数,隐示原型指向Teacher和Student类上的显示原型。因为Student和Teacher类继承了Person,所以自己的隐私原型上没有方法和公共的成员变量,就会往上一级找,直到对象类型为止(顶层)
2.原型
原型有:
Student.prototype显示原型
student.__proto__隐示原型
每个对象都有一个prototype属性,这个属性指向对象的原型
student实例对象上有__proto__属性,这个属性指向Student.prototype对象上的方法
Student类上也有prototype上的属性,这个属性也指向Student.prototype对象上的方法
Student.prototype和student.__proto__都是指向同一个对象
所以
Student.prototype === student.proto
3.原型链
原型链就是类继承
//人的类class Person{constructor(name) {this.name = name}//走路的方法handleWalk(){console.log("走路");}}// 老师类class Teacher extends Person{constructor(name,age) {super(name)this.age = age}//介绍handleJob(){console.log(this.name+",今年"+this.age+"岁"+",教学生")}}let teacher = new Teacher("沉默小管",18)teacher.handleJob()teacher.handleWalk()
teacher.__proto__隐示原型上指向Teacher.prototype显示原型的属性和方法上找,但是找不到对应的方法。Teacher.prototype又是对象,所以也有__proto__隐示原型,这个隐示原型会指向继承了Person类的显示原型,所以Teacher的隐示原型就会往Person显示原型上查找对应的方法和属性
完整原型链
如何判断属性和方法是否自身所拥有的?
通过.hasOwnProperty()函数判断自身原型上是否有属性和方法
teacher.hasOwnProperty("name")结果为:trueteacher.hasOwnProperty("jobs")结果为:false
3.instanceof使用
instanceof检测构造函数的prototype属性是否在某个实例对象的原型链上
teacher instanceof Teacher 结果为trueteacher instanceof Person结果为trueteacher instanceof Object结果为trueteacher instanceof Array结果为false
Array不在原型链上,所以为false
总结:js一切都是对象
✨踩坑不易,还希望各位大佬支持一下\textcolor{gray}{踩坑不易,还希望各位大佬支持一下}踩坑不易,还希望各位大佬支持一下
📃 个人主页:\textcolor{green}{个人主页:}个人主页: 沉默小管
📃 个人网站:\textcolor{green}{个人网站:}个人网站: 沉默小管
📃 个人导航网站:\textcolor{green}{个人导航网站:}个人导航网站: 沉默小管导航网
🔥 技术交流QQ群:837051545\textcolor{green}{技术交流QQ群:837051545}技术交流QQ群:837051545
👍 点赞,你的认可是我创作的动力!\textcolor{green}{点赞,你的认可是我创作的动力!}点赞,你的认可是我创作的动力!
⭐️ 收藏,你的青睐是我努力的方向!\textcolor{green}{收藏,你的青睐是我努力的方向!}收藏,你的青睐是我努力的方向!
✏️ 评论,你的意见是我进步的财富!\textcolor{green}{评论,你的意见是我进步的财富!}评论,你的意见是我进步的财富!
如果有不懂可以留言,我看到了应该会回复
如有错误,请多多指教