自己对js对原型链的理解
js对象分为2种
函数对象和普通对象
函数对象 比如
function Show(){}
var x=function Show2(){}
var b=new Function("show3","alert('bb')")
show、x、b都是函数对象 是可执行的 并且构造出普通对象
普通对象
var showobje=new Show() var xobj=new x(); var bobj=new b(); var c={}
这些对象 都是普通对象
函数对象有个属性prototype,作用就是实现继承,他们指向一个自己构造的对象 比如 第一个function Show(){}的protoype就是: Show.prototype=new Show();
通过构造器构造的普通对象都有个一隐藏属性__proto__ 这个属性指向他构造器prototype(普通对象是没有prototype)
以下面这个代码为例 来解释是怎么实现继承的
function Person(name, age) { this.name = name; this.age = age; } Person.prototype.eat=function() { console.log(this.name + "正在吃饭"); } function Student(name, age, className) { this.className = className; Person.call(this,[name,age]);//实现继承属性 } //学生继承人的特性 Student.prototype = Object.create(Person.prototype); //实现子类自定义扩展方法 Student.prototype.doHomework=function() { console.log(this.name + "正在做作业"); } window.onload=function() { //创建一个人 var person = new Person("小明", 12); person.eat();//人正在吃饭 //创建一个学生 var stu = new Student("小胖", 12, "一年级"); stu.eat(); stu.doHomework(); }
输出一下 我们可以看到 学生通过原型继承了人吃饭的特性
function Person(name, age) {
this.name = name;
this.age = age;
}
我们知道Person也是一个对象(函数对象),并且这个对象拥有一个prototype属性 并且这个属性等于new person();一个空对象(这个构造的空对象的_proto_并没有_proto_ 所以当找到这一级 就到了原型链顶端 )
后来我们在这个空对象上添加了一个eat函数
Person.prototype.eat=function(){...}
为什么通过new Person()构造的对象能使用这个函数呢
因为我们通过函数构造一个对象 这个对象的_proto_属性就指向了构造他函数的prototype对象
类似
var obje=new Person()
obje._proto_=Person.prototype;
当我们使用obje.eat()调用函数的时候 会在当前对象的成员里面找 很遗憾 没有找到
那么通过对象的_proto_原型链条 向上找 这个时候我们在prototype找到eat方法 那么就eat.call(this)调用
如果没有找到 在通过prototype对象的_proto向上找 最终找到_proto_=new Object();在Obje对象 找eat方法 没有找到 那么再向下Object的 发现_proto_为null 还没有找到则报错
如下图
【推荐】国内首个AI IDE,深度理解中文开发场景,立即下载体验Trae
【推荐】编程新体验,更懂你的AI,立即体验豆包MarsCode编程助手
【推荐】抖音旗下AI助手豆包,你的智能百科全书,全免费不限次数
【推荐】轻量又高性能的 SSH 工具 IShell:AI 加持,快人一步
· AI与.NET技术实操系列(二):开始使用ML.NET
· 记一次.NET内存居高不下排查解决与启示
· 探究高空视频全景AR技术的实现原理
· 理解Rust引用及其生命周期标识(上)
· 浏览器原生「磁吸」效果!Anchor Positioning 锚点定位神器解析
· 全程不用写代码,我用AI程序员写了一个飞机大战
· DeepSeek 开源周回顾「GitHub 热点速览」
· 记一次.NET内存居高不下排查解决与启示
· 物流快递公司核心技术能力-地址解析分单基础技术分享
· .NET 10首个预览版发布:重大改进与新特性概览!