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 相关文章推荐
写了一个layout,拖动条连贯,内容区可为iframe
Aug 19 Javascript
Javacript实现颜色梯度变化和渐变的效果代码
May 31 Javascript
Jquery Ajax解析XML数据(同步及异步调用)简单实例
Feb 12 Javascript
JS实现的4种数字千位符格式化方法分享
Mar 02 Javascript
JavaScript 性能优化小结
Oct 12 Javascript
jQuery插件Validate实现自定义校验结果样式
Jan 18 Javascript
Node.js模块封装及使用方法
Mar 06 Javascript
Bootstrap学习系列之使用 Bootstrap Typeahead 组件实现百度下拉效果
Jul 07 Javascript
基于Node.js实现压缩和解压缩的方法
Feb 13 Javascript
js实现下拉框二级联动
Dec 04 Javascript
在vue使用clipboard.js进行一键复制文本的实现示例
Jan 15 Javascript
jquery更改元素属性attr()方法操作示例
May 22 jQuery
通过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
PHP similar_text 字符串的相似性比较函数
2010/05/26 PHP
PHP数组实例总结与说明
2011/08/23 PHP
smarty模板中使用get、post、request、cookies、session变量的方法
2014/04/24 PHP
PHP获取文件夹大小函数用法实例
2015/07/01 PHP
php in_array() 检查数组中是否存在某个值详解
2016/11/23 PHP
解决Laravel 不能创建 migration 的问题
2019/10/09 PHP
php中yii框架实例用法
2020/12/22 PHP
Javascript在IE和FireFox中的不同表现简析
2012/12/03 Javascript
JavaScript声明变量名的语法规则
2015/07/10 Javascript
javascript实现的淘宝旅行通用日历组件用法实例
2015/08/03 Javascript
jQuery实现伪分页的方法分享
2016/02/17 Javascript
微信小程序scroll-view组件实现滚动动画
2018/01/31 Javascript
vue cli使用融云实现聊天功能的实例代码
2019/04/19 Javascript
ionic4+angular7+cordova上传图片功能的实例代码
2019/06/19 Javascript
JS实现继承的几种常用方式示例
2019/06/22 Javascript
vue编写简单的购物车功能
2021/01/08 Vue.js
[34:39]Secret vs VG 2018国际邀请赛淘汰赛BO3 第二场 8.23
2018/08/24 DOTA
[01:02:30]Mineski vs Secret 2019国际邀请赛淘汰赛 败者组 BO3 第三场 8.22
2019/09/05 DOTA
python距离测量的方法
2018/03/06 Python
Python操作mongodb数据库的方法详解
2018/12/08 Python
Python通过递归获取目录下指定文件代码实例
2019/11/07 Python
详解Python Opencv和PIL读取图像文件的差别
2019/12/27 Python
python解包概念及实例
2021/02/17 Python
HTML5手机端弹出遮罩菜单特效代码
2016/01/27 HTML / CSS
屈臣氏乌克兰:Watsons UA
2019/10/29 全球购物
学校办公室主任职责
2013/12/27 职场文书
挂职思想汇报
2013/12/31 职场文书
军训自我鉴定200字
2014/02/13 职场文书
酒店采购员岗位职责
2014/03/14 职场文书
党员专题组织生活会发言材料
2014/10/17 职场文书
2014年宣传部工作总结
2014/11/12 职场文书
小学工作总结2015
2015/05/04 职场文书
公安忠诚教育心得体会
2016/01/23 职场文书
iPhone13将有八大升级
2021/04/15 数码科技
关于SpringBoot 使用 Redis 分布式锁解决并发问题
2021/11/17 Redis
Spring Boot实战解决高并发数据入库之 Redis 缓存+MySQL 批量入库问题
2022/02/12 Redis