涉及知识点:(1)原型的引入(2)构造函数、原型对象和实例对象之间的关系(3)__proto__和prototype的理解

直接举例:在自定义构造函数创建对象时,因为创建的对象使用的不是同一个方法,所以创建对象越多,就会开辟大量空间造成内存浪费。

验证:在<script>标签中写如下代码,浏览器中打开,按F12可以看到所创建的对象都拥有各自的方法。其中的console.dir(per);可以把这个对象的结构显示出来。

​                   

而且将方法放在构造函数外部来指向同一个函数也不好,虽然可以使用相同方法但是在外部函数定义时容易引起变量命名冲突的问题,<script>中写入代码,验证如下:

​                

所以引入原型的概念,在<script>中写入代码,控制台看到对象的各自的方法是相同的(true),共享的,就不会开辟多余空间造成内存浪费。

​   

那么这就有一个问题:实例对象中根本没有eat方法,但是能够使用,这是为什么?要明白这个问题,首先需要知道一些知识。就是要知道__proto__和prototype之间的关系,以及构造函数、原型对象和实例对象三者之间的关系。先上图再解释!

1、在JS里,万物皆对象。方法(Function)是对象,方法的原型(Function.prototype)是对象。

2、JS里所有的对象都有__proto__属性,也可称为隐式原型,指向构造该对象的构造函数的原型。保证了实例能够访问在构造函数原型中定义的属性和方法。

3、只有函数function才具有prototype属性。这个属性是一个指针,指向一个对象,这个对象的用途就是包含所有实例共享的属性和方法(我们把这个对象叫做原型对象)。原型对象也有一个属性,叫做constructor,这个属性包含了一个指针,指回原构造函数。

4、实例对象的__proto__和构造函数中的prototype相等--->true。又因为实例对象是通过构造函数来创建的,构造函数中有原型对象prototype,实例对象的__proto__指向了构造函数的原型对象prototype。对象.proto=构造器.prototype。

5、实例对象中有__proto__这个属性,叫原型,也是一个对象,这个属性是给浏览器使用,不是标准的属性,__proto__也可以叫原型对象

构造函数中有prototype这个属性,叫原型,也是一个对象,这个属性是给程序员使用,是标准的属性,prototype可以叫原型对象

接下来对上图进行解析(重点):由Person.prototype.eat=function () 知道eat方法不在实例对象中,而是在构造函数的原型对象中,但是实例对象可以使用eat方法,是因为实例对象的原型__proto__指向了原型对象,原型对象中有eat方法,所以p1就可以使用eat方法而原型对象是在构造函数里面的prototype属性中。

以上内容属于个人学习总结,便于以后的回忆复习,有误之处,还望指正。

