JavaScript中的prototype使用說明
更新時間:2010年04月13日 22:00:58 作者:
在JavaScript中并沒有類的概念,但JavaScript中的確可以實現(xiàn)重載,多態(tài),繼承。這些實現(xiàn)其實方法都可以用JavaScript中的引用和變量作用域結合prototype來解釋。
1、prototype
在JavaScript中并沒有類的概念,但JavaScript中的確可以實現(xiàn)重載,多態(tài),繼承。這些實現(xiàn)其實方法都可以用JavaScript中的引用和變量作用域結合prototype來解釋。
2、簡單的例子
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');
這是一個非常簡單的例子,但卻可以很好的解釋prototype內(nèi)在的一些東西,先看下圖的內(nèi)存分配:

通過上圖可以看到下面這些內(nèi)容:
prototype只是函數(shù)的一個屬性,該屬性的類型是一個對象。
內(nèi)存分配狀況:
函數(shù)Blog擁有一個prototype屬性,而prototype屬性擁有一個變量和一個函數(shù);
test和rainman兩個變量都分別有name和url兩個變量;
test和rainman兩個變量都有一個jumpUrl變量和一個jump函數(shù),但是并沒有分配內(nèi)存,它們是對Blog.protype中的引用
3、擴展1:
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的兩個屬性也沒有分配內(nèi)存,也只是分別引用了Blog.prototype.jumpurl和Blog.prototype.jump
4、擴展2:
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的一個實例( 同rainman=new Blog(); );因此Website的prototype屬性就具有了jumpurl變量和jump方法了。
mysite是Website的一個實例,它的jumpurl和jump方法是繼承自Website的prototype,而Web.prototype繼承自Blog.prototype(這里與其說是繼承,不如說是引用)
整段程序在運行的過程中,內(nèi)存中只分配了一個jumpurl變量和一個jump方法
5、new運算符
JavaScript中new運算符。
JavaScript中new運算符是創(chuàng)建一個新對象。使用方法:
new constructor[(arguments)]
其中constructor是必選項。對象的構造函數(shù)。如果構造函數(shù)沒有參數(shù),則可以省略圓括號。
arguments是可選項。任意傳遞給新對象構造函數(shù)的參數(shù)。
JavaScript中new運算符說明
new 運算符執(zhí)行下面的任務:
創(chuàng)建一個沒有成員的對象。
為那個對象調(diào)用構造函數(shù),傳遞一個指針給新創(chuàng)建的對象作為 this 指針。
然后構造函數(shù)根據(jù)傳遞給它的參數(shù)初始化該對象。
示例
下面這些是有效的 new 運算符的用法例子。
my_object = new Object;
my_array = new Array();
my_date = new Date("Jan 5 1996");
6、其它
在絕大多數(shù)JavaScript版本中,JS引擎都會給每個函數(shù)一個空的原型對象,即prototype屬性。
在JavaScript中并沒有類的概念,但JavaScript中的確可以實現(xiàn)重載,多態(tài),繼承。這些實現(xiàn)其實方法都可以用JavaScript中的引用和變量作用域結合prototype來解釋。
2、簡單的例子
復制代碼 代碼如下:
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');
這是一個非常簡單的例子,但卻可以很好的解釋prototype內(nèi)在的一些東西,先看下圖的內(nèi)存分配:

