JavaScript面向对象程序设计三 原型模式(上)


Posted in Javascript onDecember 21, 2011

我们创建的每一个函数都有一个prototype(原型)属性,该属性是一个对象,包含可以有特定类型的所有实例共享的属性和方法。使用它的好处就在于可以让所有对象实例共享它所包含的属性和方法,也就是说,不必在构造函数中定义对象的信息,而是可以将这些信息,直接添加在原型对象中,如下所示,还是接着改写前两篇日志中的例子:

function Employee() { 
}; 
Employee.prototype.Name = "Jim"; 
Employee.prototype.Age = 28; 
Employee.prototype.Job = "SoftWare Engineer"; 
Employee.prototype.SayName = function () { 
alert(this.Name); 
}; 
var employee1 = new Employee(); 
employee1.SayName();//Jim 
var emplayee2 = new Employee(); 
emplayee2.SayName(); //Jim 
alert(employee1.SayName = emplayee2.SayName);//true

与构造函数模式不同的是,新对象的这些属性和方法是由所有实例共享的。
以上即是原型模式的一个引子,要理解原型模式的工作原理,就需要了解ECMASCRIPT中原型的性质。
理解原型
在Javascript中,只要创建了一个新函数,就会根据一组特定的规则为该函数创建一个prototype属性。在默认的情况下,虽有prototype属性都会自动获得一个constructor属性,这个属性包含一个指向prototype属性所在函数的指针,而通过这个构造函数,我们还可以继续为原型添加其他属性和方法。
创建了自定义的构造函数之后,其原型属性默认只会取得constructor属性,而至于其他的方法,则都是从Object继承来的。当调用构造函数创建一个新实例后,该实例的内部将包含一个指针(内部属性),指向构造函数的原型属性。要注意的是这个连接存在于实例和构造函数原型属性之间,而不是存在于实例与构造函数之间。
在某些实现中,无法访问到内部属性(_proto_属性),但是在所有实现中都可以通过isPrototypeOf方法来确定对象之间是否存在这种原型关系。从本质上来看,如果对象的_proto_属性指向isPrototypeOf,这个方法就返回true。如下所示:
alert(Employee.prototype.isPrototypeOf(employee1)); //true 
alert(Employee.prototype.isPrototypeOf(employee2));//true

每当代码读取某个对象的某个属性时,都会执行搜索,目标是具有给定名字的属性。搜索最先从对象实例本身开始。如果在实例中找到具有给定名字的属性,则然后该属性的值,如果没有找到,则继续搜索指针指向的原型对象,在原型对象中查找具有给定名字的属性。如果在原型对象中找到这个属性,则返回该属性的值。这也正是对个对象实例共享原型所保存的属性和方法的基本原理。
前面说过,原型最初只包含constructor属性,而该属性也是共享的,因此可以通过对象实例访问
虽然可以通过对象实例访问保存在原型中的值,但是不能通过对象实例重写原型中的值,如果我们在实例中添加一个属性,而该属性与实例原型中的一个属性名称相同,name在实例中创建的属性会屏蔽(.net成为隐藏)原型中的那个属性,如下所示:
function Employee() { 
}; 
Employee.prototype.Name = "Jim"; 
Employee.prototype.Age = 28; 
Employee.prototype.Job = "SoftWare Engineer"; 
Employee.prototype.SayName = function () { 
alert(this.Name); 
}; 
emplayee2.Name = "Sun"; 
alert(employee1.Name); //Jim 
alert(employee2.Name);//Sun

