`

了解javascript中的prototype与 __proto__

 
阅读更多

我们先来看一个函数。

function person() {

 

}

这个函数我们使用chrome观察其运行情况,可以看到Person有两个属性,一个是prototype,一个是__proto__

。其中prototype是每个函数(只有函数才有这个属性)的属性。而__proto__是js对象的属性,即只要是js对象,都有这个属性。比如

var arr = [],var obj = {}等等,都有__proto__。

如下图所示:



 

那prototype有什么作用呢?

  new 关键字和Person构造器创建的所有的对象都共享prototype上的属性。比如

function person() {

 

}

person.prototype.name='共享名称';

var p = new Person();

var p1 = new Person();

p.name === p1.name //值为true。

这正是原型的意义所在。

那__proto__有什么用呢?

我们继续使用上面的代码做说明:

如果我们调用p.age,那么js就会在p1对象上查找age变量是否存在,如果p对象上不存在该属性,js就会在

p.__proto__属性指向的Person.prototype(p.__proto__===Person.prototype //值为true)上查找,如果Person.prototype上找不到属性,js就会在Person.prototype.__prototype__属性指向的Object.prototype属性上查找。如果该属性上也查找不到,那么p.age值就会为undefined。

通过这个例子应该清楚了__protype__的作用了:正是__prototype__构成了原型链。上面所面试的原型的指向是否正确,可以通过下图得到验证:



 

 

 

  • 大小: 26.6 KB
  • 大小: 55.6 KB
分享到:
评论

相关推荐

    prototype,__proto,constructor

    分析javascript中 prototype __proto__ constructor之间的关系

    Javascript中prototype与__proto__的关系详解

    主要给大家介绍了关于Javascript中prototype与__proto__的关系的相关资料,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧。

    浅谈javascript中的prototype和__proto__的理解

    主要介绍了浅谈javascript中的prototype和__proto__的理解,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧

    javascript 中__proto__和prototype详解

    __proto__是内部原型,prototype是构造器原型(构造器其实就是函数) 构造器的原型(prototype)是一个对象 那什么是构造器呢? 要想创建一个对象,首先要有一个对象构造器,就像php里面一样,要想创建一个对象,...

    TsangTszKin#HexoBlog#prototype、__proto__与constructor1

    它的作用就是当访问一个对象的属性时,如果该对象内部不存在这个属性,那么就会去它的__proto__属性所指向的那个对象(可以理解为父对象)里找,如果父对象也不存

    简单解析JavaScript中的__proto__属性

    主要介绍了JavaScript中的__proto__属性,对于JavaScript中所谓的对象来讲,它指向对象的原型prototype,需要的朋友可以参考下

    JavaScript中__proto__与prototype的关系深入理解

    一、所有构造器/函数的__proto__都指向Function.prototype,它是一个空函数(Empty function) 代码如下: Number.__proto__ === Function.prototype // true Boolean.__proto__ === Function.prototype // true ...

    跟我学习javascript的prototype,getPrototypeOf和__proto__

    一、深入理解prototype, getPrototypeOf和_ proto _ prototype,getPropertyOf和 _ proto _ 是三个用来访问prototype的方法。它们的命名方式很类似因此很容易带来困惑。 它们的使用方式如下: C.prototype: 一般...

    深入浅析JavaScript中prototype和proto的关系

    __proto__:每个对象都有一个名为__proto__的内部隐藏属性,指向于它所对应的原型对象(chrome、firefox中名称为__proto__,并且可以被访问到)。原型链正是基于__proto__才得以形成 (note:不是基于函数对象的属性...

    【JavaScript源代码】怎样用JavaScript实现原型模式.docx

     prototype警告:学习了解原型模式前需先学习原型、原型链、prototype、__proto__、constructor等知识; 实现原型模式 ES5中的API:Object.create(prototype, optionalDescriptorObjects) Object.create()方法...

    图解prototype、proto和constructor的三角关系

    在javascript中,prototype、constructor以及__proto__之间有着“著名”的剪不断理还乱的三角关系,楼主就着自己对它们的浅显认识,来粗略地理理以备忘,有不对之处还望斧正。

    Javascript中获取对象的原型对象的方法小结

    foo.__proto__ == F.prototype); 但是,__proto__属性在IE浏览器中一直到IE11才被支持。 那么在不支持__proto__属性的浏览器中,我们怎么得到对象的原型对象呢?可以通过constructor间接得到。 代码如下: <

    傲娇大少之—【JS的原型,prototype、__proto__、constructor】

    不求甚解 – – liao一下prototype 如果你爱我,就干了这碗热热的毒鸡汤! 在父母的期望面前我们不敢说不行,我们总是用行动告诉他们我们是真的不行。欧耶! 关于prototype,怎么说呢,以前的前端开发是经常用的,...

    【JavaScript源代码】JavaScript中new操作符的原理示例详解.docx

    JavaScript中new操作符的原理示例详解  new的作用是通过构造函数来创建一个实例对象,该实例与原型和构造函数之间的关系如下图所示: 执行 new 操作时会依次经过以下步骤: 1、创建一个空对象  空对象是 Object...

Global site tag (gtag.js) - Google Analytics