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

时间:2020-9-21 作者:admin

原型 prototype

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

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

  1. 我们所创建的每一个函数,解析器都会向函数中添加一个属性 prototype
  2. 这个 prototype 属性对应着一个对象,这个对象就是我们所谓的原型对象;
  3. 该函数我们以构造函数调用时,它所创建的对象中都会有一个隐含属性 _ _ proto _ _
  4. _ _ 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 _ _ 属性指向原型对象。

用途:

  1. 试想一下,如果我们在全局创建一个函数,在多人协作开发的情况下如果函数命名相同,后一个函数就会覆盖前一个函数,所以是将包含特定类型的所有实例共享的属性和方法封装在原型对象,这个原型对象就是用来给实例共享属性和方法的。
  2. 如果一个函数里面写了很多属性和方法,该创建许多个对象的时候,每个对象下都会包含每一个属性和方法,会造成资源的浪费,而把方法写在该函数的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。所以这个逐级向上查找的过程形成的链式结构,就是原型链!!!

小伙伴们如果看了感觉可以理解,麻烦帮忙点个赞哦,如果还有不懂的地方可以留言哦,共同学习,共同进步,不喜就喷,谢谢!
声明:本文内容由互联网用户自发贡献自行上传,本网站不拥有所有权,未作人工编辑处理,也不承担相关法律责任。如果您发现有涉嫌版权的内容,欢迎进行举报,并提供相关证据,工作人员会在5个工作日内联系你,一经查实,本站将立刻删除涉嫌侵权内容。