JavaScript中通过原型添加方法,解决数据共享问题,节省内存空间
涉及知识点:(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中通过原型添加方法,解决数据共享问题,节省内存空间的更多相关文章
- JavaScript中给对象添加方法
在JavaScript中,我们经常要给已定义的对象添加一些方法,如下: function circle(w,h){ this.width=w; this.height=h; ...
- JS高级---原型的引入,原型添加的方法解决数据共享
原型的引入:解决:通过构造函数创建对象带来的问题,即浪费内存(一个对象开一个内存,多个对象开多个内存) 通过原型来添加方法,解决数据共享,节省内存空间 <script> function ...
- 图解JavaScript中的原型链
转自:http://www.jianshu.com/p/a81692ad5b5d typeof obj 和 obj instanceof Type 在JavaScript中,我们经常用typeof o ...
- 【转】JavaScript中的原型和继承
请在此暂时忘记之前学到的面向对象的一切知识.这里只需要考虑赛车的情况.是的,就是赛车. 最近我正在观看 24 Hours of Le Mans ,这是法国流行的一项赛事.最快的车被称为 Le Mans ...
- javascript中的原型继承
在Javascript面向对象编程中,原型继承不仅是一个重点也是一个不容易掌握的点.在本文中,我们将对Javascript中的原型继承进行一些探索. 基本形式 我们先来看下面一段代码: <cod ...
- 前端知识体系:JavaScript基础-原型和原型链-理解原型设计模式以及 JavaScript中的原型规则
理解原型设计模式以及 JavaScript中的原型规则(原文地址) 1.原型对象:我们创建的每一个函数(JavaScript中函数也是一个对象)都有一个原型属性 prototype,原型属性实质上是一 ...
- JavaScript中的原型、原型链、原型模式
今天,咱来聊聊JavaScript中的原型跟原型链 原型跟原型模式 这一块的知识,主要是设计模式方面的. 首先,我们知道JavaScript是面向对象的.既然是面向对象,那它自然也有相应的类跟对象等概 ...
- 理解JavaScript中的原型继承(2)
两年前在我学习JavaScript的时候我就写过两篇关于原型继承的博客: 理解JavaScript中原型继承 JavaScript中的原型继承 这两篇博客讲的都是原型的使用,其中一篇还有我学习时的错误 ...
- JavaScript中事件绑定的方法总结
最近收集了一些关于JavaScript绑定事件的方法,汇总了一下,不全面,但是,希望便于以后自己查看. JavaScript中绑定事件的方法主要有三种: 1 在DOM元素中直接绑定 2 JavaScr ...
随机推荐
- 基础总结篇之二:Activity的四种launchMode (转载)
转自:http://blog.csdn.net/liuhe688/article/details/6754323 合抱之木,生於毫末:九層之台,起於累土:千里之行,始於足下.<老子> 今天 ...
- ORACLE PL/SQL 实例精解之第二章 通用编程语言基础
通用编程语言基础 2.1PL/SQL编程基础 1. 字符类型:支持四中类型字符:字母,数字,符号和空格,组合一个或多个字符就会创建一个词汇单元 2. 词汇单元 a.标识符必须以字符开头 b.保留字是p ...
- J20170422-hm
ワイルドスクリプト wild script 通配符 シェルスクリプト shell脚本
- 洛谷 - P1309 - 瑞士轮 - 归并排序
https://www.luogu.org/problemnew/show/P1309 一开始写的直接快排没想到真的TLE了. 想到每次比赛每个人前移的量不会很多,但是不知从哪里开始优化. 搜索一下原 ...
- python 之 random 模块、 shutil 模块、shelve模块、 xml模块
6.12 random 模块 print(random.random()) (0,1)----float 大于0且小于1之间的小数 print(random.randint(1,3)) [1,3] 大 ...
- jsp 接收汉字参数乱码
这两天跟汉字问题较上劲了,真是考验基本功 1. ${param.userName} 乱码 解决方法: <%String name = (String)request.getParameter( ...
- IE下png图片黑边问题
png图片在ie8下有黑色边框的情况想必大家都有遇到过吧,那么该怎么解决呢?其实很简单,下面的方法或许对大家有所帮助 background-image:url(******.png)!importan ...
- python实现选择排序
list_1 = [] #先建一个空链表 print('输入排序个数:') n = int(input()) #接收输入个数 for i in range(n): a = input() list_1 ...
- 转 PHP scandir() 函数
实例 列出 images 目录中的文件和目录: <?php $dir = "/images/"; // 以升序排序 - 默认 $a = scandir($dir); // 以 ...
- Appium + python自动化 - 启动app
各种百度将Appium + python的环境搭建好后,开启移动app自动化的探索(基于Android),首先来记录下如何启动待测的app吧! 如何启动app呢?首先要获取包名,然后获取launche ...