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中的prototype使用说明
Apr 13 Javascript
node.js中的http.createServer方法使用说明
Dec 14 Javascript
chrome不支持form.submit的解决方案
Apr 28 Javascript
jquery中的工具使用方法$.isFunction, $.isArray(), $.isWindow()
Aug 09 Javascript
JS集成fckeditor及判断内容是否为空的方法
May 27 Javascript
Angularjs 自定义服务的三种方式(推荐)
Aug 02 Javascript
微信小程序 定义全局数据、函数复用、模版等详细介绍
Oct 27 Javascript
js Canvas绘制圆形时钟教程
Feb 06 Javascript
vue.js根据代码运行环境选择baseurl的方法
Feb 28 Javascript
JavaScript设计模式之观察者模式实例详解
Jan 16 Javascript
JS实现的贪吃蛇游戏案例详解
May 01 Javascript
基于JavaScript实现贪吃蛇游戏
Mar 16 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 PDO函数库详解
2010/04/27 PHP
php中DOMDocument简单用法示例代码(XML创建、添加、删除、修改)
2010/12/19 PHP
php多个字符串替换成同一个的解决方法
2013/06/18 PHP
PHP数据库操作四:mongodb用法分析
2017/08/16 PHP
php 替换文章中的图片路径,下载图片到本地服务器的方法
2018/02/06 PHP
左右悬浮可分组的网站QQ在线客服代码(可谓经典)
2012/12/21 Javascript
JS实现简洁、全兼容的拖动层实例
2015/05/13 Javascript
jQuery选择器及jquery案例详解(必看)
2016/05/20 Javascript
JavaScript语言精粹经典实例(整理篇)
2016/06/07 Javascript
jQuery实现下拉框多选 jquery-multiselect 的实例代码
2016/07/14 Javascript
关于动态执行代码(js的Eval)实例详解
2016/08/15 Javascript
轻松实现js弹框显示选项
2016/09/13 Javascript
微信小程序 地图定位简单实例
2016/10/14 Javascript
jQuery实现拖拽可编辑模块功能代码
2017/01/12 Javascript
js实现4个方向滚动的球
2017/03/06 Javascript
Angular.js 4.x中表单Template-Driven Forms详解
2017/04/25 Javascript
js判断输入框不能为空格或null值的实现方法
2018/03/02 Javascript
微信小程序如何调用图片接口API并居中显示
2019/06/29 Javascript
[08:53]DOTA2每周TOP10 精彩击杀集锦vol.9
2014/06/26 DOTA
[54:29]2018DOTA2亚洲邀请赛 4.7 淘汰赛 VP vs LGD 第二场
2018/04/09 DOTA
Python 连连看连接算法
2008/11/22 Python
Python基于time模块求程序运行时间的方法
2017/09/18 Python
Python数据分析之获取双色球历史信息的方法示例
2018/02/03 Python
python实现Excel文件转换为TXT文件
2019/04/28 Python
Python箱型图处理离群点的例子
2019/12/09 Python
Django 用户登陆访问限制实例 @login_required
2020/05/13 Python
python3.6.8 + pycharm + PyQt5 环境搭建的图文教程
2020/06/11 Python
CSS3 background-image颜色渐变的实现代码
2018/09/13 HTML / CSS
你应该知道的30个css选择器
2014/03/19 HTML / CSS
Perfume’s Club法国站:购买香水和化妆品
2019/05/02 全球购物
拾金不昧表扬信范文
2014/01/11 职场文书
学生夜不归宿检讨书
2014/09/23 职场文书
幼儿园开学家长寄语(2015秋季)
2015/05/27 职场文书
2016年4月份红领巾广播稿
2015/12/21 职场文书
JavaScript 防篡改对象的用法示例
2021/04/24 Javascript
8g内存用python读取10文件_面试题-python 如何读取一个大于 10G 的txt文件?
2021/05/28 Python