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 相关文章推荐
没有document.getElementByName方法
Aug 19 Javascript
jquery showModelDialog的使用方法示例详解
Nov 19 Javascript
js图片向右一张张滚动效果实例代码
Nov 23 Javascript
ZeroClipboard插件实现多浏览器复制功能(支持firefox、chrome、ie6)
Aug 30 Javascript
javascript动态设置样式style实例分析
May 13 Javascript
angular.js指令中transclude选项及ng-transclude指令详解
May 24 Javascript
VUE axios上传图片到七牛的实例代码
Jul 28 Javascript
vue服务端渲染的实例代码
Aug 28 Javascript
基于Angularjs-router动态改变Title值的问题
Aug 30 Javascript
脚手架vue-cli工程webpack的作用和特点
Sep 29 Javascript
Vue触发隐藏input file的方法实例详解
Aug 14 Javascript
详解从vue-loader源码分析CSS Scoped的实现
Sep 23 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
Zend的Registry机制的使用说明
2013/05/02 PHP
PHP扩展CURL的用法详解
2014/06/20 PHP
PHP结合Mysql数据库实现留言板功能
2016/03/04 PHP
Ecshop 后台添加新功能栏目及管理权限设置教程
2017/11/21 PHP
JS 用6N±1法求素数 实例教程
2009/10/20 Javascript
jQuery语法总结和注意事项小结
2012/11/11 Javascript
模拟电子签章盖章效果的jQuery插件源码
2013/06/24 Javascript
angularjs基础教程
2014/12/25 Javascript
程序员必知35个jQuery 代码片段
2015/11/05 Javascript
详解Bootstrap的aria-label和aria-labelledby应用
2016/01/04 Javascript
JS区分浏览器页面是刷新还是关闭
2016/04/17 Javascript
详解JavaScript对象类型
2016/06/16 Javascript
JS解决IOS中拍照图片预览旋转90度BUG的问题
2017/09/13 Javascript
在vue项目创建的后初始化首次使用stylus安装方法分享
2018/01/25 Javascript
angularjs性能优化的方法
2018/09/05 Javascript
微信小程序时间戳转日期的详解
2019/04/30 Javascript
微信小程序获取用户信息的两种方法wx.getUserInfo与open-data实例分析
2019/05/03 Javascript
vue中渲染对象中属性时显示未定义的解决
2020/07/31 Javascript
[03:56]显微镜下的DOTA2第十一期——鬼畜的死亡先知播音员
2014/06/23 DOTA
[03:59]5分钟带你了解什么是DOTA2(第二期)
2017/02/07 DOTA
[41:52]DOTA2-DPC中国联赛 正赛 CDEC vs Dynasty BO3 第二场 2月22日
2021/03/11 DOTA
python实现的简单FTP上传下载文件实例
2015/06/30 Python
python 巧用正则寻找字符串中的特定字符的位置方法
2018/05/02 Python
Python简单实现区域生长方式
2020/01/16 Python
python多项式拟合之np.polyfit 和 np.polyld详解
2020/02/18 Python
Python如何设置指定窗口为前台活动窗口
2020/08/12 Python
亚马逊西班牙购物网站:amazon西班牙
2017/03/06 全球购物
法国二手手袋、手表和奢侈珠宝购物网站:Collector Square
2018/07/05 全球购物
HomeAway英国:全球领先的度假租赁在线市场
2020/02/03 全球购物
暑期实习鉴定
2013/12/16 职场文书
2013年军训通讯稿
2014/02/05 职场文书
上班看电影检讨书
2014/02/12 职场文书
政府四风问题整改措施
2014/10/04 职场文书
承诺书范本
2015/01/21 职场文书
HTML+CSS实现导航条下拉菜单的示例代码
2021/08/02 HTML / CSS
Golang 并发编程 SingleFlight模式
2022/04/26 Golang