其中employee1.Name的Jim来自原型,二employee2.Name的sun来自实例。
Javascript 相关文章推荐
javascript学习笔记(十五) js间歇调用和超时调用
Jun 20 Javascript
jquery插件制作 提示框插件实现代码
Aug 17 Javascript
Javascript Memoizer浅析
Oct 16 Javascript
JavaScript中使用Callback控制流程介绍
Mar 16 Javascript
手机端页面rem宽度自适应脚本
May 20 Javascript
简述JavaScript提交表单的方式 (Using JavaScript Submit Form)
Mar 18 Javascript
ES6新特性之字符串的扩展实例分析
Apr 01 Javascript
vue 页面加载进度条组件实例
Feb 05 Javascript
使用ng-packagr打包Angular的方法示例
Sep 21 Javascript
Vue使用JSEncrypt实现rsa加密及挂载方法
Feb 07 Javascript
vue实现在线学生录入系统
May 30 Javascript
JS前端使用canvas实现物体的点选示例
Aug 05 Javascript
jquery $.getJSON()跨域请求
Dec 21 #Javascript
jquery事件机制扩展插件 jquery鼠标右键事件
Dec 21 #Javascript
DIV外区域Click后关闭DIV的实现代码
Dec 21 #Javascript
用JSON做数据传输格式中的一些问题总结
Dec 21 #Javascript
40款非常有用的 jQuery 插件推荐(系列一)
Dec 21 #Javascript
这段js代码得节约你多少时间
Dec 20 #Javascript
js实现的仿新浪微博完美的时间组件升级版
Dec 20 #Javascript
You might like
MySQL GBK→UTF-8编码转换
2007/05/24 PHP
Codeigniter整合Tank Auth权限类库详解
2014/06/12 PHP
PHP如何将log信息写入服务器中的log文件
2015/07/29 PHP
php实现的rc4加密解密类定义与用法示例
2018/08/16 PHP
nodejs批量修改文件编码格式
2015/01/22 NodeJs
jQuery对象的链式操作用法分析
2016/05/10 Javascript
基于JQuery实现图片上传预览与删除操作
2016/05/24 Javascript
JavaScript鼠标事件,点击鼠标右键,弹出div的简单实例
2016/08/03 Javascript
JS组件系列之使用HTML标签的data属性初始化JS组件
2016/09/14 Javascript
原生JS获取元素集合的子元素宽度实例
2016/12/14 Javascript
Bootstrap fileinput 上传新文件移除时触发服务器同步删除的配置
2018/10/08 Javascript
vant-ui AddressEdit地址编辑和van-area的用法说明
2020/11/03 Javascript
跟老齐学Python之Python安装
2014/09/12 Python
CentOS 6.5下安装Python 3.5.2(与Python2并存)
2017/06/05 Python
Python cookbook(数据结构与算法)从字典中提取子集的方法示例
2018/03/22 Python
对pandas的行列名更改与数据选择详解
2018/11/12 Python
python3实现高效的端口扫描
2019/08/31 Python
Python Gluon参数和模块命名操作教程
2019/12/18 Python
win10下python2和python3共存问题解决方法
2019/12/23 Python
通过 Python 和 OpenCV 实现目标数量监控
2020/01/05 Python
详解Python3 中的字符串格式化语法
2020/01/15 Python
python不同版本的_new_不同点总结
2020/12/09 Python
HTML5 script元素async、defer异步加载使用介绍
2013/08/23 HTML / CSS
Rockport乐步美国官网:风靡美国的白宫鞋
2016/11/24 全球购物
英国女性运动服品牌:Sweaty Betty
2018/11/08 全球购物
什么是设计模式
2012/06/17 面试题
军训生自我鉴定范文
2013/12/27 职场文书
给同事的道歉信
2014/01/11 职场文书
小学庆六一活动方案
2014/02/28 职场文书
教师教学评估方案
2014/05/09 职场文书
课前一分钟演讲稿
2014/08/26 职场文书
群众路线个人对照检查材料
2014/09/23 职场文书
党员干部三严三实心得体会
2014/10/13 职场文书
同乡会致辞
2015/07/30 职场文书
校园安全学习心得体会
2016/01/18 职场文书
python实现简单倒计时功能
2021/04/21 Python