前端面试之3-9 原型链(一)

前端面试之3-9 原型链(一)_第1张图片
前端面试之3-9 原型链(一)_第2张图片

第一类:字面量,new声明一个对象。当然也可以归于下面一类,构造函数来做。字面量时候,默认原型链指向object。

第二类:显示构造函数

第三类:第三种大多人不熟悉。




前端面试之3-9 原型链(一)_第4张图片


o1,o11,o2,o3这样的对象都是实例。new连接的函数,都是构造函数。

构造函数,使用new运算符,生成实例。构造函数也是函数,反过来讲,任何一个函数只要new一下,就成了构造函数,不用new就是普通函数。构造函数,也是函数。

函数都有一个prototype 属性,这是声明函数时,自动加上的,也就是原型对象。

原型对象中有一个constructor,构造器,会默认声明你构造的那个函数。

前端面试之3-9 原型链(一)_第5张图片
这个是我之前记忆的一个图

演示一下工作原理:

前端面试之3-9 原型链(一)_第6张图片

这里o3是实例,M是构造函数。

Object.create() 是E5的一个新特性哦,其实可以理解为继承一个对象,create方法有两个参数

第一个参数是要继承的原型,如果不是一个子函数,可以传一个null,第二个参数是对象的属性描述符,这个参数是可选的。

一个是要继承的对象的原型,如果没有就传null,第二个参数是对象的属性描述符,这些都是E5才有的~

var a =newObject();// 创建一个对象,没有父类哦

var b = Object.create(a.prototype);// b 继承了a的原型


前端面试之3-9 原型链(一)_第7张图片

这里o3是一个对象, M是构造函数,M.prototype是一个空对象,空对象里面有一个属性,constructor,构造器,指向一个函数。现在判断一下,这个constructor:function(name),这里的constructor指向了一个函数,现在判断这个函数是不是严格等于构造函数M

前端面试之3-9 原型链(一)_第8张图片

看一下实例o3和函数M的原型对象关系:


前端面试之3-9 原型链(一)_第9张图片


原型链:从一个实例对象往上找构造这个实例的相关联的对象。

上摘抄的某段总结:

函数的原型对象constructor默认指向函数本身,原型对象除了有原型属性外,为了实现继承,还有一个原型链指针__proto__,该指针指向上一层的原型对象,而上一层的原型对象的结构依然类似,这样利用__proto__一直指向Object的原型对象上,而Object的原型对象用Object.prototype.__proto__ = null表示原型链的最顶端,如此变形成了javascript的原型链继承,同时也解释了为什么所有的javascript对象都具有Object的基本方法。

原型对象的用途是为每个实例对象存储共享的方法和属性,它仅仅是一个普通对象而已。并且所有的实例是共享同一个原型对象,因此有别于实例方法或属性,原型对象仅有一份。 


前端面试之3-9 原型链(一)_第10张图片

26行之后,还要理解。意思不是很好懂

前端面试之3-9 原型链(一)_第11张图片


通过原型链的方式,找到原型对象, 方法被实例共享。

实例上没有找到方法,就会通过_proto_往上找,找到原型对象,原型对象上没有这个方法,那么继续像前面一样往上找。以此类推,一直到找到该方法或属性。如果一直没找到,返回,没找到。否则就返回相应的方法。

对象没有prototype的,

只有实例对象有_proto_,但是函数也会有_proto_,因为函数也是对象啊。但是它的这个属性是

上面的M是构造函数,同时也是函数,也是一个对象。也就是说它也是Function的实例,因此它的_proto_指向Function.prototype。


前端面试之3-9 原型链(一)_第12张图片


前端面试之3-9 原型链(一)_第13张图片

实例对象,instanceof引用的是构造函数的prototype这个对象。所以实例对象的这个_proto_引用的是原型对象。 

其实实例对象的_proto_的指向就是最右边的原型。

另外注意一下,实例对象有一个constructor属性,指向构造函数,同时原型也有一个constructor属性指向构造函数。所以可以有:instance.constructor == instance.__proto__.constructor 

你可能感兴趣的:(前端面试之3-9 原型链(一))