JavaScript普通函數(shù)有原型。在JavaScript中，任何一個(gè)函數(shù)都有一個(gè)prototype（原型）屬性，這個(gè)屬性指向函數(shù)的原型對(duì)象。原型的作用其實(shí)就是為類(函數(shù))提供了一個(gè)“公共區(qū)域”，在這個(gè)公共區(qū)域中聲明的屬性和方法能夠被所有通過這個(gè)類所創(chuàng)建的對(duì)象所訪問到，可減少內(nèi)存消耗。

前端（vue）入門到精通課程：進(jìn)入學(xué)習(xí)
Apipost = Postman + Swagger + Mock + Jmeter 超好用的API調(diào)試工具：點(diǎn)擊使用

本教程操作環(huán)境：windows7系統(tǒng)、javascript1.8.5版、Dell G3電腦。

函數(shù)的prototype屬性（原型）

一、 只要我們創(chuàng)建一個(gè)函數(shù)，該函數(shù)就會(huì)自動(dòng)獲得一個(gè)prototype屬性，這個(gè)屬性指向函數(shù)的原型對(duì)象。

創(chuàng)建fn函數(shù)自動(dòng)獲得prototype屬性，該屬性是一個(gè)對(duì)象即該函數(shù)的原型對(duì)象，我們可以看到原型對(duì)象默認(rèn)會(huì)有一個(gè)constructor屬性，該屬性是指向函數(shù)自身即fn。

原型的作用其實(shí)就是為類(函數(shù))提供了一個(gè)【公共區(qū)域】，在這個(gè)公共區(qū)域中聲明的屬性和方法能夠被所有通過這個(gè)類所創(chuàng)建的對(duì)象所訪問到。減少內(nèi)存消耗。

二、 函數(shù)的prototype屬性是一個(gè)對(duì)象

typeof fn.prototype  //"object"

prototype屬性是一個(gè)對(duì)象，那么我們除了以普通對(duì)象的形式訪問對(duì)應(yīng)的屬性和方法以外，還可以用什么方式訪問呢？答案就是當(dāng) 函數(shù)作為‘構(gòu)造函數(shù)’，我們是用‘new關(guān)鍵字創(chuàng)建實(shí)例’來訪問prototype屬性中對(duì)應(yīng)的屬性和方法

function Fn(){     this.name = "CJF"} Fn.prototype.name="CJF1"; Fn.prototype.getName = function(){     return this.name; }var f = new Fn(); f.name;//輸出 'CJF'f.getName(); //輸出 'CJF'Fn.prototype.getName();//輸出 'CJF1'

可以看到當(dāng)函數(shù)作為構(gòu)造函數(shù)創(chuàng)建實(shí)例的時(shí)候，該實(shí)例就可以調(diào)用原型對(duì)象上的方法，此時(shí)的this是指向f ；實(shí)例f訪問name屬性，因?yàn)槠渥陨碛衝ame屬性，可以訪問到，所以輸出 ‘CJF’，自身沒有name屬性，那么腳本引擎就會(huì)去查詢用于創(chuàng)建當(dāng)前對(duì)象的構(gòu)造函數(shù)的原型（相當(dāng)于我們?cè)L問f.constructor.prototype），找到構(gòu)造函數(shù)原型對(duì)象有name屬性就會(huì)返回‘CJF1’。（f和其原型對(duì)象都有name屬性,對(duì)象自身屬性的優(yōu)先級(jí)高于原型對(duì)象）

function Fn(){} Fn.prototype.name="CJF1"; Fn.prototype.getName = function(){     return this.name; }var f = new Fn(); f.name;//輸出 'CJF1'f.getName(); //輸出 'CJF1'Fn.prototype.getName();//輸出 'CJF1'

三、prototype原型對(duì)象的 “實(shí)時(shí)性”

由于javascript中，所有對(duì)象都是通過傳引用的方式來傳遞，我們每次新創(chuàng)建函數(shù)實(shí)例中都沒有一份屬于自己的原型副本，也就是說原型對(duì)象是所有實(shí)例共享的，我們修改函數(shù)的原型對(duì)象，那么有該函數(shù)創(chuàng)建的所有實(shí)例對(duì)象的prototype都會(huì)跟著變化。

function Fn(){} Fn.prototype.name="CJF1"; Fn.prototype.getName = function(){     return this.name; }var f = new Fn(); f.name;//輸出 'CJF1'f.getName(); //輸出 'CJF1'f.getAge();//此時(shí)沒有實(shí)例f并沒有g(shù)etAge方法  瀏覽器會(huì)報(bào)錯(cuò) Uncaught TypeError: f.getAge is not a function//加上后面的就可以正常訪問了Fn.prototype.getAge = function(){     return 20; } f.getAge();//20

四、原型鏈
剛才我們有了解到，當(dāng)對(duì)象自身屬性和原型屬性相同時(shí)，自身屬性優(yōu)先級(jí)高于原型屬性，但是當(dāng)對(duì)象自身沒有我們要訪問的屬性或者方法時(shí)，就會(huì)沿著創(chuàng)建當(dāng)前對(duì)象的構(gòu)造函數(shù)的原型（原型鏈）查找要訪問的屬性，一旦查找到就返回對(duì)應(yīng)屬性，沒查找到對(duì)應(yīng)屬性返回undefined，但是沒查找到要訪問的方法會(huì)報(bào)錯(cuò)（因?yàn)闆]有該方法卻還要執(zhí)行該方法所以報(bào)錯(cuò)）。

function Fn(){} Fn.prototype.name="CJF1"; Fn.prototype.getName = function(){     return this.name; }var f = new Fn(); f.constructor.prototype == Fn.prototype //true

由上圖我們可以看到實(shí)例f._proto_(前后各兩個(gè)下劃線)指向的是一個(gè)對(duì)象，而這個(gè)對(duì)象就是Fn.prototype,當(dāng)我們?cè)L問實(shí)例f沒有的屬性或者方法是，就會(huì)沿著這個(gè)秘密鏈接（_proto_）查找我們要訪問的,一直找到Object.prototype,一旦查找到就返回對(duì)應(yīng)屬性，沒查找到對(duì)應(yīng)屬性返回undefined，但是沒查找到要訪問的方法會(huì)報(bào)錯(cuò)。這個(gè)秘密鏈接只用于學(xué)習(xí)和調(diào)試，在實(shí)際開發(fā)別用（建議使用Object.getPrototypeOf方法）。

如果我們調(diào)用f.toString(),因?yàn)閷?shí)例f沒有toString方法，所以它就會(huì)沿著秘密鏈接查找Object.prototype,因?yàn)镺bject 是最頂層父類，其他的對(duì)象都是直接或者間接繼承自他，秘密鏈接找到它之后，有結(jié)果就返回，沒有就返回undefined或者報(bào)錯(cuò)。所以出現(xiàn)Object.prototype._proto_ = null。

【