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 Tips(4) 一些关于提高JQuery性能的Tips
Dec 19 Javascript
解决3.01版的jquery.form.js中文乱码问题的解决方法
Mar 08 Javascript
JavaScript验证18位身份证号码最后一位正确性的实现代码
Aug 07 Javascript
微信JSSDK上传图片
Aug 23 Javascript
JS实现汉字与Unicode码相互转换的方法详解
Apr 28 Javascript
bootstrap的工具提示实例代码
May 17 Javascript
微信小程序三级联动地址选择器的实例代码
Jul 12 Javascript
基于 Immutable.js 实现撤销重做功能的实例代码
Mar 01 Javascript
详解javascript 变量提升(Hoisting)
Mar 12 Javascript
微信小程序 网络通信实现详解
Jul 23 Javascript
Vue开发环境中修改端口号的实现方法
Aug 15 Javascript
js事件机制----捕获与冒泡机制实例分析
May 22 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 接口类与抽象类的实际作用
2009/11/26 PHP
腾讯微博提示missing parameter errorcode 102 错误的解决方法
2014/12/22 PHP
php使用CURL不依赖COOKIEJAR获取COOKIE的方法
2015/06/17 PHP
thinkphp实现163、QQ邮箱收发邮件的方法
2015/12/18 PHP
PHP类的声明与实例化及构造方法与析构方法详解
2016/01/26 PHP
微信公众号开发之文本消息自动回复php代码
2016/08/08 PHP
WordPress 照片lightbox效果的运用几点
2009/06/22 Javascript
js的onload事件及初始化按钮事件示例代码
2013/09/25 Javascript
jQuery 获取/设置/删除DOM元素的属性以a元素为例
2014/05/23 Javascript
JS中产生20位随机数以0-9为例也可以是a-z A-Z
2014/08/01 Javascript
javascript获取元素离文档各边距离的方法
2015/02/13 Javascript
Javascript writable特性介绍
2015/02/27 Javascript
js实现匹配时换色的输入提示特效代码
2015/08/17 Javascript
使用jquery动态加载Js文件和Css文件
2015/10/24 Javascript
每天一篇javascript学习小结(属性定义方法)
2015/11/19 Javascript
Javascript中的迭代、归并方法详解
2016/06/14 Javascript
Javascript之深入浅出prototype
2017/02/06 Javascript
AngularJS页面传参的5种方式
2017/04/01 Javascript
Vue.js实战之通过监听滚动事件实现动态锚点
2017/04/04 Javascript
关于使用js算总价的问题
2017/06/23 Javascript
JS检测window.open打开的窗口是否关闭
2017/06/25 Javascript
理解javascript async的用法
2017/08/22 Javascript
使用Fullpage插件快速开发整屏翻页的页面
2017/09/13 Javascript
mint-ui的search组件在键盘显示搜索按钮的实现方法
2017/10/27 Javascript
JavaScript使用表单元素验证表单的示例代码
2019/08/20 Javascript
解决vue项目刷新后,导航菜单高亮显示的位置不对问题
2019/11/01 Javascript
Android模拟器无法启动,报错:Cannot set up guest memory ‘android_arm’ Invalid argument的解决方法
2016/07/01 Python
Python绘制股票移动均线的实例
2019/08/24 Python
日本高端护肤品牌:Tatcha
2016/08/29 全球购物
Lululemon英国官网:加拿大瑜伽服装品牌
2019/01/14 全球购物
节约粮食标语
2014/06/18 职场文书
群众路线剖析材料(四风问题)
2014/10/08 职场文书
求职导师推荐信范文
2015/03/27 职场文书
党员学习型组织心得体会
2019/06/21 职场文书
SQL 窗口函数实现高效分页查询的案例分析
2021/05/21 SQL Server
vue @ ~ 相对路径 路径别名设置方式
2022/06/05 Vue.js