前端攻城狮学习笔记二:实现一个叫Man的类,包含attr, words, say三个方法。

面试题目

  这是搜狐JavaScript面试题,要求如下:

  实现一个叫Man的类,包含attr, words, say三个方法。

var Man;
//+++++++++++答题区域+++++++++++





//+++++++++++答题结束+++++++++++

try{
        
        var me = Man({ fullname: "小红" });
        var she = new Man({ fullname: "小红" });
        
        console.group();
        console.info("我的名字是:" + me.attr("fullname") + "\n我的性别是:" + me.attr("gender"));
        console.groupEnd();

        /*------[执行结果]------
        我的名字是:小红
        我的性别是:<用户未输入>
        ------------------*/

        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();

        /*------[执行结果]------
        我的名字是:小明
        我的性别是:男
        ------------------*/
        
        console.group();
        console.info("我的名字是:" + she.attr("fullname") + "\n我的性别是:" + she.attr("gender"));
        console.groupEnd();

        /*------[执行结果]------
        我的名字是:小红
        我的性别是:女
        ------------------*/

        me.attr({
                "words-limit": 3,
                "words-emote": "微笑"
        });
        me.words("我喜欢看视频。");
        me.words("我们的办公室太漂亮了。");
        me.words("视频里美女真多!");
        me.words("我平时都看优酷!");
        
        console.group();
        console.log(me.say());

        /*------[执行结果]------
        小明微笑:"我喜欢看视频。我们的办公室太漂亮了。视频里美女真多!"
        ------------------*/

        me.attr({
                "words-limit": 2,
                "words-emote": "喊"
        });

        console.log(me.say());
        console.groupEnd();

        /*------[执行结果]------
        小明喊:"我喜欢看视频。我们的办公室太漂亮了。"
        ------------------*/
        
}catch(e){
        console.error("执行出错,错误信息: " + e);
}

分析过程

  分析如下:

  从实例化对象的方式看,用new或不用都可以,这是一种作用域安全构造函数,原理就是检查this是不是指向当前方法本身,如果不是就强制new一个对象出来。所以大体框架如下:

Man=function(obj){
    if(this instanceof arguments.callee){
        for(var e in obj){
            this[e]=obj[e];
        }
    }
    else{
        return new Man(obj);
    }
};

  通过观察可以发现,attr方法可以获取或设置属性值,并且参数可以是一个字符串,一个字符串加一个值,一个对象。所以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可以发现,这里就是传入了一些字符串,以便在say方法中调用,所以这里直接给Man添加一个words_limit_arr的数组,用来存放这些字符串,所以words方法实现如下:

Man.prototype.words=function(str){
    this.words_limit_arr.push(str);
}

  最后就是say方法了,通过观察可以发现,say方法就是把fullname属性的值加上limit-emote的值,再加上前words-limit个words_limit_arr项连接成的字符串,所以定义如下:

Man.prototype.say=function(){
    return this["fullname"]+this["words-emote"]+":"+"\""+this.words_limit_arr.slice(0,this["words-limit"]).join("")+"\"";
}

  整个合起来就是:

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("")+"\"";
}

  但其中有个问题没有解决,就是用me.fullname=”xxx”方式的赋值不能改变me.attr(“fullname”,”xxx”)方式的赋值。这个问题导致运行效果如下:

相关阅读  Javascript中的delete

  这个问题要如何解决呢,我一直没想到,后来参考了别人的代码,那位朋友的思路是让me.attr(“fullname”,”xxx”)方式对fullname的赋值跟me.fullname不是同一个属性。

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

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("")+"\"";
}

  修改后运行效果如下:

小结

  本面试题主要考查了 作用域安全构造函数,instanceof/typeof 的用法,slice的用法,对数组的遍历,对对象成员的遍历等知识点。

  关于上面提到的“用me.fullname=”xxx”方式的赋值不能改变me.attr(“fullname”,”xxx”)方式的赋值”问题,如果各位朋友有新的方案,请不吝指点。也欢迎对我的方案拍砖论讨。


AD:【腾讯云服务器大降价】2核4G 222元/3年 1核2G 38元/年

AD:【腾讯云服务器大降价】2核4G 222元/3年 1核2G 38元/年

本文来自一日成建站教程网https://www.yiricheng.cn/),为广大编程爱好者提供零基础快速搭建博客网站的方法,分享计算机网络、HTML、CSS、JavaScript、PHP、响应式设计以及Python自动化办公的博客文章,另有各类小工具、电子书、免费教程。如若本站内容侵犯了原著者的合法权益,可联系我们进行处理。