Javascript原型链原理详解

本文结合实例分析了Javascript原型链的原理。分享给大家参考，如下：

1.JavaScript原型链。

ECMAScript中描述了原型链的概念，并将原型链视为实现继承的主要方法。基本思想是使用原型使一个引用类型继承另一个引用类型的属性和方法。在JavaScript中，对象的原型链由__proto__属性表示。当寻找一个对象的属性时，JavaScript会遍历原型链，直到找到具有给定名称的属性！

例如，现在有以下代码：

展开对象类并添加克隆和扩展方法。

/*扩展Object类，添加Clone，JS实现了克隆的方法*/Object . prototype . Clone=function(){ varobjclone；if(this . constructor==Object){ objClone=new this . constructor()；} else { Objclone=new this . constructor(this . value of())；} for(此处为var键){ if (objClone[key]！=this[key]){ if(type of(this[key])==' object '){ Objclone[key]=this[key]。clone()；} else { Objclone[key]=this[key]；} } } Objclone . ToString=this . ToString；objclone . value of=this . value of；返回objClone}/*扩展Object类，增加扩展方法，实现JS继承。目标对象将具有源对象*/object . prototype . extend=function(objDestination，objSource){ for(objSource中的var键){ if(objSource . hasown property(key)objDestination[key]==undefined){ objDestination[key]=objSource[key]；} }返回objDestination}定义人员类别。

/*定义一个Person类*/function person (_ name，_ age) {this。name=_ namethis.age=_ age}在JavaScript中，Object类是所有类的父类，因此Person类继承了Object类和Object类的所有公共属性和方法，包括Object类新添加的Clone和Extend方法。

下面的代码可以证明Person类确实继承了Object类。

document . write(' pre ')；P=新人('孤傲沧浪'，24)；//创建一个人，名字叫孤傲沧浪var cloneP=p . Clone()；//p调用Object类中定义的Clone方法来克隆自身。如果能得到一个cloneP，就证明Person类确实继承了Object类，所以就有了Clonedocument.writeln('p是用Person类作为构造函数创建的对象，p.name=' p.name '，p . age=' p . age ')；Document.writeln('CloneP是通过p调用CloneP方法克隆的对象，cloneP.name=' cloneP.name '，CloneP . age=' CloneP . age)；Document.writeln('cloneP对象和P对象是两个独立的对象，这两个对象的内存地址肯定不相等。p==cloneP的结果是：“(p==cloneP))；克隆人名称='白虎玉帝'；//修改cloneP的名称document.writeln('cloneP的名称已被修改，cloneP . name=' cloneP . name ')；Document.writeln('cloneP '的' cloneP name '已被修改，但不影响p，p . name=' p . name ')；document . write('/pre ')；运行结果：

以神马的方式继承对象类的Person类呢？它是通过原型的方式继承的：

/*定义一个Person类*/function person (_ name，_ age) {this。name=_ namethis.age=_ age} person . prototype=new Object()；//让Person类继承Object类。按照JavaScript的规定，任何类都继承自Object类，所以‘person . prototype=new Object()；//让Person类继承Object类‘即使我们不写，我猜JavaScript引擎也会自动为我们加上这句话，或者用‘Person’。原型=对象。原型。这样，让Person类继承Object类。person . prototype=new Object()；”事实上，这相当于对象是人的原型，相当于将对象的属性和方法复制给人。

第二，新的操作员是如何工作的？

先来看看这段代码：复制代码如下：var p=new Person('寂寞沧浪'，24)；//创造一个叫孤独沧浪的人。

一段非常简单的代码，让我们看看这个新的做了什么。我们可以将新的过程分为以下三个步骤：

1 . var p={ }；初始化对象p。

2.p. _ _原型_ _ _=人.原型；将对象p的__proto__属性设置为Person.prototype

3.人称(p，《寂寞沧浪》，24)；调用构造函数Person初始化p。

关键在于第二步，我们来证明一下：

P=新人('孤傲沧浪'，24)；//创建一个名为孤傲沧浪警戒的人(' p. _ _ proto _ _==person。原型导致：“(p. _ _ proto _ _==person。原型))；在Firefox下运行的结果是：

