(图解)Js原型和原型链,看完不懂你打我!


原型 prototype
先跟各位小伙伴说一下,原型不难理解的,难的是运用,这节我们先去理解什么是原型,希望配合上图解,大家能很轻松理解,步入正题。

要彻底了解原型我们要知道以下几点:

    我们所创建的每一个函数,解析器都会向函数中添加一个属性 prototype;这个 prototype 属性对应着一个对象,这个对象就是我们所谓的原型对象;该函数我们以构造函数调用时,它所创建的对象中都会有一个隐含属性 _ _ proto _ _;_ _ proto _ _ 这个属性也会指向该构造函数的原型对象;

综上所述:原型对象就相当于一个公共区域,该函数的prototype属性和该构造函数的 _ _ proto _ _ 属性,都指向 原型对象 。

图解(配合着下面的代码更香哦)

(图解)Js原型和原型链,看完不懂你打我!

代码解析

			// 1.函数
function MyClass(){
}
// 2.通过该函数创建两个 构造函数 fn1 fn2
var fn1=new MyClass();
var fn2=new MyClass();

// 3.统一打印结果
console.log(MyClass.prototype);//打印是一个对象
console.log(fn1.__proto__);//打印是一个对象
console.log(fn2.__proto__);//打印是一个对象
console.log(MyClass.prototype==fn1.__proto__);//true 两者相同
console.log(MyClass.prototype==fn2.__proto__);//true 两者相同

// 向MyClass的原型中添加属性a
MyClass.prototype.a=123;
// 通过该函数创建两个 构造函数 都可以访问其属性
console.log(fn1.a);// 123
console.log(fn2.a);// 123
// 结论:通过该函数创建两个 构造函数 都可以访问该函数原型里添加的属性和方法;

结论: 每一个函数都有一个prototype属性 ,而该函数以构造函数创建的每一个对象都有一个 _ _ proto _ _ 属性。prototype属性对应的值就是原型对象,并且该函数以构造函数创建的对象 _ _ proto _ _ 属性指向原型对象。

用途:

    试想一下,如果我们在全局创建一个函数,在多人协作开发的情况下如果函数命名相同,后一个函数就会覆盖前一个函数,所以是将包含特定类型的所有实例共享的属性和方法封装在原型对象,这个原型对象就是用来给实例共享属性和方法的。如果一个函数里面写了很多属性和方法,该创建许多个对象的时候,每个对象下都会包含每一个属性和方法,会造成资源的浪费,而把方法写在该函数的prototype属性中,每一个对象不仅可以调用,而且也减少了资源的浪费。

原型链

上面大家了解了原型,现在去了解原型链就会轻松很多。

简单来说就是再找一个属性或者方法时,该级不存在,通过原型对象逐级向上查找的一个过程。
代码逻辑

		// 创建一个构造函数
function MyClass(){
}
var fn=new MyClass();

// 向MyClass的原型中添加一个name属性
MyClass.prototype.name="我是原型的小破船";
console.log(fn.name);// 打印 我是原型的小破船

// 使用对象的hasOwnProperty()来检查对象自身是否含有该属性
console.log(fn.hasOwnProperty("name"));// false
console.log(fn.__proto__.hasOwnProperty("name"));// true
// name属性在fn中是不存在的,而是存在于原型对象中。

// 原型中并没有hasOwnProperty()方法是怎么来的呢?
console.log(fn.__proto__.hasOwnProperty("hasOwnProperty"));// false
// 原型中不存在
console.log(fn.__proto__.__proto__.hasOwnProperty("hasOwnProperty")); // true
// 原型的原型中存在
console.log(fn.__proto__.__proto__.__proto__); // null
// 原型的原型中的原型为null

图片解析

(图解)Js原型和原型链,看完不懂你打我!
首先需要了解:只要是对象就有原型,原型对象也是对象,所以它也有原型,

结论: 当我们使用一个对象的属性或方法时,会先在自身中查找,如果自身有则使用,如果没有则去原型对象中寻找,如果原型对象中有则使用,如果没有则去原型对象的原型对象中查找,如果一直未找到,直到找到object对象的原型(object可以理解为是对象的鼻祖),object对象的原型没有原型为null。所以这个逐级向上查找的过程形成的链式结构,就是原型链!!!

小伙伴们如果看了感觉可以理解,麻烦帮忙点个赞哦,如果还有不懂的地方可以留言哦,共同学习,共同进步,不喜就喷,谢谢!

原创:https://www.panoramacn.com
源码网提供WordPress源码,帝国CMS源码discuz源码,微信小程序,小说源码,杰奇源码,thinkphp源码,ecshop模板源码,微擎模板源码,dede源码,织梦源码等。

专业搭建小说网站,小说程序,杰奇系列,微信小说系列,app系列小说

(图解)Js原型和原型链,看完不懂你打我!

免责声明,若由于商用引起版权纠纷,一切责任均由使用者承担。

您必须遵守我们的协议,如果您下载了该资源行为将被视为对《免责声明》全部内容的认可-> 联系客服 投诉资源
www.panoramacn.com资源全部来自互联网收集,仅供用于学习和交流,请勿用于商业用途。如有侵权、不妥之处,请联系站长并出示版权证明以便删除。 敬请谅解! 侵权删帖/违法举报/投稿等事物联系邮箱:2640602276@qq.com
未经允许不得转载:书荒源码源码网每日更新网站源码模板! » (图解)Js原型和原型链,看完不懂你打我!
关注我们小说电影免费看
关注我们,获取更多的全网素材资源,有趣有料!
120000+人已关注
分享到:
赞(0) 打赏

评论抢沙发

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址

您的打赏就是我分享的动力!

支付宝扫一扫打赏

微信扫一扫打赏