阅读 903

web前端面试之——原型与原型链

原型与原型链

(一)原型

==理解与记忆核心==:

F.prototype === f.__proto__ ===原型对象(原型)
f.constructor === F.prototype.constructor === F === f.__proto__.constructor
复制代码

解释

  1. 每个函数F(也是对象,js中一切皆对象)在初始化时都拥有一个prototype属性,该属性指向原型对象(即原型)
	F = new Function();
	F = {
		prototype:{}
	};
	F.prototype = {} //原型对象(原型)
复制代码
  1. 每个构造函数实例 f (广义上说是每个对象,实例对象也是对象)都拥有一个内部__proto__属性指针(除了null以外),指向原型对象(即原型)(__proto__也叫做实例对象的隐式原型)
	var f = new F();//f是构造函数F的实例化对象
	f = {
		__proto__:{}
	}
	f.__proto__ = {} //原型对象(原型)
复制代码
  1. 原型:每个对象都会从原型中继承一些公用的属性和方法
	var f1 = new F('mike');
	var f2 = new F('jack');

	f1.__proto__ === f2.__proto__ ==={};//里面存放了一些公有的属性和方法
复制代码

小扩展

1.原来的js中是没有继承的概念的,对象之间( f1和f2 )无法共享属性和方法。 2.每当我们新建一个对象时,都会为其分配一块新的内存,这是极大的资源浪费。 3.考虑到这一点,JavaScript 的设计者 Brendan Eich 决定为构造函数设置一个属性。 4.这个属性指向一个对象,所有实例对象需要共享的属性和方法,都放在这个对象里面,那些不需要共享的属性和方法,就放在构造函数里面。 5.实例对象一旦创建,将自动引用这个对象的属性和方法。也就是说,实例对象的属性和方法,分成两种,一种是不共享的,另一种是共享的公共对象。这个对象就是原型(prototype)对象,简称为原型。

  1. 原型对象都拥有一个constructor属性指针,指向构造函数 F 本身
	var f = new F();
	f.__proto__ = {
		constructor:F
	}
复制代码
  1. 由于实例对象没有constructor属性,因此会去原型上查找
	//原型对象才拥有constructor属性,实例对象上没有
	f.constructor === f.__proto__.constructor === F.prototype.constructor
	f.__proto__.constructor === F;
	//因为建立了这层链接,这是实例对象f主动找到其构造函数F的方式
复制代码

图形篇(从网上找的一张图,便于理解) 参考blog.csdn.net/cuckooii/ar… 在这里插入图片描述

(二) 原型链

理解

  1. 当==读取实例对象(或任意一个对象)的属性时==
  2. 如果找不到,就会去其原型上查找
  3. 再找不到,就去原型对象的原型上查找,直到顶层为止
  4. 这样构成的==实例与其原型间一层层的链条关系即称为原型链==
  5. 原型链是有终点的,不会一直找下去。
//当
Object.prototype.__proto__ === null时,
//查找结束,返回undefined。
复制代码

(三)总结表达

说说什么是原型与原型链? 原型:

	//这里面试时可以写出来也可以自己心里默想
	F.prototype === f.__proto__;
	f.__proto__.constructor === F;
复制代码
  • 每创建一个构造函数都会有一个prototype,指向原型对象
  • 构造函数通过new实例化不同的实例对象
  • 每个(实例)对象都有__proto__属性,指向它的原型对象(其实都是同一个)
  • prototype原型对象里的constructor属性指向构造函数
  • prototype原型对象是一个公共容器,同一个构造函数的所有实例化对象都可以访问

原型链

  • 当无法读取对象的属性时,就回去其原型,甚至原型的原型上查找
  • 这样构成的实例与其原型间一层层的链条关系即称为原型链

————————————后续待补充

文章分类
前端
文章标签