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 相关文章推荐
js中的push和join方法使用介绍
Oct 08 Javascript
js判断ie版本号的简单实现代码
Mar 05 Javascript
js时间比较示例分享(日期比较)
Mar 05 Javascript
js判断字符长度及中英文数字等
Mar 19 Javascript
jquery使用jxl插件导出excel示例
Apr 14 Javascript
js调试工具Console命令详解
Oct 21 Javascript
node.js中的dns.getServers方法使用说明
Dec 08 Javascript
javascript控制层显示或隐藏的方法
Jul 22 Javascript
vue学习笔记之vue1.0和vue2.0的区别介绍
May 17 Javascript
js 奇葩技巧之隐藏代码
Aug 11 Javascript
利用jqprint插件打印页面内容的实现方法
Jan 09 Javascript
教你如何编写Vue.js的单元测试的方法
Oct 17 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
原生JS实现Ajax通过POST方式与PHP进行交互的方法示例
2018/05/12 PHP
BOOM vs RR BO5 第一场 2.14
2021/03/10 DOTA
深入聊聊Array的sort方法的使用技巧.详细点评protype.js中的sortBy方法
2007/04/12 Javascript
跨浏览器的 mouseenter mouseleave 以及 compareDocumentPosition的使用说明
2010/05/04 Javascript
jquery uaMatch源代码
2011/02/14 Javascript
jQuery $.get 的妙用 访问本地文本文件
2012/07/12 Javascript
javascript函数作用域学习示例(js作用域)
2014/01/13 Javascript
JavaScript中string转换成number介绍
2014/12/31 Javascript
JavaScript中的值类型转换介绍
2014/12/31 Javascript
在React框架中实现一些AngularJS中ng指令的例子
2016/03/06 Javascript
javascript 定时器工作原理分析
2016/12/03 Javascript
Bootstrap基本组件学习笔记之按钮组(8)
2016/12/07 Javascript
详解layui中的树形关于取值传值问题
2018/01/16 Javascript
vue2.0 实现页面导航提示引导的方法
2018/03/13 Javascript
JavaScript实现简单动态进度条效果
2018/04/06 Javascript
vue 项目地址去掉 #的方法
2018/10/20 Javascript
JavaScript实现图片轮播特效
2019/10/23 Javascript
vue学习笔记之slot插槽用法实例分析
2020/02/29 Javascript
Python内置的字符串处理函数整理
2013/01/29 Python
Flask框架Flask-Login用法分析
2018/07/23 Python
python3 面向对象__类的内置属性与方法的实例代码
2018/11/09 Python
Python实现读取txt文件中的数据并绘制出图形操作示例
2019/02/26 Python
详解Anconda环境下载python包的教程(图形界面+命令行+pycharm安装)
2019/11/11 Python
在keras中获取某一层上的feature map实例
2020/01/24 Python
Python使用lambda抛出异常实现方法解析
2020/08/20 Python
入党积极分子思想汇报
2014/01/02 职场文书
大学生职业生涯规划书前言
2014/01/09 职场文书
2014年迎新年联欢会活动策划方案
2014/02/26 职场文书
社保委托书怎么写
2014/08/02 职场文书
2014乡镇党委副书记对照检查材料思想汇报
2014/10/09 职场文书
幼儿园小班个人总结
2015/02/12 职场文书
2015年评职称个人工作总结
2015/10/15 职场文书
护士爱岗敬业心得体会
2016/01/25 职场文书
基于python的matplotlib制作双Y轴图
2021/04/20 Python
Python之matplotlib绘制饼图
2022/04/13 Python
如何vue使用el-table遍历循环表头和表体数据
2022/04/26 Vue.js