Javascript非构造函数的继承
一、什么是"非構(gòu)造函數(shù)"的繼承?
比如,現(xiàn)在有一個(gè)對(duì)象,叫做"中國(guó)人"。
var Chinese = { nation:'中國(guó)' };還有一個(gè)對(duì)象,叫做"醫(yī)生"。var Doctor ={ career:'醫(yī)生' }?
?
請(qǐng)問(wèn)怎樣才能讓"醫(yī)生"去繼承"中國(guó)人",也就是說(shuō),我怎樣才能生成一個(gè)"中國(guó)醫(yī)生"的對(duì)象?
這里要注意,這兩個(gè)對(duì)象都是普通對(duì)象,不是構(gòu)造函數(shù),無(wú)法使用構(gòu)造函數(shù)方法實(shí)現(xiàn)"繼承"。
二、object()方法
json格式的發(fā)明人Douglas Crockford,提出了一個(gè)object()函數(shù),可以做到這一點(diǎn)。
function object(o) {function F() {}F.prototype = o;return new F();}?
?
這個(gè)object()函數(shù),其實(shí)只做一件事,就是把子對(duì)象的prototype屬性,指向父對(duì)象,從而使得子對(duì)象與父對(duì)象連在一起。
使用的時(shí)候,第一步先在父對(duì)象的基礎(chǔ)上,生成子對(duì)象:
var Doctor = object(Chinese);?
?
然后,再加上子對(duì)象本身的屬性:
Doctor.career = '醫(yī)生';?
?
這時(shí),子對(duì)象已經(jīng)繼承了父對(duì)象的屬性了。
alert(Doctor.nation); //中國(guó)?
?
三、淺拷貝
除了使用"prototype鏈"以外,還有另一種思路:把父對(duì)象的屬性,全部拷貝給子對(duì)象,也能實(shí)現(xiàn)繼承。
下面這個(gè)函數(shù),就是在做拷貝:
?
使用的時(shí)候,這樣寫:
var Doctor = extendCopy(Chinese);Doctor.career = '醫(yī)生';alert(Doctor.nation); // 中國(guó)?
但是,這樣的拷貝有一個(gè)問(wèn)題。那就是,如果父對(duì)象的屬性等于數(shù)組或另一個(gè)對(duì)象,那么實(shí)際上,子對(duì)象獲得的只是一個(gè)內(nèi)存地址,而不是真正拷貝,因此存在父對(duì)象被篡改的可能。
請(qǐng)看,現(xiàn)在給Chinese添加一個(gè)"出生地"屬性,它的值是一個(gè)數(shù)組。
Chinese.birthPlaces = ['北京','上海','香港'];?
通過(guò)extendCopy()函數(shù),Doctor繼承了Chinese。
var Doctor = extendCopy(Chinese);然后,我們?yōu)镈octor的"出生地"添加一個(gè)城市:
Doctor.birthPlaces.push('廈門');發(fā)生了什么事?Chinese的"出生地"也被改掉了!
所以,extendCopy()只是拷貝基本類型的數(shù)據(jù),我們把這種拷貝叫做"淺拷貝"。這是早期jQuery實(shí)現(xiàn)繼承的方式。
四、深拷貝
所謂"深拷貝",就是能夠?qū)崿F(xiàn)真正意義上的數(shù)組和對(duì)象的拷貝。它的實(shí)現(xiàn)并不難,只要遞歸調(diào)用"淺拷貝"就行了。
使用的時(shí)候這樣寫:
var Doctor = deepCopy(Chinese);現(xiàn)在,給父對(duì)象加一個(gè)屬性,值為數(shù)組。然后,在子對(duì)象上修改這個(gè)屬性:
Chinese.birthPlaces = ['北京','上海','香港'];Doctor.birthPlaces.push('廈門');這時(shí),父對(duì)象就不會(huì)受到影響了。
alert(Doctor.birthPlaces); //北京, 上海, 香港, 廈門alert(Chinese.birthPlaces); //北京, 上海, 香港目前,jQuery庫(kù)使用的就是這種繼承方法。
?
原文地址:http://www.j--d.com/js/414.html(無(wú)恥的抄小樹(shù)的了)
轉(zhuǎn)載于:https://www.cnblogs.com/LoveOrHate/p/4457596.html
總結(jié)
以上是生活随笔為你收集整理的Javascript非构造函数的继承的全部?jī)?nèi)容,希望文章能夠幫你解決所遇到的問(wèn)題。
- 上一篇: asp.net mvc 从数据库中读取图
- 下一篇: Java高效读取大文件