Javascript学习笔记7 原型链的原理


Posted in Javascript onJanuary 11, 2010

我们先看看这样一段代码:

<script type="text/javascript"> 
var Person = function () { }; 
var p = new Person(); 
</script>

很简单的一段代码,我们来看看这个new究竟做了什么?我们可以把new的过程拆分成以下三步:

<1> var p={}; 也就是说,初始化一个对象p。

<2> p.__proto__=Person.prototype;

<3> Person.call(p);也就是说构造p,也可以称之为初始化p。

关键在于第二步,我们来证明一下:

<script type="text/javascript"> 
var Person = function () { }; 
var p = new Person(); 
alert(p.__proto__ === Person.prototype); 
</script>

这段代码会返回true。说明我们步骤2的正确。

那么__proto__是什么?我们在这里简单地说下。每个对象都会在其内部初始化一个属性,就是__proto__,当我们访问一个对象的属性时,如果这个对象内部不存在这个属性,那么他就会去__proto__里找这个属性,这个__proto__又会有自己的__proto__,于是就这样一直找下去,也就是我们平时所说的原型链的概念。

按照标准,__proto__是不对外公开的,也就是说是个私有属性,但是Firefox的引擎将他暴露了出来成为了一个共有的属性,我们可以对外访问和设置。

好,概念说清了,让我们看一下下面这些代码:

<script type="text/javascript"> 
var Person = function () { }; 
Person.prototype.Say = function () { 
alert("Person say"); 
} 
var p = new Person(); 
p.Say(); 
</script>

这段代码很简单,相信每个人都这样写过,那就让我们看下为什么p可以访问Person的Say。

首先var p=new Person();可以得出p.__proto__=Person.prototype。那么当我们调用p.Say()时,首先p中没有Say这个属性,于是,他就需要到他的__proto__中去找,也就是Person.prototype,而我们在上面定义了Person.prototype.Say=function(){}; 于是,就找到了这个方法。

好,接下来,让我们看个更复杂的。

<script type="text/javascript"> 
var Person = function () { }; 
Person.prototype.Say = function () { 
alert("Person say"); 
} 
Person.prototype.Salary = 50000; 
var Programmer = function () { }; 
Programmer.prototype = new Person(); 
Programmer.prototype.WriteCode = function () { 
alert("programmer writes code"); 
}; 
Programmer.prototype.Salary = 500; 
var p = new Programmer(); 
p.Say(); 
p.WriteCode(); 
alert(p.Salary); 
</script>

我们来做这样的推导:

var p=new Programmer()可以得出p.__proto__=Programmer.prototype;

而在上面我们指定了Programmer.prototype=new Person();我们来这样拆分,var p1=new Person();Programmer.prototype=p1;那么:

p1.__proto__=Person.prototype;

Programmer.prototype.__proto__=Person.prototype;

由根据上面得到p.__proto__=Programmer.prototype。可以得到p.__proto__.__proto__=Person.prototype。

好,算清楚了之后我们来看上面的结果,p.Say()。由于p没有Say这个属性,于是去p.__proto__,也就是Programmer.prototype,也就是p1中去找,由于p1中也没有Say,那就去p.__proto__.__proto__,也就是Person.prototype中去找,于是就找到了alert(“Person say”)的方法。

其余的也都是同样的道理。

这也就是原型链的实现原理。

最后,其实prototype只是一个假象,他在实现原型链中只是起到了一个辅助作用,换句话说,他只是在new的时候有着一定的价值,而原型链的本质,其实在于__proto__!

Javascript 相关文章推荐
CSS常用网站布局实例
Apr 03 Javascript
js获取当前日期代码适用于网页头部
Jun 27 Javascript
jQuery获取URL请求参数的方法
Jul 18 Javascript
JS+CSS实现的经典tab选项卡效果代码
Sep 16 Javascript
TypeOf这些知识点你了解吗
Feb 21 Javascript
详解Javascript中的Object对象
Feb 28 Javascript
JavaScript弹出对话框的三种方式
Mar 23 Javascript
json2.js 入门教程之使用方法与实例分析
Sep 14 Javascript
快速搭建React的环境步骤详解
Nov 06 Javascript
jQuery分组选择器简单用法示例
Apr 04 jQuery
js实现图片3D轮播效果
Sep 21 Javascript
浅谈Web Storage API的使用
Jun 23 Javascript
Javascript学习笔记6 prototype的提出
Jan 11 #Javascript
Javascript学习笔记5 类和对象
Jan 11 #Javascript
Javascript学习笔记4 Eval函数
Jan 11 #Javascript
Javascript学习笔记2 函数
Jan 11 #Javascript
Javascript学习笔记1 数据类型
Jan 11 #Javascript
IE bug table元素的innerHTML
Jan 11 #Javascript
javascript instanceof 与typeof使用说明
Jan 11 #Javascript
You might like
二十行语句实现从Excel到mysql的转化
2006/10/09 PHP
php中全局变量global的使用演示代码
2011/05/18 PHP
apache mysql php 源码编译使用方法
2012/05/03 PHP
ThinkPHP写数组插入与获取最新插入数据ID实例
2014/11/03 PHP
php多线程实现方法及用法实例详解
2015/10/26 PHP
php判断str字符串是否是xml格式数据的方法示例
2017/07/26 PHP
使用PHP反射机制来构造&quot;CREATE TABLE&quot;的sql语句
2019/03/21 PHP
用js脚本控制asp.net下treeview的NodeCheck的实现代码
2010/03/02 Javascript
瀑布流布局并自动加载实现代码
2013/03/12 Javascript
深入理解Javascript动态方法调用与参数修改的问题
2013/12/10 Javascript
EasyUI布局 高度自适应
2016/06/04 Javascript
浅析JavaScript函数的调用模式
2016/08/10 Javascript
js实现小窗口拖拽效果
2016/12/03 Javascript
树结构之JavaScript
2017/01/24 Javascript
详细AngularJs4的图片剪裁组件的实例
2017/07/12 Javascript
js es6系列教程 - 新的类语法实战选项卡(详解)
2017/09/02 Javascript
在Vue项目中使用d3.js的实例代码
2018/05/01 Javascript
基于vue-element组件实现音乐播放器功能
2018/05/06 Javascript
使用webpack搭建vue环境的教程详解
2019/12/31 Javascript
element el-tree组件的动态加载、新增、更新节点的实现
2020/02/27 Javascript
JS手写一个自定义Promise操作示例
2020/03/16 Javascript
Vue表单提交点击事件只允许点击一次的实例
2020/10/23 Javascript
[53:52]OG vs EG 2018国际邀请赛淘汰赛BO3 第二场 8.23
2018/08/24 DOTA
python飞机大战pygame游戏背景设计详解
2019/12/17 Python
Python计算指定日期是今年的第几天(三种方法)
2020/03/26 Python
Python matplotlib可视化实例解析
2020/06/01 Python
英国最大的化装舞会服装网站:Fancydress.com
2017/08/15 全球购物
英国一家集合了众多有才华设计师品牌的奢侈店:Wolf & Badger
2018/04/18 全球购物
德国价格合理的品牌商品购物网站:averdo
2019/03/21 全球购物
留学自荐信
2013/10/10 职场文书
黄金酒广告词
2014/03/21 职场文书
教师党员公开承诺事项
2014/05/28 职场文书
节约用水的口号
2014/06/20 职场文书
2015年人力资源部工作总结
2015/04/30 职场文书
小学生教师节广播稿
2015/08/19 职场文书
【DOTA2】高能暴走TK秀!PSG LGD vs ASTER - DPC 2022 WINTER TOUR CN
2022/04/02 DOTA