JavaScript中的几个关键概念的理解-原型链的构建


Posted in Javascript onMay 12, 2011

Javascript中所有function中都有一个prototype属性,并且这个prototype属性是一个object类型的对象,所有由该function构造出来的对象都具有这个prototype上的特性,也就是说可以用构造出来的对象直接访问prototype上的属性和方法。
下面一段代码演示prototype的使用方法:

function Staff(name) { 

this.name = name; 

} 

Staff.prototype.say = function() { 

alert(this.name + " say hello"); 

} 

var staff1 = new Staff("hunter"); 

var staff2 = new Staff("dangjian"); 

staff1.say(); 

staff2.say();

运行如上的程序,可知prototype上的属性和方法可以通过创建的对象之间调用,更重要的是prototype中的属性和方法是在同类型的对象中是共享的
alert( staff1.say == staff2.say);

prototype另外一个常用的特性是通过prototype构建对象的继承关系,通过把基类对象赋给子类的prototype的方式可以模拟面向对象中的继承关系,这就是大家经常说的JavaScript的面向对象机制。如下的代码段演示了利用这一特性构建对象的继承关系:

function Staff(name) { // 基类 

this.name = name; 

} 

Staff.prototype.say = function() { 

alert(this.name + " say hello"); 

} 

function ManStaff(name, age) { // 子类 

this.name = name; 

this.age = age; 

} 

ManStaff.prototype = new Staff(); // 建立继承关系 

var manStaff1 = new ManStaff("hunter", 22); 

var manStaff2 = new ManStaff("dangjian", 32); 

manStaff1.say(); 

manStaff2.say();

