一个对象就是一个属性集合,并拥有一个独立的prototype(原型)对象。这个prototype可以是一个对象或 者null。

一个对象的prototype是以内部的[[Prototype]]属性来引用的。但是,在示意图里边 我们将会使用__<internal-property>__下划线标记来替代两个括号,对于prototype对象来说是:__proto__。

对于以下代码:

var foo = {

  x: 10,

  y: 20

};

我们拥有一个这样的结构,两个明显的自身属性和一个隐含的__proto__属性,这个属性是对foo原型对象的引用:

这些prototype有什么用?让我们以原型链(prototype chain)的概念来回答这个问题。

原型对象也是简单的对象并且可以拥有它们自己的原型。如果一个原型对象的原型是一个非null的引用,那么以此类 推,这就叫作原型链。

原型链是一个用来实现继承和共享属性的有限对象链。

考虑这么一个情况,我们拥有两个对象,它们之间只有一小部分不同,其他部分都相同。显然,对于一个设计良好的 系统,我们将会重用相似的功能/代码,而不是在每个单独的对象中重复它。在基于类的系统中,这个代码重用风格叫 作类继承-你把相似的功能放入类A中,然后类 B和类 C继承类 A,并且拥有它们自己的一些小的额外变动。

ECMAScript中没有类的概念。但是,代码重用的风格并没有太多不同(尽管从某些方面来说比基于类(class-based) 的方式要更加灵活)并且通过原型链来实现。这种继承方式叫作委托继承(delegation based inheritance)(或者,更贴 近ECMAScript一些,叫作原型继承(prototype based inheritance))。

跟例子中的类A,B,C相似,在ECMAScript中你创建对象:a,b,c。于是,对象a中存储对象b和c中通用的部分。然 后b和c只存储它们自身的额外属性或者方法。

var a = { x: 10, calculate: function (z) { return this.x + this.y + z } };
var b = { y: 20, __proto__: a };
var c = { y: 30, __proto__: a };
// call the inherited method b.calculate(30); // 60 c.calculate(40); // 80

我们看到b和c访问到了在对象a中定义的calculate方法。这是通过原型链实现的。

规则很简单:如果一个属性或者一个方法在对象自身中无法找到(也就是对象自身没有一个那样的属性),然后它会 尝试在原型链中寻找这个属性/方法,

如果这个属性在原型中没有查找到,那么将会查找这个原型的原型,以此类推, 遍历整个原型链(当然这在类继承中也是一样的,当解析一个继承的方法的时候-我们遍历class链( class chain))。第一个被查找到的同名属性/方法会被使用。因此,一个被查找到的属性叫作继承属性。如果在遍历了整个 原型链之后还是没有查找到这个属性的话,返回undefined值。
注意,继承方法中所使用的this的值被设置为原始对象,而并不是在其中查找到这个方法的(原型)对象。也就是, 在上面的例子中this.y取的是b和c中的值,而不是a中的值。但是,this.x是取的是a中的值,并且又一次通过原型 链机制完成。

如果没有明确为一个对象指定原型,那么它将会使用__proto__的默认值 -Object.prototype。Object.prototype对象自身也有一个__proto__属性,这是原型链的终点并且值为null。
下一张图展示了对象a,b,c之间的继承层级:

注意: ES5标准化了一个实现原型继承的可选方法,即使用Object.create函数:

var b = Object.create(a, {y: {value: 20}});

var c = Object.create(a, {y: {value: 30}});

