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 ...
随机推荐
- JAVA基础--面向对象08
一.final关键字 有的时候不想别人重写我的方法,使用final关键字修饰该方法,final:最后的,最终的,可以修饰类.修饰函数.修饰变量,修饰类:该类不能被继承:直接写在class关键字前面 修 ...
- Hibernate中表与表之间的关联一对多,级联保存和级联删除
1:Hibernate的一对多操作(重点) 一对多映射配置 第一步:创建两个实体类:客户和联系人(例)以客户为一,联系人为多: package com.yinfu.entity; public cla ...
- 51Nod 1649 齐头并进
#include <iostream> #include <algorithm> #include <cstring> //两遍迪杰斯特拉 #define INF ...
- 交表(Send a Table)
#include<stdio.h> #include<string.h> #define N 50010 int phi[N],n,sum[N]; void phi_table ...
- spring boot :error querying database. Cause: java.lang.IllegalArgumentException: dataSource or dataSourceClassName or jdbcUrl is required
配置多个数据源启动报错,error querying database. Cause: java.lang.IllegalArgumentException: dataSource or dataSo ...
- 用jQuery获取到一个类名获取到的是一个数组 ,如果对数组中的每个进行相应的操作可以这样进行
$(".userImg").each(function(){ $(this).click(function(){ var imgid = $(this).attr("id ...
- set有关的函数的用法(The SetStack Computer UVA - 12096)
#include<bits/stdc++.h> using namespace std; typedef set<int> Set; map<Set,int> ID ...
- DP Codeforces Round #303 (Div. 2) C. Woodcutters
题目传送门 /* 题意:每棵树给出坐标和高度,可以往左右倒,也可以不倒 问最多能砍到多少棵树 DP:dp[i][0/1/2] 表示到了第i棵树时,它倒左或右或不动能倒多少棵树 分情况讨论,若符合就取最 ...
- pyton 基础,运算符及字符类型。
一.python运算符: 二.数据类型: 1.数字: int :整型 32位机器上一个整数取值范围为-2**31~2**31-1即-2147483648~2147483647 64位机器上一个整数取 ...
- 配置组件的 props
组件是相互独立.可复用的单元,一个组件可能在不同地方被用到.但是在不同的场景下对这个组件的需求可能会根据情况有所不同,例如一个点赞按钮组件,在我这里需要它显示的文本是“点赞”和“取消”,当别的同事拿过 ...