DIV CSS 佈局教程網

 DIV+CSS佈局教程網 >> 網頁腳本 >> JavaScript入門知識 >> 關於JavaScript >> 聊一聊JS中的prototype
聊一聊JS中的prototype
編輯:關於JavaScript     

什麼是prototype:

function定義的對象有一個prototype屬性,prototype屬性又指向了一個prototype對象,注意prototype屬性與prototype對象是兩個不同的東西,要注意區別。在prototype對象中又有一個constructor屬性,這個constructor屬性同樣指向一個constructor對象,而這個constructor對象恰恰就是這個function函數本身。

//判斷是否是數組
function isArray(obj) {
return Object.prototype.toString.call(obj) === '[object Array]';
};
//判斷是否是function
function isFunc(obj) {
return Object.prototype.toString.call(obj) === '[object Function]';
}
// 是否是json對象
function isJson(obj) {
return typeof (obj) == "object" && (isArray(obj) || Object.prototype.toString.call(obj).toLowerCase() == "[object object]");
}

對於這個屬性我的理解就是繼承原型對象的方法和屬性。屬性和方法是什麼?可能一些新人不是很了解,打個比方,自行車的屬性有:外表紅色,可變速,可照明等,屬性就是對象是什麼?方法有騎自行車去上學等,方法就是對象能干什麼?

那麼下面我就從含義到應用說說對她的理解吧,不足之處還請大牛指點。

prototype是什麼含義呢?

javascript中prototype屬性:返回對象類型原型的引用。

舉個例子,

A.prototype = new B()

A的prototype是B的一個實例,也就是說A講B中的方法和屬性都克隆來了一遍。注意這裡是克隆而不是繼承,至於克隆和繼承的區別,感興趣的同學可以自己去問下度娘。

下面上個我做的簡單實例:

html部分:

<body>
<a class="btn btn1">按鈕1</a>
<a class="btn btn2">按鈕2</a>
<a class="btn btn3">按鈕3</a>
</body>

js部分:

(function(){
var btn1 = $(".btn1");
var btn2 = $(".btn2");
var btn3 = $(".btn3");
function baseClass(){
this.showMsg = function(){
alert('11111');
}
}
function extendClass(){
this.showMsg = function(){
alert('2222');
}
}
//prototype屬性可以返回對象類型的原型的引用
//如果構造函數與原型函數有同名方法,那麼優先搜索構造函數的方法,不會再次克隆原型函數的同名函數
extendClass.prototype = new baseClass();
var initance = new extendClass();
btn1.click(function(){
initance.showMsg();
});
var baseinitance = new baseClass();
btn2.click(function(){
baseinitance.showMsg.call(initance);
})
})();

 理解以上實例,基本你可以初步對js中的prototype屬性有個大致的認識。

以上所述是小編給大家介紹的JS中的prototype,希望對大家有所幫助,如果大家有任何疑問請給我留言,小編會及時回復大家的。在此也非常感謝大家對網站的支持!

XML學習教程| jQuery入門知識| AJAX入門| Dreamweaver教程| Fireworks入門知識| SEO技巧| SEO優化集錦|
Copyright © DIV+CSS佈局教程網 All Rights Reserved