聊一聊JS中的prototype

更新時間：2016年09月29日 11:40:45 作者：菠蘿般若

function定義的對象有一個prototype屬性，prototype屬性又指向了一個prototype對象，注意prototype屬性與prototype對象是兩個不同的東西，要注意區(qū)別.這篇文章主要介紹了JS中的prototype的相關資料,需要的朋友可以參考下

什么是prototype：

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

//判斷是否是數(shù)組
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中的方法和屬性都克隆來了一遍。注意這里是克隆而不是繼承，至于克隆和繼承的區(qū)別，感興趣的同學可以自己去問下度娘。

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

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屬性可以返回對象類型的原型的引用
//如果構(gòu)造函數(shù)與原型函數(shù)有同名方法，那么優(yōu)先搜索構(gòu)造函數(shù)的方法，不會再次克隆原型函數(shù)的同名函數(shù)
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，希望對大家有所幫助，如果大家有任何疑問請給我留言，小編會及時回復大家的。在此也非常感謝大家對腳本之家網(wǎng)站的支持！

您可能感興趣的文章: