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 相关文章推荐
实用的Jquery选项卡TAB示例代码
Aug 28 Javascript
使用jQuery判断Div是否在可视区域的方法 判断div是否可见
Feb 17 Javascript
json定义及jquery操作json的方法
Oct 03 Javascript
详解用原生JavaScript实现jQuery的某些简单功能
Dec 19 Javascript
setTimeout函数的神奇使用
Feb 26 Javascript
jquery.flot.js简单绘制折线图用法示例
Mar 13 Javascript
BootStrap Table复选框默认选中功能的实现代码(从数据库获取到对应的状态进行判断是否为选中状态)
Jul 11 Javascript
JSON在Javascript中的使用(eval和JSON.parse的区别)详细解析
Sep 05 Javascript
vue .js绑定checkbox并获取、改变选中状态的实例
Aug 24 Javascript
vue两组件间值传递 $router.push实现方法
May 15 Javascript
如何提升vue.js中大型数据的性能
Jun 21 Javascript
JavaScript实现简单计算器功能
Dec 19 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封装的page分页类完整实例
2016/10/18 PHP
PHP token验证生成原理实例分析
2019/06/05 PHP
JavaScript CSS 修改学习第四章 透明度设置
2010/02/19 Javascript
jQuery基础框架浅入剖析
2012/12/27 Javascript
单击和双击事件的冲突处理示例代码
2014/04/03 Javascript
jquery+ajax验证不通过也提交表单问题处理
2014/12/12 Javascript
jQuery蓝色风格滑动导航栏代码分享
2015/08/19 Javascript
学习javascript面向对象 掌握创建对象的9种方式
2016/01/04 Javascript
jQuery form插件之formDdata参数校验表单及验证后提交
2016/01/23 Javascript
jQuery如何封装输入框插件
2016/08/19 Javascript
jQuery动态生成不规则表格(前后端)
2017/02/21 Javascript
JS实现多张图片预览同步上传功能
2017/06/23 Javascript
Angular父子组件通过服务传参的示例方法
2018/10/31 Javascript
vue刷新页面时去闪烁提升用户体验效果的实现方法
2018/12/10 Javascript
Vue之封装公用变量以及实现方式
2020/07/31 Javascript
在vue项目中 实现定义全局变量 全局函数操作
2020/10/26 Javascript
微信小程序实现列表左右滑动
2020/11/19 Javascript
用Python写的图片蜘蛛人代码
2012/08/27 Python
python中精确输出JSON浮点数的方法
2014/04/18 Python
python实现自动解数独小程序
2019/01/21 Python
​如何愉快地迁移到 Python 3
2019/04/28 Python
python的re模块使用方法详解
2019/07/26 Python
python-tornado的接口用swagger进行包装的实例
2019/08/29 Python
python基于K-means聚类算法的图像分割
2019/10/30 Python
树莓派升级python的具体步骤
2020/07/05 Python
Python执行时间的几种计算方法
2020/07/31 Python
英国大码女性时装零售商:Evans
2018/08/29 全球购物
东南亚冒险旅行与活动:Adventoro
2019/10/16 全球购物
C#面试题
2016/05/06 面试题
秘书行业自我鉴定范文
2013/12/30 职场文书
机关门卫的岗位职责
2014/04/29 职场文书
2014年教师节活动总结
2014/08/29 职场文书
自我工作评价范文
2015/03/06 职场文书
100句拼搏进取的名言警句,值得一读!
2019/10/07 职场文书
详解Go与PHP的语法对比
2021/05/29 PHP
matplotlib画混淆矩阵与正确率曲线的实例代码
2021/06/01 Python