通過上圖可以看到下面這些內(nèi)容:
prototype只是函數(shù)的一個屬性,該屬性的類型是一個對象。
內(nèi)存分配狀況:
函數(shù)Blog擁有一個prototype屬性,而prototype屬性擁有一個變量和一個函數(shù);
test和rainman兩個變量都分別有name和url兩個變量;
test和rainman兩個變量都有一個jumpUrl變量和一個jump函數(shù),但是并沒有分配內(nèi)存,它們是對Blog.protype中的引用
3、擴展1:
復制代碼 代碼如下:
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的兩個屬性也沒有分配內(nèi)存,也只是分別引用了Blog.prototype.jumpurl和Blog.prototype.jump
4、擴展2:
復制代碼 代碼如下:
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的一個實例( 同rainman=new Blog(); );因此Website的prototype屬性就具有了jumpurl變量和jump方法了。
mysite是Website的一個實例,它的jumpurl和jump方法是繼承自Website的prototype,而Web.prototype繼承自Blog.prototype(這里與其說是繼承,不如說是引用)
整段程序在運行的過程中,內(nèi)存中只分配了一個jumpurl變量和一個jump方法
5、new運算符
JavaScript中new運算符。
JavaScript中new運算符是創(chuàng)建一個新對象。使用方法:
new constructor[(arguments)]
其中constructor是必選項。對象的構造函數(shù)。如果構造函數(shù)沒有參數(shù),則可以省略圓括號。
arguments是可選項。任意傳遞給新對象構造函數(shù)的參數(shù)。
JavaScript中new運算符說明
new 運算符執(zhí)行下面的任務:
創(chuàng)建一個沒有成員的對象。
為那個對象調(diào)用構造函數(shù),傳遞一個指針給新創(chuàng)建的對象作為 this 指針。
然后構造函數(shù)根據(jù)傳遞給它的參數(shù)初始化該對象。
示例
下面這些是有效的 new 運算符的用法例子。
my_object = new Object;
my_array = new Array();
my_date = new Date("Jan 5 1996");
6、其它
在絕大多數(shù)JavaScript版本中,JS引擎都會給每個函數(shù)一個空的原型對象,即prototype屬性。
您可能感興趣的文章:
- js中繼承的幾種用法總結(apply,call,prototype)
- js中的hasOwnProperty和isPrototypeOf方法使用實例
- JavaScript prototype 使用介紹
- js中prototype用法詳細介紹
- 詳解Javascript中prototype屬性(推薦)
- Javascript中Array.prototype.map()詳解
- JQuery,Extjs,YUI,Prototype,Dojo 等JS框架的區(qū)別和應用場景簡述
- 判斷js中各種數(shù)據(jù)的類型方法之typeof與0bject.prototype.toString講解
- JavaScript函數(shù)及其prototype詳解
相關文章
JS實現(xiàn)iframe自適應高度的方法(兼容IE與FireFox)
這篇文章主要介紹了JS實現(xiàn)iframe自適應高度的方法,涉及javascript與iframe交互動態(tài)操作頁面元素屬性的相關技巧,需要的朋友可以參考下2016-06-06簡述JS中forEach()、map()、every()、some()和filter()的用法
JS中常常需要對數(shù)組進行遍歷、迭代操作,而我們常用的就是for語句對數(shù)組進行迭代,下面這篇文章主要給大家介紹了關于JS中forEach()、map()、every()、some()和filter()的用法,需要的朋友可以參考下2022-05-05JS面向對象(3)之Object類,靜態(tài)屬性,閉包,私有屬性, call和apply的使用,繼承的三種實現(xiàn)方法
這篇文章主要介紹了JS面向對象(3)之Object類,靜態(tài)屬性,閉包,私有屬性, call和apply的使用,繼承的三種實現(xiàn)方法的相關資料,需要的朋友可以參考下2016-02-02JavaScript中無法通過div.style.left獲取值的解決方法
這篇文章主要介紹了JavaScript中無法通過div.style.left獲取值的問題分析及解決方法,需要的朋友可以參考下2017-02-02JS小功能(onmouseover實現(xiàn)選擇月份)實例代碼
這篇文章主要介紹了onmouseover實現(xiàn)選擇月份實例代碼,有需要的朋友可以參考一下2013-11-11發(fā)一個數(shù)據(jù)過濾的代碼,很簡單,有用的著的拿去
發(fā)一個數(shù)據(jù)過濾的代碼,很簡單,有用的著的拿去...2007-02-02