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 相关文章推荐
表单元素事件 (Form Element Events)
Jul 17 Javascript
jQuery实现的fixedMenu下拉菜单效果代码
Aug 24 Javascript
javascript瀑布流式图片懒加载实例解析与优化
Feb 23 Javascript
url传递的参数值中包含&时,url自动截断问题的解决方法
Aug 02 Javascript
js实现tab切换效果
Feb 16 Javascript
Angular.JS去掉访问路径URL中的#号详解
Mar 30 Javascript
javascript基于定时器实现进度条功能实例
Oct 13 Javascript
利用JS实现scroll自定义滚动效果详解
Oct 17 Javascript
Javascript Promise用法详解
May 10 Javascript
iview Upload组件多个文件上传的示例代码
Sep 30 Javascript
vue axios封装及API统一管理的方法
Apr 18 Javascript
Vue列表如何实现滚动到指定位置样式改变效果
May 09 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 zip扩展Linux下安装过程分享
2014/05/05 PHP
PHP小教程之实现链表
2014/06/09 PHP
PHP编程文件处理类SplFileObject和SplFileInfo用法实例分析
2017/07/22 PHP
jquery 图片Silhouette Fadeins渐显效果
2010/02/07 Javascript
js在输入框屏蔽按键,只能键入数字的示例代码
2014/01/03 Javascript
javascript中关于&& 和 || 表达式的小技巧分享
2015/04/10 Javascript
JS中的THIS和WINDOW.EVENT.SRCELEMENT详解
2015/05/25 Javascript
JavaScript实现99乘法表及隔行变色实例代码
2016/02/24 Javascript
微信小程序 在Chrome浏览器上运行以及WebStorm的使用
2016/09/27 Javascript
最原始的jQuery注册验证方式
2016/10/11 Javascript
js闭包用法实例详解
2016/12/13 Javascript
AngularJS 实现点击按钮获取验证码功能实例代码
2017/07/13 Javascript
Bootstrap Table 在指定列中添加下拉框控件并获取所选值
2017/07/31 Javascript
vue中配置mint-ui报css错误问题的解决方法
2017/10/11 Javascript
Vue实现按钮旋转和移动位置的实例代码
2018/08/09 Javascript
玩转Koa之核心原理分析
2018/12/29 Javascript
Echarts地图添加引导线效果(labelLine)
2019/09/30 Javascript
JavaScript判断浏览器版本的方法
2019/11/03 Javascript
Vue实现按钮级权限方案
2019/11/21 Javascript
javascript 原型与原型链的理解及应用实例分析
2020/02/10 Javascript
简单了解JavaScript作用域
2020/07/31 Javascript
使用C语言来扩展Python程序和Zope服务器的教程
2015/04/14 Python
python自动翻译实现方法
2016/05/28 Python
Windows下安装python2和python3多版本教程
2017/03/30 Python
关于Tensorflow中的tf.train.batch函数的使用
2018/04/24 Python
Python3基于sax解析xml操作示例
2018/05/22 Python
Python socket实现的文件下载器功能示例
2019/11/15 Python
Python如何定义有可选参数的元类
2020/07/31 Python
Python 代码调试技巧示例代码
2020/08/11 Python
Priority Pass机场贵宾室会籍计划:全球超过1200间机场贵宾室
2018/08/26 全球购物
办公室文秘自我鉴定
2013/09/21 职场文书
学雷锋演讲稿
2014/03/04 职场文书
大型营销活动计划书
2014/04/28 职场文书
初中教师业务学习材料
2014/05/12 职场文书
2015年学生会个人工作总结
2015/04/09 职场文书
小学毕业教师寄语
2019/06/21 职场文书