运行代码可知,ManStaff对象中具有了基类Staff中的Say方法,这种继承方式在JavaScript中是通过prototype链来实现的。大家可能熟悉以上的prototype用法,可是作为程序员,我们不光要知道其用法,我们更应该理解其可是prototype的内部机制。下面我们来分析prototype的原理以及prototype链的实现。
要理解prototype的机制就必须要了解JavaScript中function的创建方式。
当代码执行到function Staff(name) {this.name = name;}时,相当于执行var Staff = new Function(“name”, "this.name = name”)解释器将使用预定义好的Function() constructor,来创建一个function类型的object出来,即Staff。

随后给创建好的Staff对象添加__proto__属性,并赋值为Function的构造器的prototype,这一步是所有对象创建过程中都有的步骤,在执行类似var x = new X()方式是,都会把X的prototype赋值给x的__proto__,类似如下的赋值:

Staff.__proto__ = Function.prototype;

接下来给Staff创建prototype属性,这一步是创建function类型的对象具有的步骤,创建的过程如下伪代码:
var o = new Object(); 

o.constructor = Base; 

Staff.prototype = o;

如上的分析我们可知,当创建对象时,会创建一个私有属性__proto__,当创建function是会创建一个prototype属性。因为Staff是一个function类型的对象,所以会同时具有这两个属性。
这两个属性是构建原型链的关键属性。我们来分析执行代码 var staff1 = new Staff(“hunter”)时,原型是如何传递的。
根据如上分析,staff1.__proto__ = Staff.prototype,而Staff.prototype又是一个由Object创建的对象,即Staff.prototype.__proto__ = Object.prototype,所以staff1.__proto__ .__proto__ 指向的是Object.prototype,即staff1.__proto__ .__proto__ == Object.prototype,这就是原型链,当要读取某个对象的属性时,JS首先找对象本身是否有这个属性,如果没有就会顺着原型链一直寻找这个属性。
知道了原型链的原理,那么就很容易根据这个原理来构建Javascript中的对象继承。
由如上的分析,我们可知原型链的顶端都是Object.prototype,这就意味着在构建的继承关系中Object是所有对象的基类,可以运行如下的代码验证。
Object.prototype.location = "China"; 

function Staff(name) { // 基类 

this.name = name; 

} 

Staff.prototype.say = function() { 

alert(this.name + " say hello"); 

} 

var ManStaff1 = new Staff("hunter"); 

var ManStaff2 = new Staff("dangjian"); 

alert(ManStaff1.location); 

alert(ManStaff2.location);

运行结果知道,Object是Staff的基类,那么要如何构建一个Staff的子类呢?
理解了上面函数的建立原理,我们很容易写出如下的代码:
function Staff(name) { // 基类 

this.name = name; 

} 

Staff.prototype.say = function() { 

alert(this.name + " say hello"); 

} 

function ManStaff(name, age) { // 子类 

Staff.call(this,name); 

this.age = age; 

} 

ManStaff.prototype = new Staff(); // 建立继承关系 

var ManStaff1 = new ManStaff("hunter", 22); 

var ManStaff2 = new ManStaff("dangjian", 32); 

ManStaff1.say(); 

ManStaff2.say();

建立继承关系的就是这句:ManStaff.prototype = new Staff(); ,继承关系推算如下:ManStaff1.__proto__ = =ManStaff.prototype, ManStaff.prototype.__proto__ = Staff.prototype, Staff.prototype.__proto__ == Object.prototype;则ManStaff1.__proto__.__proto__.__proto__ == Object.prototype。
javascript中的这种继承关系比较传统面向对象的继承关系更松散,构建方式也比较难以理解,但是作为脚本语言,其功能已经是非常强大了。
Javascript 相关文章推荐
使用jQuery向asp.net Mvc传递复杂json数据-ModelBinder篇
May 07 Javascript
jQuery获取地址栏参数插件(模仿C#)
Oct 26 Javascript
js 关键词高亮(根据ID/tag高亮关键字)案例介绍
Jan 21 Javascript
jquery入门——事件机制之事件中的冒泡现象示例解释
Sep 12 Javascript
Javascript实现颜色rgb与16进制转换的方法
Apr 18 Javascript
Javascript进制转换实例分析
May 14 Javascript
JS基于递归实现倒计时效果的方法
Nov 26 Javascript
BootStrap 动态表单效果
Jun 02 Javascript
webpack 模块热替换原理
Apr 09 Javascript
vue如何安装使用Quill富文本编辑器
Sep 21 Javascript
微信小程序缓存支持二次开发封装实现解析
Dec 16 Javascript
JS数据类型(基本数据类型、引用数据类型)及堆和栈的区别分析
Mar 04 Javascript
Jqyery中同等与js中windows.onload的应用
May 10 #Javascript
JQuery 1.6发布 性能提升,同时包含大量破坏性变更
May 10 #Javascript
JavaScript中为元素加上name属性的方法
May 09 #Javascript
JavaScript 放大镜 移动镜片效果代码
May 09 #Javascript
JavaScript 放大镜 放大倍率和视窗尺寸
May 09 #Javascript
关于JavaScript的with 语句的使用方法
May 09 #Javascript
JavaScript的parseInt 取整使用
May 09 #Javascript
You might like
php中函数的形参与实参的问题说明
2010/09/01 PHP
Win7下手动安装apache2.2、php5.4笔记
2015/04/03 PHP
Mac环境下php操作mysql数据库的方法分享
2015/05/11 PHP
fsockopen pfsockopen函数被禁用,SMTP发送邮件不正常的解决方法
2015/09/20 PHP
yii2框架中使用下拉菜单的自动搜索yii-widget-select2实例分析
2016/01/09 PHP
php查询操作实现投票功能
2016/05/09 PHP
php 数组处理函数extract详解及实例代码
2016/11/23 PHP
PHP连续签到功能实现方法详解
2019/12/04 PHP
幻宇的层模拟窗口效果-提供演示和下载
2007/01/20 Javascript
层序遍历在ExtJs的TreePanel中的应用
2009/10/16 Javascript
jQuery lazyload 的重复加载错误以及修复方法
2010/11/19 Javascript
UI Events 用户界面事件
2012/06/27 Javascript
javascript自适应宽度的瀑布流实现思路
2013/02/20 Javascript
javascript 操作符(~、&、|、^、)使用案例
2014/12/31 Javascript
jQuery实现鼠标经过弹出提示信息的地图热点效果
2015/08/07 Javascript
JavaScript获取当前运行脚本文件所在目录的方法
2016/02/03 Javascript
详解angular2实现ng2-router 路由和嵌套路由
2017/03/24 Javascript
Vue实现双向数据绑定
2017/05/03 Javascript
基于vue-cli创建的项目的目录结构及说明介绍
2017/11/23 Javascript
jQuery实现右侧抽屉式在线客服功能
2017/12/25 jQuery
小程序tab页无法传递参数的方法
2018/08/03 Javascript
react配置antd按需加载的使用
2019/02/11 Javascript
原生JS实现无缝轮播图片
2020/06/24 Javascript
使用vue构建多页面应用的示例
2020/10/22 Javascript
react ant Design手动设置表单的值操作
2020/10/31 Javascript
[05:43]VG.R战队教练Mikasa专访:为目标从未停止战斗
2016/08/02 DOTA
[00:32]2018DOTA2亚洲邀请赛Mineski出场
2018/04/04 DOTA
python中logging库的使用总结
2017/10/18 Python
Python代码使用 Pyftpdlib实现FTP服务器功能
2019/07/22 Python
python中rb含义理解
2020/06/18 Python
python else语句在循环中的运用详解
2020/07/06 Python
Android本地应用打开方法——通过html5写连接
2016/03/11 HTML / CSS
加拿大最大的五金、家居装修和园艺产品商店:RONA
2017/01/27 全球购物
电气工程自动化求职信
2014/03/14 职场文书
冰峪沟导游词
2015/02/09 职场文书
最新的离婚协议书范本!
2019/07/02 职场文书