亚洲免费在线-亚洲免费在线播放-亚洲免费在线观看-亚洲免费在线观看视频-亚洲免费在线看-亚洲免费在线视频

前端攻城獅學(xué)習(xí)筆記二:實(shí)現(xiàn)一個(gè)叫Man的類,包

系統(tǒng) 1866 0

面試題目

  這是 搜狐JavaScript面試題 ,要求如下:

  實(shí)現(xiàn)一個(gè)叫Man的類,包含attr, words, say三個(gè)方法。

      
        var
      
      
         Man;


      
      
        //
      
      
        +++++++++++答題區(qū)域+++++++++++
      
      
        //
      
      
        +++++++++++答題結(jié)束+++++++++++
      
      
        try
      
      
        {

        

        
      
      
        var
      
       me = Man({ fullname: "小紅"
      
         });

        
      
      
        var
      
       she = 
      
        new
      
       Man({ fullname: "小紅"
      
         });

        

        console.group();

        console.info(
      
      "我的名字是:" + me.attr("fullname") + "\n我的性別是:" + me.attr("gender"
      
        ));

        console.groupEnd();



        
      
      
        /*
      
      
        ------[執(zhí)行結(jié)果]------

        我的名字是:小紅

        我的性別是:<用戶未輸入>

        ------------------
      
      
        */
      
      
        



        me.attr(
      
      "fullname", "小明"
      
        );

        me.attr(
      
      "gender", "男"
      
        );

        me.fullname 
      
      = "廢柴"
      
        ;

        me.gender 
      
      = "人妖"
      
        ; 

        she.attr(
      
      "gender", "女"
      
        );

        

        console.group();

        console.info(
      
      "我的名字是:" + me.attr("fullname") + "\n我的性別是:" + me.attr("gender"
      
        ));

        console.groupEnd();



        
      
      
        /*
      
      
        ------[執(zhí)行結(jié)果]------

        我的名字是:小明

        我的性別是:男

        ------------------
      
      
        */
      
      
        

        

        console.group();

        console.info(
      
      "我的名字是:" + she.attr("fullname") + "\n我的性別是:" + she.attr("gender"
      
        ));

        console.groupEnd();



        
      
      
        /*
      
      
        ------[執(zhí)行結(jié)果]------

        我的名字是:小紅

        我的性別是:女

        ------------------
      
      
        */
      
      
        



        me.attr({

                
      
      "words-limit": 3
      
        ,

                
      
      "words-emote": "微笑"
      
        

        });

        me.words(
      
      "我喜歡看視頻。"
      
        );

        me.words(
      
      "我們的辦公室太漂亮了。"
      
        );

        me.words(
      
      "視頻里美女真多!"
      
        );

        me.words(
      
      "我平時(shí)都看優(yōu)酷!"
      
        );

        

        console.group();

        console.log(me.say());



        
      
      
        /*
      
      
        ------[執(zhí)行結(jié)果]------

        小明微笑:"我喜歡看視頻。我們的辦公室太漂亮了。視頻里美女真多!"

        ------------------
      
      
        */
      
      
        



        me.attr({

                
      
      "words-limit": 2
      
        ,

                
      
      "words-emote": "喊"
      
        

        });



        console.log(me.say());

        console.groupEnd();



        
      
      
        /*
      
      
        ------[執(zhí)行結(jié)果]------

        小明喊:"我喜歡看視頻。我們的辦公室太漂亮了。"

        ------------------
      
      
        */
      
      
        

        

}
      
      
        catch
      
      
        (e){

        console.error(
      
      "執(zhí)行出錯(cuò),錯(cuò)誤信息: " +
      
         e);

}
      
    