JavaScript中通过原型添加方法,解决数据共享问题,节省内存空间的更多相关文章

  1. JavaScript中给对象添加方法

    在JavaScript中,我们经常要给已定义的对象添加一些方法,如下:    function circle(w,h){      this.width=w;      this.height=h; ...

  2. JS高级---原型的引入,原型添加的方法解决数据共享

    原型的引入:解决:通过构造函数创建对象带来的问题,即浪费内存(一个对象开一个内存,多个对象开多个内存) 通过原型来添加方法,解决数据共享,节省内存空间 <script> function ...

  3. 图解JavaScript中的原型链

    转自:http://www.jianshu.com/p/a81692ad5b5d typeof obj 和 obj instanceof Type 在JavaScript中,我们经常用typeof o ...

  4. 【转】JavaScript中的原型和继承

    请在此暂时忘记之前学到的面向对象的一切知识.这里只需要考虑赛车的情况.是的,就是赛车. 最近我正在观看 24 Hours of Le Mans ,这是法国流行的一项赛事.最快的车被称为 Le Mans ...

  5. javascript中的原型继承

    在Javascript面向对象编程中,原型继承不仅是一个重点也是一个不容易掌握的点.在本文中,我们将对Javascript中的原型继承进行一些探索. 基本形式 我们先来看下面一段代码: <cod ...

  6. 前端知识体系:JavaScript基础-原型和原型链-理解原型设计模式以及 JavaScript中的原型规则

    理解原型设计模式以及 JavaScript中的原型规则(原文地址) 1.原型对象:我们创建的每一个函数(JavaScript中函数也是一个对象)都有一个原型属性 prototype,原型属性实质上是一 ...

  7. JavaScript中的原型、原型链、原型模式

    今天,咱来聊聊JavaScript中的原型跟原型链 原型跟原型模式 这一块的知识,主要是设计模式方面的. 首先,我们知道JavaScript是面向对象的.既然是面向对象,那它自然也有相应的类跟对象等概 ...

  8. 理解JavaScript中的原型继承(2)

    两年前在我学习JavaScript的时候我就写过两篇关于原型继承的博客: 理解JavaScript中原型继承 JavaScript中的原型继承 这两篇博客讲的都是原型的使用,其中一篇还有我学习时的错误 ...

  9. JavaScript中事件绑定的方法总结

    最近收集了一些关于JavaScript绑定事件的方法,汇总了一下,不全面,但是,希望便于以后自己查看. JavaScript中绑定事件的方法主要有三种: 1 在DOM元素中直接绑定 2 JavaScr ...

随机推荐

  1. background-size属性

    background-size:属性有 auto:length :百分比 length 如:10px 20px 固定的 或者是写成一个 ,10px  另外一个就默认为 auto; 写成百分比的形式 是 ...

  2. selenium自动化测试实例

    11.1使用JavaScripExecutor单击元素 被测试网页:http://www.sogou.com Java代码 public class NewTest {      WebDriver  ...

  3. SAE上无法加载css等文件

    如果你的SAE用到了这些文件,你会发现本地虽然能够运行成功,但是SAE上却无法加载. 其实就是地址发生了变化,我们告诉SAE这些东西怎么找就可以了. 例如我的css和js文件放在了app/static ...

  4. Codeforces Round #408 (Div. 2) B

    Description Zane the wizard is going to perform a magic show shuffling the cups. There are n cups, n ...

  5. 莫比乌斯函数 && HDU-1695

    莫比乌斯函数定义: $$\mu(d)=\begin{cases}1 &\text{d = 1}\\(-1)^r &\text{$d=p_1p_2...p_r,其中p_i为不同的素数$} ...

  6. Marriage Ceremonies LightOJ - 1011

    Marriage Ceremonies LightOJ - 1011 常规状压dp.popcount(S)表示S集合中元素数量.ans[S]表示S中的女性与前popcount(S)个男性结婚的最大收益 ...

  7. Math Show CodeForces - 846B

    题目 题意: 有n个任务,每个任务有k个子任务,有m的时间来完成任务.每个任务的第i个子任务需要时间都是ti.完成一个子任务获得一分,完成一个大任务的所有子任务额外得一分.问如何在时间不超过m的情况下 ...

  8. Mysql的外键

    概念:如果一个实体A的某一字段,刚好指向或引用另一个实体B的主键,那么实体A的这个字段就叫作外键,所以简单来说,外键就是外面的主键,就是其他表的主键. 例: 以上的学生表的班级字段,就是一个外键! 其 ...

  9. android动画(1)各种动画属性表,简单代码,xml配置

    1.动画的属性表 1.1 常用属性 它们可以通过代码setXXX,getXXX,也可在xml中配置. 属性[类型] 功能 备注 Duration[long] 属性为动画持续时间 时间以毫秒为单位 fi ...

  10. 快速分页:jsp标签pager-taglib

    一:简介 Pager-taglib,支持多种风格的分页显示.实际上它是一个Jsp标签库,为在JSP上显示分页信息而设计的一套标签,通过这些标签的不同的组 合,会形成多种不一样的分页页面,风格各异.它既 ...