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 = {} //原型对象（原型）

2. 每个构造函数实例 f (广义上说是每个对象，实例对象也是对象)都拥有一个内部__proto__属性指针（除了null以外），指向原型对象（即原型）（__proto__也叫做实例对象的隐式原型）

	var f = new F();//f是构造函数F的实例化对象
	f = {
		__proto__:{}
	}
	f.__proto__ = {} //原型对象（原型）

3. 原型：每个对象都会从原型中继承一些公用的属性和方法

	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
	}

2. 由于实例对象没有constructor属性，因此会去原型上查找

	//原型对象才拥有constructor属性，实例对象上没有
	f.constructor === f.__proto__.constructor === F.prototype.constructor
	f.__proto__.constructor === F;
	//因为建立了这层链接，这是实例对象f主动找到其构造函数F的方式

图形篇（从网上找的一张图，便于理解）
参考https://blog.csdn.net/cuckooii/article/details/106229681?utm_medium=distribute.pc_relevant.none-task-blog-baidujs_title-0&spm=1001.2101.3001.4242

（二） 原型链

理解

1. 当读取实例对象（或任意一个对象）的属性时
2. 如果找不到，就会去其原型上查找
3. 再找不到，就去原型对象的原型上查找，直到顶层为止
4. 这样构成的实例与其原型间一层层的链条关系即称为原型链
5. 原型链是有终点的，不会一直找下去。

//当
Object.prototype.__proto__ === null时，
//查找结束，返回undefined。

（三）总结表达

说说什么是原型与原型链？
原型：

	//这里面试时可以写出来也可以自己心里默想
	F.prototype === f.__proto__;
	f.__proto__.constructor === F;

• 每创建一个构造函数都会有一个prototype，指向原型对象
• 构造函数通过new实例化不同的实例对象
• 每个（实例）对象都有__proto__属性，指向它的原型对象（其实都是同一个）
• prototype原型对象里的constructor属性指向构造函数
• prototype原型对象是一个公共容器，同一个构造函数的所有实例化对象都可以访问

原型链：

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

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