javascript 原型鏈

1、什麼是原型鏈機制 　　

 　　首先來看一段代碼：

 1 var person = {name : "Peter"};
 2 
 3 //Peter
 4 console.log(person.name);
 5 
 6 //undefined
 7 console.log(person.age);
 8 
 9 Object.prototype.age = 100;
10 
11 //100
12 console.log(person.age);

 　  爲何person.age 能夠訪問 Object.prototype.age 呢？

這裏就要引出原型鏈了:

　　當須要獲取一個對象的某個屬性或方法時，首先在對象自身查找該屬性，找不到的話，會沿着原型鏈向上查找，直到在某個原型中找到該屬性，若是到達原型鏈頂端依然找不到，則返回undefined.

2、原型鏈的做用

1. 面向對象時，繼承主要就依靠原型鏈來實現
2. 定義構造函數時，使用原型來防止方法的重複定義(靜態方法)
3. ...發揮你的想象

繼承實例:

 1 function Father(){ ...}
 2 
 3 function Son(){...}
 4 
 5 var father = new Father();
 6 
 7 //實現繼承,全部的son繼承自father對象
 8 Son.prototype = father;
 9 
10 var son = new Son();
11 
12 //true
13 son instanceof Father;

 

使用原型來防止方法重複定義:

 1 //使用這種方法來定義構造函數時，每次new Cat都從新建立了一個bite方法
 2 function Cat(){
 3        this.name = "咪咪";
 4        function bite(){...}
 5 }
 6 
 7 //這種方式，在new Dog時，全部實例都用的同一個bite方法
 8 function Dog(){
 9       this.name = "旺財";
10 }
11 
12 Dog.prototype.bite = function(){...}

 

 

3、理解原型鏈原理

想要理解javascript的原型鏈機制，首先要有這些概念:

• 除了5種基本類型(number, string, boolean, null, undefined)外,全部東西都是對象,function也不例外
• 每一個對象都有本身的構造函數
  • 　　用字面量定義的對象(var obj = {})的構造函數是Object()
  • 　　全部函數的構造函數都是Function()函數. (Function()也是一個函數,它的構造函數是本身)
  •       new xxx() 的 構造函數爲 xxx()
• 標準中規定, 全部對象都有一個[[proto]]屬性,它指向本對象的原型, 一般是不可訪問的，但FF和chrome中提供__proto__屬性來訪問該值

ps:基本數據類型在執行方法時會被轉換爲對應的包裝對象(Number, String, Boolean)

 

接下來，就是原型鏈的核心了,請注意，核心是[[proto]]：

1. 原型鏈是根據[[proto]]屬性，來遍歷全部原型
2. 每定義一個函數時，都會爲該函數對象產生一個prototype屬性(注意：與[[proto]]不一樣,只有函數對象纔有,筆者剛學習時老弄混),它的默認值是一個名字與函數名相同的對象 , 這個對象有個屬性constructor,指向函數自身(func.prototype.constructor === func)
3. 全部普通對象(非函數對象)的[[proto]]指向它的構造函數的prototype屬性
4. 全部函數對象(包括Function本身)的[[proto]]都指向Function.prototype屬性
5. 對於prototype屬性而言,由於它也是是一個對象,它的[[proto]]都指向Object.prototype屬性
6. Object.prototype的[[proto]]的值爲null, 它是原型鏈的頂端

你們結合文字再看網絡上流傳的圖，進一步的理解原型鏈.