JS函式進階之繼承用法例項分析
阿新 • • 發佈：2020-01-16
本文例項講述了JS函式進階之繼承用法。分享給大家供大家參考，具體如下：
直接程式碼，不解釋：
<html>
<head>
<title>js函式繼承進階</title>
<meta charset="UTF-8"/>
<script type="text/javascript">
function person(name,age){ //物件的建立
this.name=name;
this.age=age;
// this.test=function(a){
// console.log("能執行嗎");
// }
}
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()}; //視其為一個物件的一個屬性進行”繼承“
person.prototype.book=new book(); //直接進行“包含”
// person.prototype=new book();
czxt.prototype.appear=function(a){console.log("我是作業系統")};
book.prototype.subject=new czxt();
// book.prototype=new czxt();
var p1=new person("張三",37);
// p1.lookat(); //類內部的方法也可以呼叫
// console.log(p1.name); //包含類和父類都含有，是父類的name屬性值。 "張三"
console.log(p1.book.name); //用屬性進行呼叫的話，是包含類的name屬性 ”是我嗎“
// p1.sign(); //直接呼叫包含函式方法
// p1.book.sign(); //呼叫物件屬性包含的方法
// p1.read(); //呼叫公共物件外函式
// p1.test(); //函式呼叫函式內部的函式（視函式為物件）
// p1.address="山東"; //每個特定物件主動新增物件屬性
// console.log(p1.address);
var b1=new book();
// b1.appear(); //呼叫其繼承體內的函式
// p1.appear(); //無法呼叫包含物件內的包含方法（無法直接呼叫孫子函式）
// p1.book.appear(); //用屬性呼叫也不行啊，不是函式可還行
// p1.book.subject.appear(); //雙重屬性定義可以，牛逼了。
// p1.sign().appear(); //person非屬性呼叫book，在book的sign方法中新增一個book型別的返回值以此來呼叫book包含的方法。
</script>
</head>
<body>
<h3>js函式繼承進階</h3>
</body>
</html>
執行結果：
進一步理解，引入prototype，一方面是實現了同一個類建立物件時建立實現相同功能的方法，這些方法在物件建立時同樣會佔用記憶體，所以我們把方法定義到外面變成公共的方法，節省了記憶體（注：如果是類內部的方法構建兩個物件時其內部的函式時不同的，不相等且不等同）另一方面，降低了程式碼的冗餘，其中當你把一個類的prototype值設定為一個物件，那麼你就擁有了其內部的屬性和方法，當進行包含後可以直接利用帶屬性呼叫或者直接呼叫，這樣有一個好處是：我們沒有必要建立這個物件就可以直接呼叫其內部的方法。但是對於三層的包含關係，我們不能使用，要想使用就只能用連續雙重的屬性呼叫。對於內部屬性值如果子類和父類的屬性名相同，那麼直接呼叫就是父類的屬性，利用屬性呼叫包含類可以呼叫子類的屬性。
感興趣的朋友可以使用線上HTML/CSS/JavaScript程式碼執行工具：http://tools.jb51.net/code/HtmlJsRun測試上述程式碼執行效果。
更多關於JavaScript相關內容可檢視本站專題：《JavaScript常用函式技巧彙總》、《javascript面向物件入門教程》、《JavaScript查詢演算法技巧總結》、《JavaScript錯誤與除錯技巧總結》、《JavaScript資料結構與演算法技巧總結》及《JavaScript數學運算用法總結》
希望本文所述對大家JavaScript程式設計有所幫助。