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 圆角div的实现代码
Oct 15 Javascript
改变隐藏的input中value的值代码
Dec 30 Javascript
JS基于myFocus库实现各种功能的tab选项卡切换效果
Sep 19 Javascript
angularjs封装bootstrap时间插件datetimepicker
Jun 20 Javascript
jQuery弹出窗口简单实现代码
Mar 09 Javascript
微信小程序 Buffer缓冲区的详解
Jul 06 Javascript
vue.js配合$.post从后台获取数据简单demo分享
Aug 11 Javascript
JavaScript从原型到原型链深入理解
Jun 03 Javascript
Angular.JS读取数据库数据调用完整实例
Jul 02 Javascript
vue中的v-if和v-show的区别详解
Sep 01 Javascript
vue学习笔记之slot插槽用法实例分析
Feb 29 Javascript
js前端面试常见浏览器缓存强缓存及协商缓存实例
Jun 21 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 is_file()和is_dir()用于遍历目录时用法注意事项
2010/03/02 PHP
微信公众平台DEMO(PHP)
2016/05/04 PHP
php自动提交表单的方法(基于fsockopen与curl)
2016/05/09 PHP
在Thinkphp中使用ajax实现无刷新分页的方法
2016/10/25 PHP
php实用代码片段整理
2016/11/12 PHP
动态表单验证的操作方法和TP框架里面的ajax表单验证
2017/07/19 PHP
Prototype 学习 工具函数学习($w,$F方法)
2009/07/12 Javascript
详解JavaScript的while循环的使用
2015/06/03 Javascript
跟我学习javascript解决异步编程异常方案
2015/11/23 Javascript
Highcharts+NodeJS搭建数据可视化平台示例
2017/01/01 NodeJs
MvcPager分页控件 适用于Bootstrap
2017/06/03 Javascript
React diff算法的实现示例
2018/04/20 Javascript
Node.js log4js日志管理详解
2018/07/31 Javascript
JavaScript函数定义方法实例详解
2019/03/05 Javascript
vue项目创建并引入饿了么elementUI组件的步骤
2019/04/11 Javascript
layui复选框的全选与取消实现方法
2019/09/02 Javascript
初学vue出现空格警告的原因及其解决方案
2019/10/31 Javascript
vue实现路由不变的情况下,刷新页面操作示例
2020/02/02 Javascript
Vue中inheritAttrs的使用实例详解
2020/12/31 Vue.js
[00:53]TI3正赛第三天 DK怒破A队不败金身 现场国旗飘扬热血激昂
2013/08/10 DOTA
[44:51]2018DOTA2亚洲邀请赛 4.4 淘汰赛 VP vs Liquid 第二场
2018/04/05 DOTA
Python常用的文件及文件路径、目录操作方法汇总介绍
2015/05/21 Python
Python for Informatics 第11章之正则表达式(二)
2016/04/21 Python
python 使用装饰器并记录log的示例代码
2019/07/12 Python
django如何实现视图重定向
2019/07/24 Python
Python图像处理模块ndimage用法实例分析
2019/09/05 Python
Python 添加文件注释和函数注释操作
2020/08/09 Python
详解html5 postMessage解决跨域通信的问题
2018/08/17 HTML / CSS
数组越界问题
2015/10/21 面试题
学期自我鉴定
2013/11/04 职场文书
通知书大全
2015/04/27 职场文书
2015年农村党员公开承诺事项
2015/04/28 职场文书
在职证明书模板
2015/06/15 职场文书
范文之农村基层党建工作报告
2019/10/24 职场文书
java项目构建Gradle的使用教程
2022/03/24 Java/Android
让JavaScript代码更加精简的方法技巧
2022/06/01 Javascript