涉及知识点:(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. E20180422-hm

    tint n. 浅色; 色彩,色泽; 气息,迹象,痕迹 vt. 染色; 着色于…; 染(发) introduce vt. 介绍; 引进; 提出; 作为…的开头; variation  n. 变化,变动 ...

  2. bzoj 4197: [Noi2015]寿司晚宴【状压dp】

    一个数内可能多个的质因数只有小于根号n的,500内这样的数只有8个,所以考虑状压 把2~n的数处理出小于根号500的质因数集压成s,以及大质数p(没有就是1),然后按p排序 根据题目要求,拥有一个质因 ...

  3. IT兄弟连 ElasticSearch在Linux下的安装和启动、常见问题解决

    环境要求 ·      Linux(Centos 7) ·      ElasticSerach 6.6.1 ES下载 ·      下载地址:https://www.elastic.co/cn/do ...

  4. 第一篇 .NET高级技术之索引器

    基础知识补充 索引 器 没有名字 ,索引器的内部本质 (ILSpy的IL模式下看)类型 this[参数]{get;set;} 可以是只读或者只写(在get或者set前加上private) 字符串是只读 ...

  5. HDU6446(树上、排列的贡献计算)

    关键点在于:全排列中,任意两点u.v相邻的次数一定是(n - 1)! * 2次,即一个常数(可以由高中数学知识计算,将这两个点捏一起然后全排列然后乘二:或者用n! / C(2, n)). 这之后就好算 ...

  6. UVa 12186 Another Crisis 工人的请愿书

    c表示某上司上报的最少请愿下属,k表示总下属c=0.01T*k=kT/100(0.01T*k是整数)c=[0.01T*k]+1=[kT/100]+1(0.01T*k不是整数) kT=100 c=1 k ...

  7. 基于CentOS6.5下snort+barnyard2+base的入侵检测系统的搭建(图文详解)(博主推荐)

    为什么,要写这篇论文? 是因为,目前科研的我,正值研三,致力于网络安全.大数据.机器学习研究领域! 论文方向的需要,同时不局限于真实物理环境机器实验室的攻防环境.也不局限于真实物理机器环境实验室的大数 ...

  8. UGUI_屏幕适配

    引用:http://www.xuanyusong.com/archives/3278#comments 1.可以选择的有三种: 1.Screen Space – overlay  此模式不需要UI摄像 ...

  9. laravel 权限管理 常用命令

    use Spatie\Permission\Models\Role;use Spatie\Permission\Models\Permission; $role = Role::create(['na ...

  10. [转]Android APK签名原理及方法

    准备知识:数据摘要 这个知识点很好理解,百度百科即可,其实他也是一种算法,就是对一个数据源进行一个算法之后得到一个摘要,也叫作数据指纹,不同的数据源,数据指纹肯定不一样,就和人一样. 消息摘要算法(M ...