分析過程

  分析如下:

  從實(shí)例化對(duì)象的方式看,用new或不用都可以,這是一種作用域安全構(gòu)造函數(shù),原理就是檢查this是不是指向當(dāng)前方法本身,如果不是就強(qiáng)制new一個(gè)對(duì)象出來。所以大體框架如下:

      Man=
      
        function
      
      
        (obj){

    
      
      
        if
      
      (
      
        this
      
      
        instanceof
      
      
         arguments.callee){

        
      
      
        for
      
      (
      
        var
      
       e 
      
        in
      
      
         obj){

            
      
      
        this
      
      [e]=
      
        obj[e];

        }

    }

    
      
      
        else
      
      
        {

        
      
      
        return
      
      
        new
      
      
         Man(obj);

    }

};
      
    

  通過觀察可以發(fā)現(xiàn),attr方法可以獲取或設(shè)置屬性值,并且參數(shù)可以是一個(gè)字符串,一個(gè)字符串加一個(gè)值,一個(gè)對(duì)象。所以attr方法定義如下:

      Man.prototype.attr=
      
        function
      
      
        (attr,val){

    
      
      
        if
      
      
        (val){

        
      
      
        this
      
      [attr]=
      
        val;

    }

    
      
      
        else
      
      
        {

        
      
      
        if
      
      (
      
        typeof
      
       attr === "string"
      
        ){

            
      
      
        return
      
      
        this
      
      .hasOwnProperty(attr)?
      
        this
      
      [attr]:"<用戶未輸入>"
      
        ;

        }

        
      
      
        else
      
      
        if
      
      (
      
        typeof
      
       attr === "object"
      
        ){

            
      
      
        for
      
      (
      
        var
      
       e 
      
        in
      
      
         attr){

                
      
      
        this
      
      [e]=
      
        attr[e];

            }

        }

        
      
      
        else
      
      
        {

        }

    }

}
      
    

  通過觀察words可以發(fā)現(xiàn),這里就是傳入了一些字符串,以便在say方法中調(diào)用,所以這里直接給Man添加一個(gè)words_limit_arr的數(shù)組,用來存放這些字符串,所以words方法實(shí)現(xiàn)如下:

      Man.prototype.words=
      
        function
      
      
        (str){

    
      
      
        this
      
      
        .words_limit_arr.push(str);

}
      
    

  最后就是say方法了,通過觀察可以發(fā)現(xiàn),say方法就是把fullname屬性的值加上limit-emote的值,再加上前words-limit個(gè)words_limit_arr項(xiàng)連接成的字符串,所以定義如下:

      Man.prototype.say=
      
        function
      
      
        (){

    
      
      
        return
      
      
        this
      
      ["fullname"]+
      
        this
      
      ["words-emote"]+":"+"\""+
      
        this
      
      .words_limit_arr.slice(0,
      
        this
      
      ["words-limit"]).join("")+"\""
      
        ;

}
      
    

  整個(gè)合起來就是:

      
        var
      
       Man=
      
        function
      
      
        (obj){

    
      
      
        if
      
      (
      
        this
      
      
        instanceof
      
      
         arguments.callee){

        
      
      
        for
      
      (
      
        var
      
       e 
      
        in
      
      
         obj){

            
      
      
        this
      
      [e]=
      
        obj[e];

        }

        
      
      
        this
      
      .words_limit_arr=
      
        [];

    }

    
      
      
        else
      
      
        {

        
      
      
        return
      
      
        new
      
      
         Man(obj);

    }

};



Man.prototype.attr
      
      =
      
        function
      
      
        (attr,val){

    
      
      
        if
      
      
        (val){

        
      
      
        this
      
      [attr]=
      
        val;

    }

    
      
      
        else
      
      
        {

        
      
      
        if
      
      (
      
        typeof
      
       attr === "string"
      
        ){

            
      
      
        return
      
      
        this
      
      .hasOwnProperty(attr)?
      
        this
      
      [attr]:"<用戶未輸入>"
      
        ;

        }

        
      
      
        else
      
      
        if
      
      (
      
        typeof
      
       attr === "object"
      
        ){

            
      
      
        for
      
      (
      
        var
      
       e 
      
        in
      
      
         attr){

                
      
      
        this
      
      [e]=
      
        attr[e];

            }

        }

        
      
      
        else
      
      
        {

        }

    }

}



Man.prototype.words
      
      =
      
        function
      
      
        (str){

    
      
      
        this
      
      
        .words_limit_arr.push(str);

}



Man.prototype.say
      
      =
      
        function
      
      
        (){

    
      
      
        return
      
      
        this
      
      ["fullname"]+
      
        this
      
      ["words-emote"]+":"+"\""+
      
        this
      
      .words_limit_arr.slice(0,
      
        this
      
      ["words-limit"]).join("")+"\""
      
        ;

}
      
    

  但其中有個(gè)問題沒有解決,就是用me.fullname="xxx"方式的賦值不能改變me.attr("fullname","xxx")方式的賦值。這個(gè)問題導(dǎo)致運(yùn)行效果如下:

前端攻城獅學(xué)習(xí)筆記二:實(shí)現(xiàn)一個(gè)叫Man的類,包含attr, words, say三個(gè)方法。

  這個(gè)問題要如何解決呢,我一直沒想到,后來參考了別人的代碼,那位朋友的思路是讓me.attr("fullname","xxx")方式對(duì)fullname的賦值跟me.fullname不是同一個(gè)屬性。

  在沒想到其他方案之前,我也只好把我的代碼修改如下:

      
        var
      
       Man=
      
        function
      
      
        (obj){

    
      
      
        if
      
      (
      
        this
      
      
        instanceof
      
      
         arguments.callee){

        
      
      
        this
      
      .infos=
      
        {
      
      
        };

        
      
      
        for
      
      (
      
        var
      
       e 
      
        in
      
      
         obj){

            
      
      
        this
      
      .infos[e]=
      
        obj[e];

        }

        
      
      
        this
      
      .words_limit_arr=
      
        [];

    }

    
      
      
        else
      
      
        {

        
      
      
        return
      
      
        new
      
      
         Man(obj);

    }

};