_proto_理解的更多相关文章

  1. 先从_proto_下手理解原型--原型学习(一)

    给自己关于原型的学习分了一个大类,主要跟踪学习js的原型.--来自<JavaScript面向对象编程指南>的笔记,这本书难度适中,适合我们这种js基础不牢的人学习. 原型这块有两个属性:p ...

  2. _proto_ 和prototype自己的理解

    对象(obj)并不具有prototype属性,只有函数(function)才有prototype属性 1.在JS里,万物皆对象. 方法(Function)是对象,方法的原型(Function.prot ...

  3. JS原型链中的prototype与_proto_的个人理解与详细总结

    一直认为原型链太过复杂,尤其看过某图后被绕晕了一整子,今天清理硬盘空间(渣电脑),偶然又看到这图,勾起了点回忆,于是索性复习一下原型链相关的内容,表达能力欠缺逻辑混乱别见怪(为了防止新人__(此处指我 ...

  4. 关于JS中原型链中的prototype与_proto_的个人理解与详细总结

    一直认为原型链太过复杂,尤其看过某图后被绕晕了一整子,今天清理硬盘空间(渣电脑),偶然又看到这图,勾起了点回忆,于是索性复习一下原型链相关的内容,表达能力欠缺逻辑混乱别见怪(为了防止新人__(此处指我 ...

  5. JS中原型链中的prototype与_proto_的个人理解与详细总结(**************************************************************)

    一直认为原型链太过复杂,尤其看过某图后被绕晕了一整子,今天清理硬盘空间(渣电脑),偶然又看到这图,勾起了点回忆,于是索性复习一下原型链相关的内容,表达能力欠缺逻辑混乱别见怪(为了防止新人__(此处指我 ...

  6. JS中原型链中的prototype与_proto_的个人理解与详细总结

    1.对象的内部属性[[prototype]]和属性__proto__:每个对象都具有一个名为__proto__的属性: 2.函数的属性prototype:每个构造函数(构造函数标准为大写开头,如Fun ...

  7. 对JavaScript闭包和原型理解

    最近在学js脚本的一些东西觉得里面有2个知识点比较难理解所以做了如下总结. 1.闭包 简单的理解:一个函数a ,内部有个函数b,那么这个函数b当被作为a函数的返回值得时候被外部的全局变量引用了,那么这 ...

  8. 深入理解JavaScript系列:史上最清晰的JavaScript的原型讲解

    一说起JavaScript就要谈的几个问题,原型就是其中的一个.说了句大话,史上最清晰.本来是想按照大纲式的行文写一下,但写到后边感觉其实就一个概念,没有什么条理性,所以下面就简单按照概念解释的模式谈 ...

  9. 简单理解javascript的原型prototype

    原型和闭包是Js语言的难点,此文主要讲原型. 每一个方法都有一个属性是 prototype 每一个对象都有一个属性是 _proto_ 一旦定义了原型属性或原型方法,则所有通过该构造函数实例化出来的所有 ...

随机推荐

  1. 暑期培训7日游解题思路(day1~day3)

    暑期培训7日游解题思路(day1~day3) day1 第一天,王聿中老师出的题目比较简单,T1很水,T2是个简单的DP,T3还是有一点意思的.在网格图中删掉若干条边,使得所有格子都联通,求删掉的边的 ...

  2. pgrep

    优势:可以只显示进程号 pgrep -l 显示进程名

  3. vuejs简单介绍特点

    官网:https://cn.vuejs.org/ vue是一个渐进式的框架, 是一个轻量级的框架, 也不算是一个框架, 他核心只关注图层, 是一个构建数据驱动的web界面,易于上手, 还便于于第三方库 ...

  4. 关于linux系统CPU篇--->不容易发现的占用CPU较高进程

    1.系统的CPU使用率,不仅包括进程用户态和内核态的运行,还包括中断处理,等待IO以及内核线程等等.所以,当你发现系统的CPU使用率很高的时候,不一定能找到相对应的高CPU使用率的进程 2.案例分析, ...

  5. 码云和git

    第一步: 码云上注册: 第二部: 创建项目;根据需求,哒哒哒全部填完 第三部: 设置公钥(重点来了,头晕) 1. 打开git终端 git Bash 2.进入.ssh目录 输入命令 cd ~/.ssh ...

  6. python中的列表

    1.  列表是什么,他可以用来做什么呢?当你存在这样的疑问,就往下看吧:) 列表是由一系列按特定顺序排列的元素组成的.在Python中,用[]来表示列表,并用逗号来分隔其中的元素. 我们可以创建包含字 ...

  7. centos6/7破解root密码的操作

    Centos 6 1.开机按“Esc”键 2.按e键进入编辑模式后,选择Kernel /vmlinuz-2.6.92......项 3.进入该编辑模式后,在quiet后面输入simple或者数字1后, ...

  8. Hibernate一级缓存和二级缓存详解

    (1)一级缓存 是Session级别的缓存,一个Session做了一个查询操作,它会把这个操作的结果放在一级缓存中,如果短时间内这个session(一定要同一个session)又做了同一个操作,那么h ...

  9. spring框架-jdbc

    一.实体层的不同名字    entity 实体类 :就是和数据库表一一对应的JavaBean  pojo 简单的java对象:任何应用场景的JavaBean  po 持久化对象 :就是和数据库表一一对 ...

  10. .NET Core Agent

    .NET Core Agent 熟悉java的朋友肯定知道java agent,当我看到java agent时我很是羡慕,我当时就想.net是否也有类似的功能,于是就搜索各种资料,结果让人很失望.当时 ...