涉及知识点:(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. codeforces 611C

    题意: 给你一个矩阵,矩阵里有" . "和" # "," . "表示空的," # "表示禁止的. 多米诺骨牌将占据正好有 ...

  2. poj 1988 Cube Stacking【带权并查集】

    设s[x]为x所在栈里的个数,c[x]表示x下面有几个,合并的时候直接合并s,然后路径压缩的时候更新c即可 #include<iostream> #include<cstdio> ...

  3. bzoj 2120: 数颜色【带修改莫队】

    比较裸的带修莫队,对每个修改操作记一下它修改的位置修改前的颜色 然后正常莫队,每次对修改操作时间倒流一下即可 #include<iostream> #include<cstdio&g ...

  4. 最小公倍数的最小和(Minimum Sum LCM )

    #include <cstdio> #include <cstring> #include <algorithm> #include <cmath> u ...

  5. Hexo瞎折腾系列(1) - 准备工作与简单美化

    前言 网上有不少相关的帖子,不过版本会比较旧,而不同版本可能存在代码不同的问题,不过大部分还是大同小异,本系列就不啰嗦重复了,基本只会按照本人所使用的版本以及个人所使用到的内容来进行介绍. 该系列是对 ...

  6. Hdu 5442 Favorite Donut (2015 ACM/ICPC Asia Regional Changchun Online 最大最小表示法 + KMP)

    题目链接: Hdu 5442 Favorite Donut 题目描述: 给出一个文本串,找出顺时针或者逆时针循环旋转后,字典序最大的那个字符串,字典序最大的字符串如果有多个,就输出下标最小的那个,如果 ...

  7. MAX458X多通道模拟切换开关(类似74HC4051)

  8. HDU 5778 abs 数学

    http://acm.hdu.edu.cn/showproblem.php?pid=5778 这题的意思就是找离x最近的一个数y,且y是一个完全平方数,还是所有质因子都只能出现两次的完全平方数 一开始 ...

  9. [转]自定义ASP.NET MVC JsonResult序列化结果

    本文转自:http://blog.163.com/luckcq@yeah/blog/static/17174770720121293437119/ 最近项目中前台页面使用EasyUI的jQuery插件 ...

  10. Redis学习笔记1-安装配置

    一.Redis安装 Redis官网:http://www.redis.io/download 注意:版本号2.4,2.6,2.8等偶数结尾为稳定版,2.5等为非稳定版本,生成环境应该使用稳定版 下载解 ...