JS原型对象通俗"唱法"


Posted in Javascript onDecember 27, 2012

1.关于原型对象的重要知识点

首先要知道一个很重要的知识点,一句话:所有对象都有原型对象.

2. 对比其他语言的理解

原型对象,就是其它语言中的类中的静态属性和静态方法,总是是静态-static就对了.原理是: 内存中只有一份.

3. 在内存中的形象图:

首先,在产生js对象之前,我们需要创造一个构造函数(这都不知道,那就不要往下看了),如下:

function Person(name_, age_) { 
this.name = name_; 
this.age = age_; 
}

下面,我们就要new 对象了,这里,我们new三个(Person)对象,"张三" "李雷" "韩梅梅",他们来自同一个构造函数Person:

JS原型对象通俗"唱法"

内存中就这样了,每个对象,都有自己的 name, age 内存.这里new了多少个对象,就要开辟多少块name, age内存.

看到这,应该还是比较好理解的. 下面我们添加一条属性.location属性,如下:

function Person(name_, age_) { 
this.name = name_; 
this.age = age_; 
this.location = "地球"; 
}

这时候 我们在new这三个人. 内存情况如下:

JS原型对象通俗"唱法"

这里我们看,三个对象都有一个"地球"的内存空间.  这里你要动动大脑了, 三个人都有地球的内存,我们是不是可以这样呢?

JS原型对象通俗"唱法"

你看这样好不好呢? 这样只需要一个地球,大家都可以用了. 看到这,好吧,公用的那个空间如果是个对象的话,就是所谓的原型对象了.饿?就这样?

是的,就这样.

原型对象,最重要的作用就是把常量和方法独立到自身里. 供给其它 "自己的对象" 使用. 最后如图:

JS原型对象通俗"唱法"

4. 从代码的层次上介绍原型对象.

上图是内存中的对象,我们现在从代码的从面操作.

function Person(name_, age_) { 
this.name = name_; 
this.age = age_; 
this.location = "地球"; 
} 
// 三个具体的对象 
var zhangsan = new Person("zhangsan", 21); 
var lilei = new Person("lilei", 21); 
var hanmeimei = new Person("hanmeimei", 21); 
// 他们的原型对象是 
Person.prototype.location = "地球"; 
Person.prototype.killPerson = function() { 
return "杀人"; 
};

这里有一个问题,我们知道原型对象,可是我们怎么访问到原型对象里的属性呢. 就是我们如何获取到location ,和用 killPerson方法呢?
请看:
alert(zhangsan.location); 
alert(zhangsan.killPerson());

这样就可以访问到了,不过前提是,你的对象属性里面,没有定义location和killPerson.不然会把原对象的覆盖掉. 这里面涉及到原型问题即,
在zhangsan.location的时候,首先,我们检查zhangsan对象本身,从图中我们知道,张三有 name, age 和prototype指针属性. 并没有location,找不到以后,它会继续搜索原对象里面,看能否找到location属性,如果有,就会调用原对象的属性.
所以
alert(zhangsan.location) 会输出 "地球" 
alert(zhangsan.killPerson() ) 会输出 "杀人"

以上是我个人对原型对象的理解,希望对大家有帮助.
Javascript 相关文章推荐
javascript 进度条 实现代码
Jul 30 Javascript
JavaScript类属性的访问方式详解
Feb 11 Javascript
javascript框架设计读书笔记之种子模块
Dec 02 Javascript
JS+CSS实现的竖向简洁折叠菜单效果代码
Oct 22 Javascript
jquery+css3实现会动的小圆圈效果
Jan 27 Javascript
Javascript的表单验证-初识正则表达式
Mar 18 Javascript
利用jQuery.Validate异步验证用户名是否存在(推荐)
Dec 09 Javascript
了解VUE的render函数的使用
Jun 08 Javascript
基于wordpress的ajax写法详解
Jan 02 Javascript
了解ESlint和其相关操作小结
May 21 Javascript
原生js实现商品筛选功能
Oct 28 Javascript
Ant design vue table 单击行选中 勾选checkbox教程
Oct 24 Javascript
通过jQuery源码学习javascript(二)
Dec 27 #Javascript
js 判断一个元素是否在页面中存在
Dec 27 #Javascript
通过jQuery源码学习javascript(一)
Dec 27 #Javascript
Eval and new funciton not the same thing
Dec 27 #Javascript
Javascript图像处理—虚拟边缘介绍及使用方法
Dec 27 #Javascript
JS 添加网页桌面快捷方式的代码详细整理
Dec 27 #Javascript
JavaScript初学者应注意的七个细节详细介绍
Dec 27 #Javascript
You might like
第七节 类的静态成员 [7]
2006/10/09 PHP
在线增减.htpasswd内的用户
2006/10/09 PHP
php中判断文件空目录是否有读写权限的函数代码
2012/08/07 PHP
php一些错误处理的方法与技巧总结
2013/08/10 PHP
thinkPHP统计排行与分页显示功能示例
2016/12/02 PHP
php使用flock阻塞写入文件和非阻塞写入文件的实例讲解
2017/07/10 PHP
php单元测试phpunit入门实例教程
2017/11/17 PHP
Asp.net下利用Jquery Ajax实现用户注册检测(验证用户名是否存)
2010/09/12 Javascript
window.open不被拦截的实现代码
2012/08/22 Javascript
javaScript面向对象继承方法经典实现
2013/08/20 Javascript
Jquery实现由下向上展开效果的例子
2014/12/08 Javascript
thinkphp 表名 大小写 窍门
2015/02/01 Javascript
jQuery实现简单的文件上传进度条效果
2020/03/26 Javascript
浅谈JavaScript对象的创建方式
2016/06/13 Javascript
详解使用jest对vue项目进行单元测试
2018/09/07 Javascript
vue.draggable实现表格拖拽排序效果
2018/12/01 Javascript
JS/HTML5游戏常用算法之路径搜索算法 A*寻路算法完整实例
2018/12/14 Javascript
JavaScript中import用法总结
2019/01/20 Javascript
JS数组中对象去重操作示例
2019/06/04 Javascript
electron实现静默打印的示例代码
2019/08/12 Javascript
微信小程序视频弹幕发送功能的实现
2020/12/28 Javascript
pytorch构建网络模型的4种方法
2018/04/13 Python
浅析Python 3 字符串中的 STR 和 Bytes 有什么区别
2018/10/14 Python
python实现最小二乘法线性拟合
2019/07/19 Python
Python基于OpenCV实现人脸检测并保存
2019/07/23 Python
Python 写入训练日志文件并控制台输出解析
2019/08/13 Python
python__name__原理及用法详解
2019/11/02 Python
TensorFlow 多元函数的极值实例
2020/02/10 Python
django Layui界面点击弹出对话框并请求逻辑生成分页的动态表格实例
2020/05/12 Python
简单介绍HTML5中的文件导入
2015/05/08 HTML / CSS
网上卖盒饭创业计划书范文
2014/02/07 职场文书
科学发展观活动总结
2014/08/28 职场文书
群众路线教育实践活动对照检查材料
2014/09/22 职场文书
2015年学校安全工作总结
2015/04/22 职场文书
教师节感想
2015/08/11 职场文书
Netty客户端接入流程NioSocketChannel创建解析
2022/03/25 Java/Android