当前位置: 首页 > 图文教程 > 网络编程 > Javascript > Javascript学习笔记7 原型链的原理

Javascript
可实现多表单提交的javascript函数
比较详细的关于javascript中void(0)的具体含义解释
随机显示经典句子或诗歌的javascript脚本
javascript实现的多条新闻公告系统
解析arp病毒背后利用的Javascript技术附解密方法
比较详细的javascript对象的property和prototype是什么一种关系
访问百度和谷歌网速测试的javascript代码
javascript 动态改变层的Z-INDEX的代码style.zIndex
javascript+css实现单击颜色褪去效果
javascript 表单日期选择效果
比较简单的javascript实现input双击后可以编辑
javascript实现的颜色块滑动的动态效果
js实现网页检测是否安装了 Flash Player 插件
javascript 实现父窗口引用弹出窗口的值的脚本
javascript 实现双击才能打开链接的方法
用javascript实现兼容IE7的类库 IE7_0_9.zip提供下载
document.createElement("A")比较不错的属性
用javascript实现不按Ctrl实现Multiple Select多选
JavaScript-世界上误解最深的语言分析
IE和Mozilla的兼容性汇总event

No. « 76 77 78 79 »

技术文章搜索

关键字

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

出处:互联网   整理: 软晨网（RuanChen.com）   发布: 2010-01-20   浏览: 350 ::
收藏到网摘: n/a

说到prototype，就不得不先说下new的过程。 我们先看看这样一段代码：
复制代码 代码如下:

<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__！