这段代码返回真。说明我们的第2步是正确的。

注意：__proto__只在firefox或chrome浏览器中公开访问，所以其他基于IE内核的浏览器不会返回true。

那么什么是原型呢？在这里简单说一下。每个对象都会初始化其中的一个属性，即__proto__。当我们访问一个对象的属性时，如果这个对象中不存在这个属性，那么他就会在__proto__中寻找这个属性，而这个__proto__会有自己的__proto__所以我们一直寻找，这就是我们通常所说的原型链的概念。

按照标准，__proto__不对公众开放，也就是说它是私有财产，在IE下是不可能访问__proto__财产的，但是火狐引擎已经把它暴露为公共财产，我们可以对外访问和设置。

好了，概念清楚了，我们来看看下面的代码：

脚本类型=' text/JavaScript ' var Person=function(){ }；Person . prototype . say=function(){ alert(' Person say ')；} var p=new Peer()；比如说()；/脚本很简单。让我们看看为什么P可以访问Person的Say。

首先复制代码如下： var p=new Person()；

可以得出复制的代码如下：p。_ _ proto _ _=人。原型。

然后我们调用p.Say()，首先p里面没有Say属性，所以他需要查看他的__proto__，也就是Person.prototype，我们上面定义了。

Person . prototype . say=function(){ alert(' Person say ')；};所以，我找到了这个方法。

接下来，让我们看一个更复杂的。

脚本类型=' text/JavaScript ' var Person=function(){ }；Person . prototype . say=function(){ alert(' Person say ')；} Person.prototype.Salary=5万；var程序员=function(){ }；programmer . prototype=new Person()；//让程序员类从人类类继承programmer . prototype . write code=function(){ alert('程序员写代码')；};程序员.原型.工资=500；var p=新程序员()；比如说()；p . WriteCode()；警戒(p .工资)；/script我们来做这个推演：复制代码如下： var p=new Programmer()；

可以得出复制码如下：p。_ _ proto _ _=程序员。原型；

另一方面，我们为复制指定了以下代码：程序员。prototype=new person()；

我们这样分开吧，

var p1=新人员()；Programmer.prototype=p1然后是：

p1。__原型_ _ _=人.原型；程序员.原型. _ _ proto _ _=人.原型；根据以上，复制的代码如下：p。_ _ proto _ _=程序员。原型。

可以得到复制的代码如下：p。_ _原型_ _。_ _ proto _ _=人。原型。

好了，我们做了明确的计算后再来看上面的结果，p.Say()。p没有Say属性，所以转到p.__proto__，也就是Programmer.prototype，也就是p1。由于p1没有Say，所以它转到p. _ _ proto _ _ _ _ proto _ _，即Person.prototype，并找到Say方法。这就是原型链的实现原理。

以下代码显示了JS引擎如何查找属性：

函数getProperty(obj，prop){ if(obj . Hasownproperty(prop))返回obj[prop]；否则如果。__proto__！==null)返回getProperty(obj。__proto__，prop)；//递归else返回未定义；}示例：找到p对象的Say方法。

脚本类型='text/javascript' /*查找目标文件对象的支柱属性*/函数getProperty(obj，prop){ if(obj。HasownProperty(prop))返回道具；否则如果__proto__！==null)返回getProperty(obj .__proto__，prop)；//递归否则返回未定义的} var Person=function(){ }；//定义人类人。原型。say=function(){ alert(' Person say ')；} Person.prototype .薪资=5万；定义变量程序员=function(){ }；//定义节目编排者类//程序员。prototype=new Person()；//让程序员类从人这个类继承，写法一程序员。原型=人。原型；//让程序员类从人这个类继承，写法二程序员。原型。写代码=function(){ alert('程序员写代码');};程序员。原型。工资=500;var p=新程序员();var SayFn=getProperty(p，' Say ')；//查找p对象的说方法sayfn。呼叫(p)；//调用找到的说方法/script在火狐下的运行结果：

其实原型只是一个假象，他在实现原型链中只是起到了一个辅助作用，换句话说，他只是在新的的时候有着一定的价值，而原型链的本质，其实在于__原型_ _ .

希望本文所述对大家Java脚本语言程序设计有所帮助。