快捷導(dǎo)航

JS函數(shù)進(jìn)階之繼承用法實(shí)例分析

更新時(shí)間：2020年01月15日 11:08:35 作者：qq_42412646

這篇文章主要介紹了JS函數(shù)進(jìn)階之繼承用法,結(jié)合實(shí)例形式分析了JavaScript函數(shù)繼承相關(guān)定義與使用操作技巧,需要的朋友可以參考下

本文實(shí)例講述了JS函數(shù)進(jìn)階之繼承用法。分享給大家供大家參考，具體如下：

直接代碼，不解釋：

<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();    //類內(nèi)部的方法也可以調(diào)用
//            console.log(p1.name);   //包含類和父類都含有，是父類的name屬性值。  "張三"
            console.log(p1.book.name); //用屬性進(jìn)行調(diào)用的話，是包含類的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();   //無法調(diào)用包含對(duì)象內(nèi)的包含方法（無法直接調(diào)用孫子函數(shù)）
//            p1.book.appear();  //用屬性調(diào)用也不行啊，不是函數(shù)可還行
//            p1.book.subject.appear(); //雙重屬性定義可以，牛逼了。
//            p1.sign().appear();  //person非屬性調(diào)用book，在book的sign方法中添加一個(gè)book類型的返回值以此來調(diào)用book包含的方法。
        </script>
    </head>
    <body>
        <h3>js函數(shù)繼承進(jìn)階</h3>
    </body>
</html>

運(yùn)行結(jié)果：

進(jìn)一步理解，引入prototype，一方面是實(shí)現(xiàn)了同一個(gè)類創(chuàng)建對(duì)象時(shí)創(chuàng)建實(shí)現(xiàn)相同功能的方法，這些方法在對(duì)象創(chuàng)建時(shí)同樣會(huì)占用內(nèi)存，所以我們把方法定義到外面變成公共的方法，節(jié)省了內(nèi)存（注：如果是類內(nèi)部的方法構(gòu)建兩個(gè)對(duì)象時(shí)其內(nèi)部的函數(shù)時(shí)不同的，不相等且不等同）另一方面，降低了代碼的冗余，其中當(dāng)你把一個(gè)類的prototype值設(shè)置為一個(gè)對(duì)象，那么你就擁有了其內(nèi)部的屬性和方法，當(dāng)進(jìn)行包含后可以直接利用帶屬性調(diào)用或者直接調(diào)用，這樣有一個(gè)好處是：我們沒有必要?jiǎng)?chuàng)建這個(gè)對(duì)象就可以直接調(diào)用其內(nèi)部的方法。但是對(duì)于三層的包含關(guān)系，我們不能使用，要想使用就只能用連續(xù)雙重的屬性調(diào)用。對(duì)于內(nèi)部屬性值如果子類和父類的屬性名相同，那么直接調(diào)用就是父類的屬性，利用屬性調(diào)用包含類可以調(diào)用子類的屬性。

感興趣的朋友可以使用在線HTML/CSS/JavaScript代碼運(yùn)行工具：http://tools.jb51.net/code/HtmlJsRun測(cè)試上述代碼運(yùn)行效果。

希望本文所述對(duì)大家JavaScript程序設(shè)計(jì)有所幫助。

您可能感興趣的文章: