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 相关文章推荐
页面中iframe相互传值传参
Dec 13 Javascript
JS特权方法定义作用以及与公有方法的区别
Mar 18 Javascript
js动态生成指定行数的表格
Jul 11 Javascript
Knockout visible绑定使用方法
Nov 15 Javascript
js的[defer]和[async]属性
Nov 24 Javascript
深入理解javascript严格模式(Strict Mode)
Nov 28 Javascript
JS关闭窗口时产生的事件及用法示例
Aug 20 Javascript
详解基于Koa2开发微信二维码扫码支付相关流程
May 16 Javascript
layer弹出层父子页面事件相互调用方法
Aug 17 Javascript
Vue.js 中 axios 跨域访问错误问题及解决方法
Nov 21 Javascript
使用jquery实现轮播图效果
Jan 02 jQuery
基于JavaScript实现年月日三级联动
Jun 22 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
PHP中把stdClass Object转array的几个方法
2014/05/08 PHP
PHP网页游戏学习之Xnova(ogame)源码解读(十一)
2014/06/25 PHP
短信提示使用 特效
2007/01/19 Javascript
自己开发Dojo的建议框架
2008/09/24 Javascript
JavaScript按位运算符的应用简析
2014/02/04 Javascript
8个实用的jQuery技巧
2014/03/04 Javascript
jQuery中:enabled选择器用法实例
2015/01/04 Javascript
javascript获取四位数字或者字母的随机数
2015/01/09 Javascript
jQuery实现响应鼠标滚动的动感菜单效果
2015/09/21 Javascript
javascript实现动态标签云
2015/10/16 Javascript
分享自己用JS做的扫雷小游戏
2016/02/17 Javascript
jQuery取消特定的click事件
2016/02/29 Javascript
聊一聊jQuery插件uploadify使用方法
2016/08/24 Javascript
ES6中Math对象的部分扩展
2017/02/20 Javascript
es6 字符串String的扩展(实例讲解)
2017/08/03 Javascript
BootStrap数据表格实例代码
2017/09/13 Javascript
详解nodejs通过代理(proxy)发送http请求(request)
2017/09/22 NodeJs
vue组件传递对象中实现单向绑定的示例
2018/02/28 Javascript
小程序文字跑马灯效果
2018/12/28 Javascript
微信小程序 wepy框架与iview-weapp的用法详解
2019/04/10 Javascript
9种方法优化jQuery代码详解
2020/02/04 jQuery
使用Vue 自定义文件选择器组件的实例代码
2020/03/04 Javascript
JavaScript常用8种数组去重代码实例
2020/09/09 Javascript
[42:50]NB vs VP 2018国际邀请赛小组赛BO2 第二场 8.18
2018/08/19 DOTA
利用Python查看目录中的文件示例详解
2017/08/28 Python
Python中字典的浅拷贝与深拷贝用法实例分析
2018/01/02 Python
Python基于httpx模块实现发送请求
2020/07/07 Python
Python常用base64 md5 aes des crc32加密解密方法汇总
2020/11/06 Python
html5 实现客户端验证上传文件的大小(简单实例)
2016/05/15 HTML / CSS
创联软件面试题笔试题
2012/10/07 面试题
设计部经理的岗位职责
2013/11/16 职场文书
领导班子党的群众路线教育实践活动对照检查材料
2014/09/25 职场文书
出国留学自荐信模板
2015/03/06 职场文书
个人年终总结怎么写
2015/03/09 职场文书
大学生思想道德自我评价
2015/03/09 职场文书
Python中的tkinter库简单案例详解
2022/01/22 Python