Man.prototype.attr
      
      =
      
        function
      
      
        (attr,val){

    
      
      
        if
      
      
        (val){

        
      
      
        this
      
      .infos[attr]=
      
        val;

    }

    
      
      
        else
      
      
        {

        
      
      
        if
      
      (
      
        typeof
      
       attr === "string"
      
        ){

            
      
      
        return
      
      
        this
      
      .infos[attr]?
      
        this
      
      .infos[attr]:"<用戶未輸入>"
      
        ;

        }

        
      
      
        else
      
      
        if
      
      (
      
        typeof
      
       attr === "object"
      
        ){

            
      
      
        for
      
      (
      
        var
      
       e 
      
        in
      
      
         attr){

                
      
      
        this
      
      .infos[e]=
      
        attr[e];

            }

        }

        
      
      
        else
      
      
        {

        }

    }

}



Man.prototype.words
      
      =
      
        function
      
      
        (str){

    
      
      
        this
      
      
        .words_limit_arr.push(str);

}



Man.prototype.say
      
      =
      
        function
      
      
        (){

    
      
      
        return
      
      
        this
      
      .infos["fullname"]+
      
        this
      
      .infos["words-emote"]+":"+"\""+
      
        this
      
      .words_limit_arr.slice(0,
      
        this
      
      .infos["words-limit"]).join("")+"\""
      
        ;

}
      
    

  修改后運(yùn)行效果如下:

前端攻城獅學(xué)習(xí)筆記二:實(shí)現(xiàn)一個(gè)叫Man的類,包含attr, words, say三個(gè)方法。

小結(jié)

  本面試題主要考查了 作用域安全構(gòu)造函數(shù),instanceof/typeof 的用法,slice的用法,對(duì)數(shù)組的遍歷,對(duì)對(duì)象成員的遍歷等知識(shí)點(diǎn)。

  關(guān)于上面提到的“用me.fullname="xxx"方式的賦值不能改變me.attr("fullname","xxx")方式的賦值”問題,如果各位朋友有新的方案,請(qǐng)不吝指點(diǎn)。也歡迎對(duì)我的方案拍磚論討。

前端攻城獅學(xué)習(xí)筆記二:實(shí)現(xiàn)一個(gè)叫Man的類,包含attr, words, say三個(gè)方法。


更多文章、技術(shù)交流、商務(wù)合作、聯(lián)系博主

微信掃碼或搜索:z360901061

微信掃一掃加我為好友

QQ號(hào)聯(lián)系: 360901061

您的支持是博主寫作最大的動(dòng)力,如果您喜歡我的文章,感覺我的文章對(duì)您有幫助,請(qǐng)用微信掃描下面二維碼支持博主2元、5元、10元、20元等您想捐的金額吧,狠狠點(diǎn)擊下面給點(diǎn)支持吧,站長非常感激您!手機(jī)微信長按不能支付解決辦法:請(qǐng)將微信支付二維碼保存到相冊(cè),切換到微信,然后點(diǎn)擊微信右上角掃一掃功能,選擇支付二維碼完成支付。

【本文對(duì)您有幫助就好】

您的支持是博主寫作最大的動(dòng)力,如果您喜歡我的文章,感覺我的文章對(duì)您有幫助,請(qǐng)用微信掃描上面二維碼支持博主2元、5元、10元、自定義金額等您想捐的金額吧,站長會(huì)非常 感謝您的哦!!!

發(fā)表我的評(píng)論
最新評(píng)論 總共0條評(píng)論
主站蜘蛛池模板: 日本不卡在线一区二区三区视频 | 欧美成人禁片在线观看网址 | 夜色视频一区二区三区 | 免费观看男女羞羞的视频网站 | 成年女人在线观看 | 奇米影视222 | 精品哟哟哟国产在线观看不卡 | 久久久99精品免费观看精品 | 久久伊人影视 | 国产精品免费观看网站 | 久久久久国产精品免费网站 | 日本免费一区二区久久人人澡 | 台湾一级毛片免费播放 | 青青草久热精品视频在线观看 | 91精品国产爱久久久久久 | 国产亚洲精品久久久久久 | 一级黄色录像视频 | 国产丶欧美丶日韩丶不卡影视 | 99久久综合狠狠综合久久 | 亚洲精品一区二区三区不卡 | 欧美成人鲁丝片在线观看 | 久久77777| 色偷偷91久久综合噜噜噜噜 | 四虎成人4hutv影院 | 精品亚洲综合在线第一区 | 综合久久2o19| 九九99香蕉在线视频网站 | 久久久网久久久久合久久久久 | 九九视频精品全部免费播放 | 亚洲国产成人麻豆精品 | 国产精品视频免费在线观看 | 国产成人精品久久二区二区 | 九九热免费视频 | 一集毛片 | 久久频这里精品99香蕉久网址 | 国产亚洲99影院 | 麻豆国产原创最新在线视频 | 午夜成人免费影院 | 日韩欧美成末人一区二区三区 | www.91自拍| 久久久久99精品成人片三人毛片 |