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开发时的五个注意事项
Dec 08 Javascript
如何用ajax来创建一个XMLHttpRequest对象
Dec 10 Javascript
jquery判断浏览器后退时候弹出消息的方法
Aug 11 Javascript
jquery实现简单的自动播放幻灯片效果
Jun 13 Javascript
readonly和disabled属性的区别
Jul 26 Javascript
Jquery实现的简单轮播效果【附实例】
Apr 19 Javascript
jQuery插件ajaxFileUpload使用详解
Jan 10 Javascript
详解vue渲染函数render的使用
Dec 12 Javascript
Vue中 v-if 和v-else-if页面加载出现闪现的问题及解决方法
Oct 12 Javascript
30分钟精通React今年最劲爆的新特性——React Hooks
Mar 11 Javascript
vue学习笔记之过滤器的基本使用方法实例分析
Feb 01 Javascript
vue操作dom元素的3种方法示例
Sep 20 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
php中explode与split的区别介绍
2012/10/03 PHP
PHP实现网站访问量计数器
2017/10/27 PHP
php取出数组单个值的方法
2018/03/12 PHP
翻译整理的jQuery使用查询手册
2007/03/07 Javascript
让firefox支持IE的一些方法的javascript扩展函数代码
2010/01/02 Javascript
javascript 操作select下拉列表框的一点小经验
2010/03/20 Javascript
EasyUI中的tree用法介绍
2011/11/01 Javascript
jQuery 下拉列表 二级联动插件分享
2012/03/29 Javascript
JavaScript 盒模型 尺寸深入理解
2012/12/31 Javascript
document.createElement()用法及注意事项(ff下不兼容)
2013/03/13 Javascript
js中点击空白区域时文本框与隐藏层的显示与影藏问题
2013/08/26 Javascript
JS正则表达式大全(整理详细且实用)
2013/11/14 Javascript
在页面上用action传递参数到后台出现乱码的解决方法
2013/12/31 Javascript
connect中间件session、cookie的使用方法分享
2014/06/17 Javascript
JavaScript自学笔记(必看篇)
2016/06/23 Javascript
详解angularjs 关于ui-router分层使用
2017/06/12 Javascript
Vue学习笔记进阶篇之vue-cli安装及介绍
2017/07/18 Javascript
jQuery实现table表格checkbox全选的方法分析
2018/07/04 jQuery
微信小程序MUI导航栏透明渐变功能示例(通过改变rgba的a值实现)
2019/01/24 Javascript
vue.js this.$router.push获取不到params参数问题
2020/03/03 Javascript
python 排列组合之itertools
2013/03/20 Python
python添加模块搜索路径方法
2017/09/11 Python
机器学习的框架偏向于Python的13个原因
2017/12/07 Python
如何基于python生成list的所有的子集
2019/11/11 Python
python+opencv实现移动侦测(帧差法)
2020/03/20 Python
Python如何操作office实现自动化及win32com.client的运用
2020/04/01 Python
PyInstaller将Python文件打包为exe后如何反编译(破解源码)以及防止反编译
2020/04/15 Python
Python中操作各种多媒体,视频、音频到图片的代码详解
2020/06/04 Python
Python基于xlrd模块处理合并单元格
2020/07/28 Python
如何用PyPy让你的Python代码运行得更快
2020/12/02 Python
css3打造一款漂亮的卡哇伊按钮
2013/03/20 HTML / CSS
TripAdvisor德国:全球领先的旅游网站
2017/12/07 全球购物
市场安全管理制度
2014/01/26 职场文书
连锁酒店店长职责范本
2014/02/13 职场文书
个人担保书范文
2014/05/20 职场文书
班子成员四风问题自我剖析材料
2014/09/29 职场文书