在JavaScript學習和工作中，或多或少會接觸一些底層的JavaScript知識。比如下面四個基本概念：

1.prototype

2.this關鍵字

3.原型繼承

4.JavaScript閉包

個人覺得的看得越多，技術好像也越來越復雜。之前看完《Head First JavaScript》，這本書里面講到了this關鍵字和prototype的概念。一下是個人的筆記和理解。

JavaScript不是真正的面向對象(oop)，但是很多開發者嘗試使用編寫Java/C#的方法去編寫JavaScript代碼，一方面是容易理解，另一方面也是后期代碼中更容易維護，更容易調試等方便。

prototype的出現是為了解決在傳統代碼中，我們每創建一個對象實例，每個實例都會有重復的方法，這樣在創建數量較多的對象實例時，代碼冗余，占用內存多。所以將對象的方法放到類中。稱為：類擁有的方法。Class-owned method.

代碼舉例，創建一個blog的程序。每個blog對象有發表時間，內容2個屬性，查找內容，分行高亮數據，顯示詳細時間的三個方法。

//常見的寫法

function Blog(body,date){

//properties

this.body=body;

this.date=date;

//methods

this.toString=function(){

return "["+(this.date.getMonth()+1)+"/"+this.date.getDate()+"/"+

this.date.getFullYear()+"]"+this.body;

};

this.toHTML=function(highlight){

var blogHTML="";

blogHTML+=highlight?"<p style='background-color:#eee;'>":"<p>";

blogHTML+="<strong>"+(this.date.getMonth()+1)+"/"+this.date.getDate()+"/"+

this.date.getFullYear()+"</strong><br/>"+this.body+"</p>";

return blogHTML;

};

this.containsText=function(text){

return (this.body.toLowerCase().indexOf(text.toLowerCase())!=-1);

}

}

創建三個對象實例：

var blog1=new Blog("hello world",new Date());

var blog2=new Blog("this is a test",new Date());

var blog3=new Blog("do you like javascript?",new Date());

那么實際上，三個對象都copy對象的三個方法，一個9個方法。通過引入prototype，可以用改進代碼，將對象實例的三個共有方法使用prototype添加到“類”Blog中。改進后的代碼如下：

function Blog(body,date){

//instance property

this.body=body;

this.date=date;

//instance method

this.showVersion=function(){

return "version1.0";

}

//創建每個對象時，實例的屬性和方法都會復制一遍

}

//return a string repsentation of the blog entry

Blog.prototype.toString=function(){

return "["+(this.date.getMonth()+1)+"/"+this.date.getDate()+"/"+

this.date.getFullYear()+"]"+this.body;

}

//return a formatted HTML

Blog.prototype.toHTML=function(highlight){

var blogHTML="";

blogHTML+=highlight?"<p style='background-color:#eee;'>":"<p>";

blogHTML+="<strong>"+(this.date.getMonth()+1)+"/"+this.date.getDate()+"/"+

this.date.getFullYear()+"</strong><br/>"+this.body+"</p>";

return blogHTML;

}

//check if the blog body content contains a string

Blog.prototype.containsText=function(text){

return (this.body.toLowerCase().indexOf(text.toLowerCase())!=-1);

}

然后創建三個對象實例，那么三個方法都是公用“類”的那一份，所以只有唯一一份的方法。

var blog1=new Blog("hello world",new Date());

var blog2=new Blog("this is a test",new Date());

var blog3=new Blog("do you like javascript?",new Date());

后面復雜的原型繼承也使用到了prototype，情況和場景要比這里復雜，不過個人覺得head first能把為什么要使用prototype說明白，已經對初學者幫助很大。

小結：

Classes vs instances

Class properties and methods

類擁有的屬性和方法。通過使用prototype可以為“類”添加屬性和方法。

Instance properties and methods

實例的屬性和方法，在對象中使用this關鍵字的方法或者屬性都是對象實例方法和屬性

Own once, run many: class-owned methods only one copy shared for all instances.

Use prototype to work at a class-level

Prototype"對象"是每個對象的一個隱藏屬性， prototype可以允許你可以在class級別為對象添加屬性和方法。

A class property is stored once in a class but accessible to all instances.

轉載于:https://www.cnblogs.com/liminjun88/archive/2012/12/11/2813871.html

總結

以上是生活随笔為你收集整理的JavaScript中为何要使用prototype的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。