聊一聊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函數本身。
//判斷是否是數組
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屬性可以返回對象類型的原型的引用
//如果構造函數與原型函數有同名方法，那么優(yōu)先搜索構造函數的方法，不會再次克隆原型函數的同名函數
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，希望對大家有所幫助，如果大家有任何疑問請給我留言，小編會及時回復大家的。在此也非常感謝大家對腳本之家網站的支持！
相關文章
下面小編就為大家分享一篇bootstrap 點擊空白處popover彈出框隱藏實例，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2018-01-01
JavaScript的ES5實現(xiàn)繼承的4種常用方法小結
繼承是面向對象軟件技術當中的一個概念,這篇文章主要為大家詳細介紹了JavaScript ES5實現(xiàn)繼承的4種常用方法,感興趣的小伙伴可以了解一下2024-03-03
拖拽是前端實現(xiàn)中比較常用的一種效果, HTML5 提供了較為強大的拖拽 API 支持,今天我們來實現(xiàn)一個簡單的拖拽效果,需要的朋友可以參考下2023-09-09
IE6下javasc#ipt:void(0) 無效的解決方法
本篇文章主要是對IE6下javasc#ipt:void(0) 無效的解決方法進行了介紹，需要的朋友可以過來參考下，希望對大家有所幫助2013-12-12
本文主要介紹了js 的作用域和變量的相關知識，具有很好的參考價值，下面跟著小編一起來看下吧2017-02-02
這篇文章主要介紹了JS求解兩數之和算法,結合實例形式詳細分析了JS求解兩數之和算法相關原理、實現(xiàn)方法與操作注意事項,需要的朋友可以參考下2020-04-04
使用window.postMessage()方法在兩個網頁間傳遞數據
這篇文章介紹了使用window.postMessage()在兩個網頁間傳遞數據的方法，文中通過示例代碼介紹的非常詳細。對大家的學習或工作具有一定的參考借鑒價值，需要的朋友可以參考下2022-06-06
第一次接觸神奇的Bootstrap菜單和Bootstrap導航，Bootstrap讓Web開發(fā)更迅速、更簡單，感興趣的小伙伴們可以參考一下2016-08-08
這篇文章主要介紹了 判斷頁面訪問方式電腦或者移動端的相關資料,這里提供了三種方法，需要的朋友可以參考下2016-09-09
這篇文章主要介紹了javascript 怎么操縱OGNL標簽,需要的朋友可以參考下2014-06-06