Javascript原型鏈的原理詳解

更新時間：2016年01月05日 16:11:57 作者：孤傲蒼狼

這篇文章主要介紹了Javascript原型鏈的原理,結(jié)合實例形式深入分析了JavaScript原型鏈的原理與使用技巧,需要的朋友可以參考下

本文實例分析了Javascript原型鏈的原理。分享給大家供大家參考，具體如下：

一、JavaScript原型鏈

ECMAScript中描述了原型鏈的概念，并將原型鏈作為實現(xiàn)繼承的主要方法。其基本思想是利用原型讓一個引用類型繼承另一個引用類型的屬性和方法。在JavaScript中，用 __proto__ 屬性來表示一個對象的原型鏈。當查找一個對象的屬性時，JavaScript 會向上遍歷原型鏈，直到找到給定名稱的屬性為止！

比如現(xiàn)在有如下的代碼：

擴展Object類，添加Clone和Extend方法

/*擴展Object類，添加Clone，JS實現(xiàn)克隆的方法*/
Object.prototype.Clone = function(){
  var objClone;
  if (this.constructor == Object){
    objClone = new this.constructor(); 
  }else{
    objClone = new this.constructor(this.valueOf()); 
  }
  for(var key in this){
    if ( objClone[key] != this[key] ){ 
      if ( typeof(this[key]) == 'object' ){ 
        objClone[key] = this[key].Clone();
      }else{
        objClone[key] = this[key];
      }
    }
  }
  objClone.toString = this.toString;
  objClone.valueOf = this.valueOf;
  return objClone; 
}
/*擴展Object類，添加Extend方法來實現(xiàn)JS繼承, 目標對象將擁有源對象的所有屬性和方法*/
Object.prototype.Extend = function (objDestination, objSource) {
  for (var key in objSource) {
    if (objSource.hasOwnProperty(key) && objDestination[key] === undefined) {
      objDestination[key] = objSource[key];
    }
  }
  return objDestination;
}

定義Person類

/*定義一個Person類*/
 function Person(_name,_age){
   this.name = _name;
   this.age = _age;
}

在JavaScript中，Object類是所有類的父類，所以Person類從Object類繼承，繼承了Object類的所有public屬性和public方法，包括Object類新添加的Clone和Extend方法

可以用如下的代碼證明，Person類確實是繼承了Object類

document.write("<pre>");
var p = new Person("孤傲蒼狼",24);//創(chuàng)建一個人，名字是孤傲蒼狼
var cloneP = p.Clone();//p調(diào)用在Object類中定義的Clone方法來克隆自己，如果能得到一個cloneP，那就證明了Person類確實是繼承了Object類，所以就擁有了Clone
document.writeln("p是使用Person類以構(gòu)造函數(shù)的方式創(chuàng)建出來的對象，p.name = "+p.name+"，p.age = "+p.age);
document.writeln("cloneP是p調(diào)用Clone方法克隆出來的對象，cloneP.name = "+cloneP.name+"，cloneP.age = "+cloneP.age);
document.writeln("cloneP對象和p對象是兩個相互獨立的對象，這兩個對象的內(nèi)存地址肯定是不相等，p == cloneP的結(jié)果是："+(p == cloneP));
cloneP.name="白虎神皇";//修改cloneP的名字
document.writeln("cloneP的name被修改了，cloneP.name = "+cloneP.name);
document.writeln("cloneP的name修改了，但是不影響到p，p.name = "+p.name);
document.write("</pre>");

運行結(jié)果：

那么Person類通過神馬方式來繼承Object類的呢，是使用原型(prototye)的方式繼承的：

/*定義一個Person類*/
function Person(_name,_age){
   this.name = _name;
   this.age = _age;
}
Person.prototype = new Object();//讓Person類繼承Object類

由于JavaScript規(guī)定，任何類都繼承自O(shè)bject類，所以"Person.prototype = new Object();//讓Person類繼承Object類"即使我們不寫，我猜想JavaScript引擎也會自動幫我們加上這句話，或者是使用"Person.prototype = Object.prototype;"這種方式，讓Person類去繼承Object類。"Person.prototype = new Object();"，其實這樣就相當于Object對象是Person的一個原型，這樣就相當于了把Object對象的屬性和方法復(fù)制到了Person上了。

二、new運算符是如何工作的

我們先看看這樣一段代碼：

復(fù)制代碼代碼如下:

var p  = new Person("孤傲蒼狼",24);//創(chuàng)建一個人，名字是孤傲蒼狼

很簡單的一段代碼，我們來看看這個new究竟做了什么？我們可以把new的過程拆分成以下三步：

1.var p={}; 初始化一個對象p。

2. p.__proto__=Person.prototype;，將對象p的 __proto__ 屬性設(shè)置為 Person.prototype

3.Person.call(p,"孤傲蒼狼",24);調(diào)用構(gòu)造函數(shù)Person來初始化p。

關(guān)鍵在于第二步，我們來證明一下：

var p = new Person("孤傲蒼狼",24);//創(chuàng)建一個人，名字是孤傲蒼狼
alert("p.__proto__ === Person.prototype的結(jié)果是："+(p.__proto__ === Person.prototype));

在火狐下的運行結(jié)果是：

這段代碼會返回true。說明我們步驟2的正確。

注意：__proto__這個屬性只有在firefox或者chrome瀏覽器中才是公開允許訪問的，因此，其他基于IE內(nèi)核的瀏覽器是不會返回true的。

那么__proto__是什么？在這里簡單地說下。每個對象都會在其內(nèi)部初始化一個屬性，就是 __proto__，當我們訪問一個對象的屬性時，如果這個對象內(nèi)部不存在這個屬性，那么他就會去__proto__里找這個屬性，這個 __proto__又會有自己的__proto__，于是就這樣一直找下去，也就是我們平時所說的原型鏈的概念。

按照標準，__proto__是不對外公開的，也就是說是個私有屬性，在IE下是無法訪問__proto__屬性的，但是Firefox的引擎將他暴露了出來成為了一個公有的屬性，我們可以對外訪問和設(shè)置。

好，概念說清了，讓我們看一下下面這些代碼：

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

這段代碼很簡單，我們看下為什么p可以訪問Person的Say。

首先

復(fù)制代碼代碼如下:

var p=new Person();

可以得出

復(fù)制代碼代碼如下:

p.__proto__=Person.prototype

那么當我們調(diào)用p.Say()時，首先p中沒有Say這個屬性，于是，他就需要到他的__proto__中去找，也就是Person.prototype，而我們在上面定義了

Person.prototype.Say=function(){
    alert("Person say");
};

于是，就找到了這個方法。

接下來，讓我們看個更復(fù)雜的。

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

我們來做這樣的推導：

復(fù)制代碼代碼如下:

var p=new Programmer();

可以得出

復(fù)制代碼代碼如下:

p.__proto__=Programmer.prototype;

而在上面我們指定了

復(fù)制代碼代碼如下:

Programmer.prototype=new Person();

我們來這樣拆分，

var p1=new Person();
Programmer.prototype=p1;

那么:

p1.__proto__=Person.prototype;
Programmer.prototype.__proto__=Person.prototype;

由根據(jù)上面得到

復(fù)制代碼代碼如下:

p.__proto__=Programmer.prototype

可以得到：

復(fù)制代碼代碼如下:

p.__proto__.__proto__=Person.prototype

好，算清楚了之后我們來看上面的結(jié)果,p.Say()。由于p沒有Say這個屬性，于是去 p.__proto__，也就是Programmer.prototype，也就是p1中去找，由于p1中也沒有Say，那就去 p.__proto__.__proto__，也就是Person.prototype中去找，于是就找到了Say方法。這也就是原型鏈的實現(xiàn)原理。

以下代碼展示了JS引擎如何查找屬性：

function getProperty(obj, prop) {
  if (obj.hasOwnProperty(prop))
    return obj[prop];
  else if (obj.__proto__ !== null)
    return getProperty(obj.__proto__, prop);//遞歸
  else
    return undefined;
}

范例：查找p對象的Say方法

<script type="text/javascript">
  /*查找obj對象的prop屬性*/
   function getProperty(obj, prop) {
    if (obj.hasOwnProperty(prop))
      return obj[prop];
    else if (obj.__proto__ !== null)
      return getProperty(obj.__proto__, prop);//遞歸
    else
      return undefined;
  }
  var Person = function () { };//定義Person類
  Person.prototype.Say = function () {
    alert("Person say");
  }
  Person.prototype.Salary = 50000;
  var Programmer = function () { };//定義Programmer類
  //Programmer.prototype = new Person();//讓程序員類從人這個類繼承，寫法一
  Programmer.prototype = Person.prototype;//讓程序員類從人這個類繼承，寫法二
  Programmer.prototype.WriteCode = function () {
    alert("programmer writes code");
  };
  Programmer.prototype.Salary = 500;
  var p = new Programmer();
  var SayFn = getProperty(p,"Say");//查找p對象的Say方法
  SayFn.call(p);//調(diào)用找到的Say方法
</script>

在火狐下的運行結(jié)果：