JS函數(shù)進(jìn)階之繼承用法實(shí)例分析
本文實(shí)例講述了JS函數(shù)進(jìn)階之繼承用法。分享給大家供大家參考，具體如下：
直接代碼，不解釋?zhuān)?/p>
<html>
<head>
<title>js函數(shù)繼承進(jìn)階</title>
<meta charset="UTF-8"/>
<script type="text/javascript">
function person(name,age){ //對(duì)象的創(chuàng)建
this.name=name;
this.age=age;
// this.test=function(a){
// console.log("能運(yùn)行嗎");
// }
}
function book(name){
this.name="是我嗎";
this.lookat=function(a){
console.log("看看能行嗎");
}
}
function czxt(name){
this.name=name;
}
person.prototype.read=function(a){console.log("I can read");};
book.prototype.sign=function(a){console.log("I am book"); return new book()}; //視其為一個(gè)對(duì)象的一個(gè)屬性進(jìn)行”繼承“
person.prototype.book=new book(); //直接進(jìn)行“包含”
// person.prototype=new book();
czxt.prototype.appear=function(a){console.log("我是操作系統(tǒng)")};
book.prototype.subject=new czxt();
// book.prototype=new czxt();
var p1=new person("張三",37);
// p1.lookat(); //類(lèi)內(nèi)部的方法也可以調(diào)用
// console.log(p1.name); //包含類(lèi)和父類(lèi)都含有，是父類(lèi)的name屬性值。 "張三"
console.log(p1.book.name); //用屬性進(jìn)行調(diào)用的話，是包含類(lèi)的name屬性 ”是我嗎“
// p1.sign(); //直接調(diào)用包含函數(shù)方法
// p1.book.sign(); //調(diào)用對(duì)象屬性包含的方法
// p1.read(); //調(diào)用公共對(duì)象外函數(shù)
// p1.test(); //函數(shù)調(diào)用函數(shù)內(nèi)部的函數(shù)（視函數(shù)為對(duì)象）
// p1.address="山東"; //每個(gè)特定對(duì)象主動(dòng)添加對(duì)象屬性
// console.log(p1.address);
var b1=new book();
// b1.appear(); //調(diào)用其繼承體內(nèi)的函數(shù)
// p1.appear(); //無(wú)法調(diào)用包含對(duì)象內(nèi)的包含方法（無(wú)法直接調(diào)用孫子函數(shù)）
// p1.book.appear(); //用屬性調(diào)用也不行啊，不是函數(shù)可還行
// p1.book.subject.appear(); //雙重屬性定義可以，牛逼了。
// p1.sign().appear(); //person非屬性調(diào)用book，在book的sign方法中添加一個(gè)book類(lèi)型的返回值以此來(lái)調(diào)用book包含的方法。
</script>
</head>
<body>
<h3>js函數(shù)繼承進(jìn)階</h3>
</body>
</html>
運(yùn)行結(jié)果：
進(jìn)一步理解，引入prototype，一方面是實(shí)現(xiàn)了同一個(gè)類(lèi)創(chuàng)建對(duì)象時(shí)創(chuàng)建實(shí)現(xiàn)相同功能的方法，這些方法在對(duì)象創(chuàng)建時(shí)同樣會(huì)占用內(nèi)存，所以我們把方法定義到外面變成公共的方法，節(jié)省了內(nèi)存（注：如果是類(lèi)內(nèi)部的方法構(gòu)建兩個(gè)對(duì)象時(shí)其內(nèi)部的函數(shù)時(shí)不同的，不相等且不等同）另一方面，降低了代碼的冗余，其中當(dāng)你把一個(gè)類(lèi)的prototype值設(shè)置為一個(gè)對(duì)象，那么你就擁有了其內(nèi)部的屬性和方法，當(dāng)進(jìn)行包含后可以直接利用帶屬性調(diào)用或者直接調(diào)用，這樣有一個(gè)好處是：我們沒(méi)有必要?jiǎng)?chuàng)建這個(gè)對(duì)象就可以直接調(diào)用其內(nèi)部的方法。但是對(duì)于三層的包含關(guān)系，我們不能使用，要想使用就只能用連續(xù)雙重的屬性調(diào)用。對(duì)于內(nèi)部屬性值如果子類(lèi)和父類(lèi)的屬性名相同，那么直接調(diào)用就是父類(lèi)的屬性，利用屬性調(diào)用包含類(lèi)可以調(diào)用子類(lèi)的屬性。
感興趣的朋友可以使用在線HTML/CSS/JavaScript代碼運(yùn)行工具：http://tools.jb51.net/code/HtmlJsRun測(cè)試上述代碼運(yùn)行效果。
更多關(guān)于JavaScript相關(guān)內(nèi)容可查看本站專(zhuān)題：《JavaScript常用函數(shù)技巧匯總》、《javascript面向?qū)ο笕腴T(mén)教程》、《JavaScript查找算法技巧總結(jié)》、《JavaScript錯(cuò)誤與調(diào)試技巧總結(jié)》、《JavaScript數(shù)據(jù)結(jié)構(gòu)與算法技巧總結(jié)》及《JavaScript數(shù)學(xué)運(yùn)算用法總結(jié)》
希望本文所述對(duì)大家JavaScript程序設(shè)計(jì)有所幫助。
相關(guān)文章
Js on及addEventListener原理用法區(qū)別解析
這篇文章主要介紹了Js on及addEventListener原理用法區(qū)別解析,文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友可以參考下2020-07-07
這篇文章主要介紹了JSONP 的原理、理解與實(shí)例,結(jié)合實(shí)例形式分析了JSONP 的基本概念、原理、理解與使用技巧,需要的朋友可以參考下2020-05-05
這篇文章主要為大家詳細(xì)介紹了純js實(shí)現(xiàn)輪播圖效果，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2021-10-10
JS前端開(kāi)發(fā)判斷是否是手機(jī)端并跳轉(zhuǎn)操作（小結(jié)）
javascript模版引擎-tmpl的bug修復(fù)與性能優(yōu)化分析
setTimeout自動(dòng)觸發(fā)一個(gè)js的方法
javascript實(shí)現(xiàn)跨域的方法匯總
微信小程序點(diǎn)擊按鈕動(dòng)態(tài)切換input的disabled禁用/啟用狀態(tài)功能
javascript基礎(chǔ)語(yǔ)法學(xué)習(xí)筆記