javascript學(xué)習(xí)筆記（五）原型和原型鏈詳解
私有變量和函數(shù)
在函數(shù)內(nèi)部定義的變量和函數(shù)，如果不對(duì)外提供接口，外部是無法訪問到的，也就是該函數(shù)的私有的變量和函數(shù)。
<script type="text/javascript">
function Test(){
var color = "blue";//私有變量
var fn = function() //私有函數(shù)
{
}
}
</script>
這樣在函數(shù)對(duì)象Test外部無法訪問變量color和fn，他們就變成私有的了：
var obj = new Test();
alert(obj.color);//彈出 undefined
alert(obj.fn);//同上
靜態(tài)變量和函數(shù)
當(dāng)定義一個(gè)函數(shù)后通過點(diǎn)號(hào) “.”為其添加的屬性和函數(shù)，通過對(duì)象本身仍然可以訪問得到，但是其實(shí)例卻訪問不到，這樣的變量和函數(shù)分別被稱為靜態(tài)變量和靜態(tài)函數(shù)。
<script type="text/javascript">
function Obj(){
}
Obj.num = 72;//靜態(tài)變量
Obj.fn = function() //靜態(tài)函數(shù)
{
}
alert(Obj.num);//72
alert(typeof Obj.fn)//function
var t = new Obj();
alert(t.name);//undefined
alert(typeof t.fn);//undefined
</script>
實(shí)例變量和函數(shù)
在面向?qū)ο缶幊讨谐艘恍旌瘮?shù)我們還是希望在對(duì)象定義的時(shí)候同時(shí)定義一些屬性和方法，實(shí)例化后可以訪問，JavaScript也能做到這樣
<script type="text/javascript">
function Obj(){
this.a=[]; //實(shí)例變量
this.fn=function(){ //實(shí)例方法
}
}
console.log(typeof Obj.a); //undefined
console.log(typeof Obj.fn); //undefined
var o=new Obj();
console.log(typeof o.a); //object
console.log(typeof o.fn); //function
</script>
為實(shí)例變量和方法添加新的方法和屬性
<script type="text/javascript">
function Obj(){
this.a=[]; //實(shí)例變量
this.fn=function(){ //實(shí)例方法
}
}
var o1=new Obj();
o1.a.push(1);
o1.fn={};
console.log(o1.a); //[1]
console.log(typeof o1.fn); //object
var o2=new Obj();
console.log(o2.a); //[]
console.log(typeof o2.fn); //function
</script>
在o1中修改了a和fn，而在o2中沒有改變，由于數(shù)組和函數(shù)都是對(duì)象，是引用類型，這就說明o1中的屬性和方法與o2中的屬性與方法雖然同名但卻不是一個(gè)引用，而是對(duì)Obj對(duì)象定義的屬性和方法的一個(gè)復(fù)制。
這個(gè)對(duì)屬性來說沒有什么問題，但是對(duì)于方法來說問題就很大了，因?yàn)榉椒ǘ际窃谧鐾耆粯拥墓δ?，但是卻又兩份復(fù)制，如果一個(gè)函數(shù)對(duì)象有上千和實(shí)例方法，那么它的每個(gè)實(shí)例都要保持一份上千個(gè)方法的復(fù)制，這顯然是不科學(xué)的，這可腫么辦呢，prototype應(yīng)運(yùn)而生。
基本概念
我們創(chuàng)建的每個(gè)函數(shù)都有一個(gè)prototype屬性，這個(gè)屬性是一個(gè)指針，指向一個(gè)對(duì)象，這個(gè)對(duì)象的用途是包含可以由特定類型的所有實(shí)例共享的屬性和方法。那么，prototype就是通過調(diào)用構(gòu)造函數(shù)而創(chuàng)建的那個(gè)對(duì)象實(shí)例的原型對(duì)象。
使用原型的好處是可以讓對(duì)象實(shí)例共享它所包含的屬性和方法。也就是說，不必在構(gòu)造函數(shù)中添加定義對(duì)象信息，而是可以直接將這些信息添加到原型中。使用構(gòu)造函數(shù)的主要問題就是每個(gè)方法都要在每個(gè)實(shí)例中創(chuàng)建一遍。
在JavaScript中,一共有兩種類型的值,原始值和對(duì)象值。每個(gè)對(duì)象都有一個(gè)內(nèi)部屬性 prototype ,我們通常稱之為原型。原型的值可以是一個(gè)對(duì)象,也可以是null。如果它的值是一個(gè)對(duì)象，則這個(gè)對(duì)象也一定有自己的原型。這樣就形成了一條線性的鏈，我們稱之為原型鏈。
含義
函數(shù)可以用來作為構(gòu)造函數(shù)來使用。另外只有函數(shù)才有prototype屬性并且可以訪問到，但是對(duì)象實(shí)例不具有該屬性，只有一個(gè)內(nèi)部的不可訪問的__proto__屬性。__proto__是對(duì)象中一個(gè)指向相關(guān)原型的神秘鏈接。按照標(biāo)準(zhǔn)，__proto__是不對(duì)外公開的，也就是說是個(gè)私有屬性，但是Firefox的引擎將他暴露了出來成為了一個(gè)共有的屬性，我們可以對(duì)外訪問和設(shè)置。
<script type="text/javascript">
var Browser = function(){};
Browser.prototype.run = function(){
alert("I'm Gecko,a kernel of firefox");
}
var Bro = new Browser();
Bro.run();
</script>
當(dāng)我們調(diào)用Bro.run()方法時(shí)，由于Bro中沒有這個(gè)方法，所以，他就會(huì)去他的__proto__中去找，也就是Browser.prototype，所以最終執(zhí)行了該run()方法。（在這里，函數(shù)首字母大寫的都代表構(gòu)造函數(shù)，以用來區(qū)分普通函數(shù)）
當(dāng)調(diào)用構(gòu)造函數(shù)創(chuàng)建一個(gè)實(shí)例的時(shí)候，實(shí)例內(nèi)部將包含一個(gè)內(nèi)部指針（__proto__）指向構(gòu)造函數(shù)的prototype，這個(gè)連接存在于實(shí)例和構(gòu)造函數(shù)的prototype之間，而不是實(shí)例與構(gòu)造函數(shù)之間。
<script type="text/javascript">
function Person(name){
this.name=name;
}
Person.prototype.printName=function(){
alert(this.name);
}
var person1=new Person('Byron');
var person2=new Person('Frank');
</script>
Person的實(shí)例person1中包含了name屬性，同時(shí)自動(dòng)生成一個(gè)__proto__屬性，該屬性指向Person的prototype，可以訪問到prototype內(nèi)定義的printName方法，大概就是這個(gè)樣子的:
再舉個(gè)栗子：
<script type="text/javascript">
function Animal(name) //積累構(gòu)造函數(shù)
{
this.name = name;//設(shè)置對(duì)象屬性
}
Animal.prototype.behavior = function() //給基類構(gòu)造函數(shù)的prototype添加behavior方法
{
alert("this is a "+this.name);
}
var Dog = new Animal("dog");//創(chuàng)建Dog對(duì)象
var Cat = new Animal("cat");//創(chuàng)建Cat對(duì)象
Dog.behavior();//通過Dog對(duì)象直接調(diào)用behavior方法
Cat.behavior();//output "this is a cat"
alert(Dog.behavior==Cat.behavior);//output true;
</script>
可以從程序運(yùn)行結(jié)果看出，構(gòu)造函數(shù)的prototype上定義的方法確實(shí)可以通過對(duì)象直接調(diào)用到，而且代碼是共享的。（可以試一下將Animal.prototype.behavior 中的prototype屬性去掉，看看還能不能運(yùn)行。）在這里，prototype屬性指向Animal對(duì)象。
數(shù)組對(duì)象實(shí)例
再看個(gè)數(shù)組對(duì)象的實(shí)例。當(dāng)我們創(chuàng)建出array1這個(gè)對(duì)象的時(shí)候，array1實(shí)際在Javascript引擎中的對(duì)象模型如下：
var array1 = [1,2,3];
array1對(duì)象具有一個(gè)length屬性值為3，但是我們可以通過如下的方法來為array1增加元素：
array1.push(4);
push這個(gè)方法來自于array1的__proto__成員指向?qū)ο蟮囊粋€(gè)方法(Array.prototye.push())。正是因?yàn)樗械臄?shù)組對(duì)象（通過[]來創(chuàng)建的）都包含有一個(gè)指向同一個(gè)具有push,reverse等方法對(duì)象(Array.prototype)的__proto__成員，才使得這些數(shù)組對(duì)象可以使用push,reverse等方法。
函數(shù)對(duì)象實(shí)例
function Base() {
this.id = "base"
}
var obj = new Base();
這樣代碼的結(jié)果是什么，我們?cè)贘avascript引擎中看到的對(duì)象模型是：
new操作符具體干了什么呢?其實(shí)很簡(jiǎn)單，就干了三件事情。
var obj = {};
obj.__proto__ = Base.prototype;
Base.call(obj);
原型鏈
原型鏈：當(dāng)從一個(gè)對(duì)象那里調(diào)取屬性或方法時(shí)，如果該對(duì)象自身不存在這樣的屬性或方法，就會(huì)去自己關(guān)聯(lián)的prototype對(duì)象那里尋找，如果prototype沒有，就會(huì)去prototype關(guān)聯(lián)的前輩prototype那里尋找，如果再?zèng)]有則繼續(xù)查找Prototype.Prototype引用的對(duì)象，依次類推，直到Prototype.….Prototype為undefined（Object的Prototype就是undefined）從而形成了所謂的“原型鏈”。
<script type="text/javascript">
function Shape(){
this.name = "shape";
this.toString = function(){
return this.name;
}
}
function TwoShape(){
this.name = "2 shape";
}
function Triangle(side,height){
this.name = "Triangle";
this.side = side;
this.height = height;
this.getArea = function(){
return this.side*this.height/2;
}
}
TwoShape.prototype = new Shape();
Triangle.prototype = new TwoShape();
</script>
這里，用構(gòu)造器Shape()新建了一個(gè)實(shí)體，然后用它去覆蓋該對(duì)象的原型。
<script type="text/javascript">
function Shape(){
this.name = "shape";
this.toString = function(){
return this.name;
}
}
function TwoShape(){
this.name = "2 shape";
}
function Triangle(side,height){
this.name = "Triangle";
this.side = side;
this.height = height;
this.getArea = function(){
return this.side*this.height/2;
}
}
TwoShape.prototype = new Shape();
Triangle.prototype = new TwoShape();
TwoShape.prototype.constructor = TwoShape;
Triangle.prototype.constructor = Triangle;
var my = new Triangle(5,10);
my.getArea();
my.toString();//Triangle
my.constructor;//Triangle(side,height)
</script>
原型繼承
原型繼承：在原型鏈的末端，就是Object構(gòu)造函數(shù)prototype屬性指向的那個(gè)原型對(duì)象。這個(gè)原型對(duì)象是所有對(duì)象的祖先，這個(gè)老祖宗實(shí)現(xiàn)了諸如toString等所有對(duì)象天生就該具有的方法。其他內(nèi)置構(gòu)造函數(shù)，如Function，Boolean，String，Date和RegExp等的prototype都是從這個(gè)老祖宗傳承下來的，但他們各自又定義了自身的屬性和方法，從而他們的子孫就表現(xiàn)出各自宗族的那些特征。
ECMAScript中，實(shí)現(xiàn)繼承的方法就是依靠原型鏈實(shí)現(xiàn)的。
<script type="text/javascript">
function Box(){ //被繼承的函數(shù)叫做超類型（父類，基類）
this.name = "Jack";
}
function Tree(){ //繼承的函數(shù)叫做子類型（子類，派生類）
this.age = 300;
}
//通過原型鏈繼承，賦值給子類型的原型屬性
//new Box()會(huì)將box構(gòu)造里的信息和原型里的信息都交給Tree
Tree.prototype = new Box();//Tree繼承了Box,通過原型，形成鏈條
var tree = new Tree();
alert(tree.name);//彈出 Jack
</script>
原型鏈的問題：原型鏈雖然很強(qiáng)大，可以用它來實(shí)現(xiàn)繼承，但它也存在一些問題。其中最主要的問題來自包含引用類型的值原型。包含引用類型的原型屬性會(huì)被所有實(shí)例共享；而這也正是為什么要在構(gòu)造函數(shù)中，而不是在原型對(duì)象中定義屬性的原因。在通過原型來實(shí)現(xiàn)繼承時(shí)，原型實(shí)際上回變成另一個(gè)類型的實(shí)例。于是，原先的實(shí)例屬性也就變成了原型的屬性。
在創(chuàng)建子類型的實(shí)例時(shí)，不能向超類型的構(gòu)造函數(shù)中傳遞參數(shù)。實(shí)際上，應(yīng)該說是沒有辦法在不影響所有對(duì)象實(shí)例的情況下，給超類型的構(gòu)造函數(shù)傳遞參數(shù)。再加上剛剛討論的由于原型中包含引用類型值所帶來的問題，實(shí)踐中很少會(huì)單獨(dú)使用原型鏈。
再舉個(gè)栗子：
<script type="text/javascript">
function Person(name)
{
this.name = name;//設(shè)置對(duì)象屬性
};
Person.prototype.company = "Microsoft";//設(shè)置原型的屬性
Person.prototype.SayHello = function() //原型的方法
{
alert("Hello,I'm "+ this.name+ " of " + this.company);
};
var BillGates = new Person("BillGates");//創(chuàng)建person對(duì)象
BillGates.SayHello();//繼承了原型的內(nèi)容，輸出"Hello,I'm BillGates of Microsoft"
var Jobs = new Person("Jobs");
Jobs.company = "Apple";//設(shè)置自己的company屬性，掩蓋了原型的company屬性
Jobs.SayHello = function()
{
alert("Hi,"+this.name + " like " + this.company);
};
Jobs.SayHello();//自己覆蓋的屬性和方法，輸出"Hi,Jobs like Apple"
BillGates.SayHello();//Jobs的覆蓋沒有影響原型，BillGates還是照樣輸出
</script>
看下面一個(gè)原型鏈例子：
<script type="text/javascript">
function Year(){
this.value = 21;
}
Year.prototype = {
method:function(){
}
};
function Hi(){
};
//設(shè)置Hi的prototype屬性為Year的實(shí)例對(duì)象
Hi.prototype = new Year();
Hi.prototype.year = 'Hello World';
Hi.prototype.constructor = Hi;
var test = new Hi();//創(chuàng)建一個(gè)Hi的新實(shí)例
//原型鏈
test [Hi的實(shí)例]
Hi.prototype [Year的實(shí)例]
{year:'Hello World'}
Year.prototype
{method:……};
object.prototype
{toString:...};
</script>
從上面例子中，test對(duì)象從Hi.prototype和Year.prototype中繼承下來；因此他能訪問Year的原型方法method，同時(shí)他能訪問實(shí)例屬性value
__ptoto__屬性
__ptoto__屬性（IE瀏覽器不支持）是實(shí)例指向原型對(duì)象的一個(gè)指針，它的作用就是指向構(gòu)造函數(shù)的原型屬性constructor，通過這兩個(gè)屬性，就可以訪問原型里的屬性和方法了。
Javascript中的對(duì)象實(shí)例本質(zhì)上是由一系列的屬性組成的，在這些屬性中，有一個(gè)內(nèi)部的不可見的特殊屬性——__proto__，該屬性的值指向該對(duì)象實(shí)例的原型，一個(gè)對(duì)象實(shí)例只擁有一個(gè)唯一的原型。
<script type="text/javascript">
function Box(){ //大寫，代表構(gòu)造函數(shù)
Box.prototype.name = "trigkit4";//原型屬性
Box.prototype.age = "21";
Box.prototype.run = function()//原型方法
{
return this.name + this.age + 'studying';
}
}
var box1 = new Box();
var box2 = new Box();
alert(box1.constructor);//構(gòu)造屬性，可以獲取構(gòu)造函數(shù)本身，
//作用是被原型指針定位，然后得到構(gòu)造函數(shù)本身
</script>
__proto__屬性和prototype屬性的區(qū)別
prototype是function對(duì)象中專有的屬性。
__proto__是普通對(duì)象的隱式屬性，在new的時(shí)候，會(huì)指向prototype所指的對(duì)象；
__ptoto__實(shí)際上是某個(gè)實(shí)體對(duì)象的屬性，而prototype則是屬于構(gòu)造函數(shù)的屬性。__ptoto__只能在學(xué)習(xí)或調(diào)試的環(huán)境下使用。
原型模式的執(zhí)行流程
1.先查找構(gòu)造函數(shù)實(shí)例里的屬性或方法，如果有，就立即返回。
2.如果構(gòu)造函數(shù)的實(shí)例沒有，就去它的原型對(duì)象里找，如果有，就立即返回
原型對(duì)象的
<script type="text/javascript">
function Box(){ //大寫，代表構(gòu)造函數(shù)
Box.prototype.name = "trigkit4";//原型屬性
Box.prototype.age = "21";
Box.prototype.run = function()//原型方法
{
return this.name + this.age + 'studying';
}
}
var box1 = new Box();
alert(box1.name);//trigkit4,原型里的值
box1.name = "Lee";
alert(box1.name);//Lee,就進(jìn)原則
var box2 = new Box();
alert(box2.name);//trigkit4,原型的值，沒有被box1修改
</script>
構(gòu)造函數(shù)的
<script type="text/javascript">
function Box(){
this.name = "Bill";
}
Box.prototype.name = "trigkit4";//原型屬性
Box.prototype.age = "21";
Box.prototype.run = function()//原型方法
{
return this.name + this.age + 'studying';
}
var box1 = new Box();
alert(box1.name);//Bill,原型里的值
box1.name = "Lee";
alert(box1.name);//Lee,就進(jìn)原則
</script>
相關(guān)文章
[醬色]各種瀏覽器兼容問題...2006-11-11
這篇文章主要介紹了深入分析JSONP跨域的原理,需要的朋友可以參考下2014-12-12
JavaScript初學(xué)者建議：不要去管瀏覽器兼容
如果可以回到過去的話，我會(huì)告訴自己這句話：初學(xué)JavaScript的時(shí)候無視DOM和BOM的兼容性，先了解一些基礎(chǔ)知識(shí)最后再考慮兼容性2014-02-02
這篇文章主要介紹了淺談javascript 歸并方法的相關(guān)資料,需要的朋友可以參考下2015-01-01
JavaScript instanceof 的使用方法示例介紹
判斷一個(gè)變量的類型嘗嘗會(huì)用 typeof 運(yùn)算符而他畢竟有些缺陷，就是無論引用的是什么類型的對(duì)象，它都返回object，這時(shí)就要用到instanceof來檢測(cè)某個(gè)對(duì)象是不是另一個(gè)對(duì)象的實(shí)例2013-10-10
這篇文章主要介紹了使圖片旋轉(zhuǎn)的3種解決方案,并了幾個(gè)方法的對(duì)比，大家參考看一下吧2013-11-11
JavaScript高級(jí)程序設(shè)計(jì)（第3版）學(xué)習(xí)筆記13 ECMAScript5新特性
通常而言，JavaScript由ECMAScript核心、BOM和DOM三部分構(gòu)成，前面的文章將ECMAScript核心部分粗略的過了一篇2012-10-10
javascript實(shí)現(xiàn)網(wǎng)頁屏蔽Backspace事件，輸入框不屏蔽
這篇文章主要介紹了如何實(shí)現(xiàn)網(wǎng)頁屏蔽Backspace事件而輸入框不屏蔽，需要的朋友可以參考下2015-07-07
javascript基礎(chǔ)之查找元素的詳細(xì)介紹(訪問節(jié)點(diǎn))
常用jQuery的話我們知道，jQuery有非常強(qiáng)大的選擇器來查找元素（也稱作訪問節(jié)點(diǎn)），例如：基本選擇器、層次選擇器、過濾選擇器、屬性選擇器等2013-07-07
本例主要介紹了JavaScript匿名函數(shù)與委托的使用，需要的朋友可以參考下2014-07-07