快捷導(dǎo)航

JavaScript中的prototype使用說明

更新時(shí)間：2010年04月13日 22:00:58 作者：

在JavaScript中并沒有類的概念，但JavaScript中的確可以實(shí)現(xiàn)重載，多態(tài)，繼承。這些實(shí)現(xiàn)其實(shí)方法都可以用JavaScript中的引用和變量作用域結(jié)合prototype來解釋。

1、prototype
在JavaScript中并沒有類的概念，但JavaScript中的確可以實(shí)現(xiàn)重載，多態(tài)，繼承。這些實(shí)現(xiàn)其實(shí)方法都可以用JavaScript中的引用和變量作用域結(jié)合prototype來解釋。

2、簡(jiǎn)單的例子

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

 
var Blog = function( name, url ){ 
this.name = name; 
this.url = url; 
}; 
Blog.prototype.jumpurl = ''; 
Blog.prototype.jump = function(){ 
window.location = this.jumpurl; 
}; 
/* 
*等同于 
Blog.prototype = { 
jumpurl : '', 
jump : function(){ 
window.location = this.jumpurl; 
} 
}; 
*/ 
var rainman = new Blog('jb51', 'http://www.dbjr.com.cn'); 
var test = new Blog('server', 'http://s.jb51.net'); 

這是一個(gè)非常簡(jiǎn)單的例子，但卻可以很好的解釋prototype內(nèi)在的一些東西，先看下圖的內(nèi)存分配：

通過上圖可以看到下面這些內(nèi)容：

prototype只是函數(shù)的一個(gè)屬性，該屬性的類型是一個(gè)對(duì)象。
內(nèi)存分配狀況：
函數(shù)Blog擁有一個(gè)prototype屬性，而prototype屬性擁有一個(gè)變量和一個(gè)函數(shù)；
test和rainman兩個(gè)變量都分別有name和url兩個(gè)變量；
test和rainman兩個(gè)變量都有一個(gè)jumpUrl變量和一個(gè)jump函數(shù)，但是并沒有分配內(nèi)存，它們是對(duì)Blog.protype中的引用

3、擴(kuò)展1：

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

 
Website.prototype = Blog.prototype 
var Blog = function( name, url ){ 
this.name = name; 
this.url = blogurl; 
}; 
Blog.prototype.jumpurl = ''; 
Blog.prototype.jump = function(){ 
window.location = this.jumpurl; 
}; 
var rainman = new Blog('jb51', 'http://www.dbjr.com.cn'); 
var test = new Blog('server', 'http://s.jb51.net'); 

var Website = function(){}; 
Website.prototype = Blog.prototype; 
var mysite = new Website(); 

通過上圖可以看到下面這些內(nèi)容：

"Website.prototype = Blog.prototype;"：Website的prototype并沒有分配內(nèi)存，只是引用了Blog的prototype屬性。
mysite的兩個(gè)屬性也沒有分配內(nèi)存，也只是分別引用了Blog.prototype.jumpurl和Blog.prototype.jump

4、擴(kuò)展2：

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

 
Website.prototype = new Blog() 
var Blog = function(){}; 
Blog.prototype.jumpurl = ''; 
Blog.prototype.jump = function(){ 
window.location = this.jumpurl; 
}; 

var Website = function(){}; 
Website.prototype = new Blog(); 
var mysite = new Website(); 

通過上圖可以看到下面這些內(nèi)容：

Website的prototype屬性，只是Blog的一個(gè)實(shí)例（同rainman=new Blog(); ）;因此Website的prototype屬性就具有了jumpurl變量和jump方法了。
mysite是Website的一個(gè)實(shí)例，它的jumpurl和jump方法是繼承自Website的prototype，而Web.prototype繼承自Blog.prototype（這里與其說是繼承，不如說是引用）
整段程序在運(yùn)行的過程中，內(nèi)存中只分配了一個(gè)jumpurl變量和一個(gè)jump方法
5、new運(yùn)算符
JavaScript中new運(yùn)算符。
JavaScript中new運(yùn)算符是創(chuàng)建一個(gè)新對(duì)象。使用方法：
new constructor[(arguments)]
其中constructor是必選項(xiàng)。對(duì)象的構(gòu)造函數(shù)。如果構(gòu)造函數(shù)沒有參數(shù)，則可以省略圓括號(hào)。
arguments是可選項(xiàng)。任意傳遞給新對(duì)象構(gòu)造函數(shù)的參數(shù)。

JavaScript中new運(yùn)算符說明
new 運(yùn)算符執(zhí)行下面的任務(wù)：
創(chuàng)建一個(gè)沒有成員的對(duì)象。
為那個(gè)對(duì)象調(diào)用構(gòu)造函數(shù)，傳遞一個(gè)指針給新創(chuàng)建的對(duì)象作為 this 指針。
然后構(gòu)造函數(shù)根據(jù)傳遞給它的參數(shù)初始化該對(duì)象。
示例
下面這些是有效的 new 運(yùn)算符的用法例子。
my_object = new Object;
my_array = new Array();
my_date = new Date("Jan 5 1996");

6、其它
在絕大多數(shù)JavaScript版本中，JS引擎都會(huì)給每個(gè)函數(shù)一個(gè)空的原型對(duì)象，即prototype屬性。

您可能感興趣的文章: