基于js中的原型、繼承的一些想法
最近看到一個別人寫的js類庫,突然對js中的原型及繼承產(chǎn)生了一些想法,之前也看過其中的一些內(nèi)容,但是總不是很清晰,這幾天利用空閑時間,對這塊理解了一下,感覺還是有不通之處,思路上沒那么條理,僅作為分享,
一、instanceof
在JavaScript有instanceof運(yùn)算符,是二元運(yùn)算符,使用方法 instanceA instanceof A,返回值是布爾值(boolean),含義是判斷instanceA是否是A的一個實例,其實質(zhì)是判斷A.prototype===instanceA.__proto__,如
function f2(){ var f=function(){} var test=new f(); console.log(test instanceof f);//true console.log((f.prototype===test.__proto__));//true }
上邊的兩個打印都是true。說明test是f的一個實例;test的__proto__屬性指向了f的prototype對象,即f的prototype屬性是一個對象,且此對象是f的一個實例。
二、js中對象
在js中一切皆是對象,對象分為函數(shù)對象和普通對象,常用的函數(shù)其實是函數(shù)對象,如
//函數(shù)對象 var f=function(){} var f2=new Function('str','console.log(str)') function f3(){} //普通對象 var o=new Object(); var o2={} var o3=new f()
上面看到f、f2、f3是函數(shù)對象,o、o2、o3是普通對象。
函數(shù)對象和普通對象的區(qū)別:
所有使用new Function()的方式創(chuàng)建的對象都是函數(shù)對象,f和f3兩種方式,最終是也是使用new Function()方式創(chuàng)建的;
在定義一個對象時,對象中包含一些預(yù)定義的屬性,如,prototype、__proto__,其中prototype屬性只有函數(shù)對象才有,__proto__則是對所有的對象都有,所以可以通過對象的__proto__屬性判斷一個對象是函數(shù)對象還是普通對象,如
//函數(shù)對象 var f=function(){} //普通對象 var o=new Object(); console.log(f.prototype);//Object {} console.log(o.prototype);//undefined
從上邊可以得出函數(shù)對象存在prototype屬性,而普通對象的prototype對象則是未定義。
三、原型鏈
從上邊知道所有的對象都有一個__proto__屬性,這個屬性指向創(chuàng)建它的函數(shù)對象的原型對象prototype,我們把這種使用__proto__屬性串起來的鏈叫做原型鏈,如下面是一個原型鏈,
上圖,以person為例,說明原型鏈,
var person=function(){} var person1=new person();
1、person是一個函數(shù)對象,person1是person的一個實例
2、person1的__proto__屬性是person的原型對象person.prototype
3、由于person的原型對象person.prototype是一個對象,它也有一個__proto__屬性,這個屬性指向的Object的原型對象Object.prototype
4、Object的原型對象Object.prototype是一個對象,它也有一個__proto__屬性,這個屬性的原型對象為null。
四、一些繼承
在js中我們會定義一個函數(shù)對象,如
var person=function(){}
上面我們定義了一個函數(shù)對象,它沒有任何的屬性,是一個空對象,由于它是一個對象,所以可以為它增加屬性,
var person=function(){} person.name1='js' console.log(person.name1)//js
上面的代碼為person新增了一個name屬性,且賦值為js,且可以打印出name屬性的值
但是當(dāng)我們創(chuàng)建一個person的實例person1的時候,如下
var person= function(){}; person.name1= 122; console.log(person.name1); var person1=new person(); console.log(person1.name1);//undefined
可以看到person1沒有name1這個屬性,那么如何才能保證person的實例也有name1屬性呢,
var person= function(){}; person.name1= 122; //使用prototype對象為對象添加屬性,這樣所以的實例都會有此屬性 person.prototype.name1='12'; console.log(person.name1); var person1=new person(); console.log(person1.name1);//12
上面,使用了person.protoype.name1='12',這樣所有的實例都有了name1屬性,使用這種方式添加的屬性,在生成實例的時候會把屬性當(dāng)作實例的共有屬性。
以上這篇基于js中的原型、繼承的一些想法就是小編分享給大家的全部內(nèi)容了,希望能給大家一個參考,也希望大家多多支持腳本之家。
相關(guān)文章
關(guān)于JS中setTimeout()無法調(diào)用帶參函數(shù)問題的解決方法
這篇文章主要介紹了關(guān)于JS中setTimeout()無法調(diào)用帶參函數(shù)問題的解決方法,提供了2種解決方法供大家對比參考,需要的朋友可以參考下2016-06-06JavaScript實現(xiàn)購物車圖片局部放大預(yù)覽效果
這篇文章主要為大家詳細(xì)介紹了JavaScript如何通過canvas簡單實現(xiàn)購物車圖片放大預(yù)覽效果,文中的示例代碼講解詳細(xì),感興趣的小伙伴可以跟隨小編一起學(xué)習(xí)一下2023-03-03js實現(xiàn)無需數(shù)據(jù)庫的縣級以上聯(lián)動行政區(qū)域下拉控件
縣級以上聯(lián)動行政區(qū)域下拉控件,想必大家對此也有所熟悉,本文為大家介紹下使用js實現(xiàn)無需數(shù)據(jù)庫的聯(lián)動下拉控件,感興趣的朋友可以參考下,希望對大家有所幫助2013-08-08prototype.js簡單實現(xiàn)ajax功能示例
這篇文章主要介紹了prototype.js簡單實現(xiàn)ajax功能,結(jié)合實例形式分析了prototype.js前臺實現(xiàn)ajax與后臺struts的相關(guān)操作技巧,需要的朋友可以參考下2017-10-10