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 相关文章推荐
js特效,页面下雪的小例子
Jun 17 Javascript
JS对img标签进行优化使用onerror显示默认图像
Apr 24 Javascript
JavaScript 学习笔记之操作符(续)
Jan 14 Javascript
JS表格组件神器bootstrap table详解(基础版)
Dec 08 Javascript
使用smartupload组件实现jsp+jdbc上传下载文件实例解析
Jan 05 Javascript
Vue.js如何优雅的进行form validation
Apr 07 Javascript
利用JS如何计算字符串所占字节数示例代码
Sep 13 Javascript
JS同步、异步、延迟加载的方法
May 05 Javascript
vue实现word,pdf文件的导出功能
Jul 31 Javascript
JavaScript闭包与作用域链实例分析
Jan 21 Javascript
如何在JavaScript中创建具有多个空格的字符串?
Feb 23 Javascript
Vue项目接入Paypal实现示例详解
Jun 04 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
用文本文件制作留言板提示(上)
2006/10/09 PHP
发布一个迷你php+AJAX聊天程序[聊天室]提供下载
2007/07/21 PHP
PHP实现的下载远程图片自定义函数分享
2015/01/28 PHP
php 计算两个时间相差的天数、小时数、分钟数、秒数详解及实例代码
2016/11/09 PHP
PHP框架实现WebSocket在线聊天通讯系统
2019/11/21 PHP
jquery选择器(常用选择器说明)
2010/09/28 Javascript
js 遍历json返回的map内容示例代码
2013/10/29 Javascript
jquery 设置元素相对于另一个元素的top值(实例代码)
2013/11/06 Javascript
js+canvas绘制矩形的方法
2016/01/28 Javascript
jQuery UI Bootstrap是什么?
2016/06/17 Javascript
利用JavaScript在网页实现八数码启发式A*算法动画效果
2017/04/16 Javascript
Vue.js手风琴菜单组件开发实例
2017/05/16 Javascript
React服务端渲染(总结)
2017/07/01 Javascript
EasyUI实现下拉框多选功能
2017/11/07 Javascript
javascript中的event loop事件循环详解
2018/12/14 Javascript
Vue使用鼠标在Canvas上绘制矩形
2020/12/24 Vue.js
详解Vue的七种传值方式
2021/02/08 Vue.js
详谈Python3 操作系统与路径 模块(os / os.path / pathlib)
2018/04/26 Python
Python爬取爱奇艺电影信息代码实例
2019/11/26 Python
python字符串下标与切片及使用方法
2020/02/13 Python
基于python检查SSL证书到期情况代码实例
2020/04/04 Python
Python爬虫破解登陆哔哩哔哩的方法
2020/11/17 Python
CSS3 实现图形下落动画效果
2020/11/13 HTML / CSS
Wiggle中国:英国骑行、跑步、游泳 & 铁三运动装备专卖网店
2016/08/02 全球购物
美国钻石商店:Zales
2016/11/20 全球购物
世界上最大的罕见唱片、CD和音乐纪念品网上商店:991.com
2018/05/03 全球购物
利达恒信公司.NET笔试题面试题
2016/03/05 面试题
一套英文Java笔试题面试题
2016/04/21 面试题
机械工程师的岗位职责
2013/11/17 职场文书
总裁岗位职责
2013/12/04 职场文书
工程专业毕业生自荐信范文
2013/12/25 职场文书
助人为乐好少年事迹材料
2014/08/18 职场文书
公司委托书格式范本
2014/09/16 职场文书
宝宝满月祝酒词
2015/08/10 职场文书
高中班主任工作总结(范文)
2019/08/20 职场文书
ubuntu20.04虚拟机无法上网的问题及解决
2022/12/24 Servers