从面试题学习Javascript 面向对象(创建对象)

所属分类: 网络编程 / JavaScript 阅读数: 1852
收藏 0 赞 0 分享
题目:
复制代码 代码如下:

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

知识点:
(1)JS面向对象基础:ECMA-262把对象定义为:“无序属性的集合,其属性可以包含基本值、对象或者函数”。
(2)JS创建对象的方法:
  (a)工厂模式:用函数来封装以特定接口创建对象的细节。
      function createPerson(name, age, job){
          var o = new Object();
          o.name = name;
          o.age = age;
          o.job = job;
          o.sayName = function(){
          alert(this.name);
          };
      return o;
      }
    var person1 = createPerson(“Nicholas”, 29, “Software Engineer”);
    var person2 = createPerson(“Greg”, 27, “Doctor”);
    缺点:工厂模式虽然解决了创建多个相识对象的问题,但却没有解决对象识别的问题(即怎样知道一个对象的类型)。
  (b)构造函数模式:ECMAScript中的构造函数可以用来创建特定类型的对象。可以创建自定义的构造函数,从而定义自定义对象类型的属性和方法。
      function Person(name, age, job){
        this.name = name;
        this.age = age;
        this.job = job;
        this.sayName = function(){
        alert(this.name);
        };
      }
      var person1 = new Person(“Nicholas”, 29, “Software Engineer”);
      var person2 = new Person(“Greg”, 27, “Doctor”);
    缺点:使用构造函数的主要问题,就是每个方法都要在每个实例上重新创建一遍。不要忘了——ECMAScript中的函数是对象,因此每定义一个函数,
    就是实例化一个对象。
  (c)原型模式:我们创建的每个函数都有一个prototype(原型)属性,这个属性是一个指针,指向一个对象,而这个对象的用途是包含可以由特定类型
    的所有实例共享的属性和方法。使用原型对象的好处是可以让所有对象共享它包含的属性和方法
      function Person(){
      }
      Person.prototype.name = “Nicholas”;
      Person.prototype.age = 29;
      Person.prototype.job = “Software Engineer”;
      Person.prototype.sayName = function(){
        alert(this.name);
      };
      var person1 = new Person();
      person1.sayName(); //”Nicholas”
      var person2 = new Person();
      person2.sayName(); //”Nicholas”
      alert(person1.sayName == person2.sayName); //true
    缺点:原型中所有属性是被很多实例共享的,这种共享对于函数非常合适。但是对于引用类型值的属性来说,问题就比较突出了。
    (d)组合使用构造函数模式和原型模式:创建自定义类型的最常见方式,就是使用组合使用构造函数模式和原型模式。构造函数模式用于定义实例属性,
      而原型模式用于定义方法和共享的属性。
      function Person(name, age, job){
        this.name = name;
        this.age = age;
        this.job = job;
        this.friends = [“Shelby”, “Court”];
      }
      Person.prototype = {
        constructor: Person,
        sayName : function () {
        alert(this.name);
        }
      };
      var person1 = new Person(“Nicholas”, 29, “Software Engineer”);
      var person2 = new Person(“Greg”, 27, “Doctor”);
      person1.friends.push(“Van”);
      alert(person1.friends); //”Shelby,Court,Van”
      alert(person2.friends); //”Shelby,Court”
      alert(person1.friends === person2.friends); //false
      alert(person1.sayName === person2.sayName); //true
答案:
复制代码 代码如下:

<!DOCTYPE html>
<html>
<head>
<style type="text/css" rel="stylesheet">
</style>
<title></title>
</head>
<body>
</body>
<script type="text/javascript">
window.onload=function()
{
var Man;
//+++++++++++答题区域+++++++++++
Man=function(obj){
if(!(this instanceof Man))
{
return new Man(obj);
}
this.attrObj=obj||{};
this.wordsObj=[];
}
Man.prototype={
constructor:Man,
words:function(word){
word!=undefined&&this.wordsObj.push(word);
},
attr:function(attribute,attributeValue)
{
var defaultVaule="<用户未输入>";
if(arguments.length==2){
this.attrObj[attribute]=attributeValue;
}
else if(!(attribute instanceof Object))
{
if((this.attrObj[attribute]===undefined))
{
return defaultVaule;
}
else
{
return this.attrObj[attribute];
}
}
else{
for(property in attribute)
{
this.attrObj[property]=attribute[property];
}
}
},
say:function()
{
var limit=this.attrObj['words-limit'],
outputString,
wordsLen=this.wordsObj.length;
outputString=this.attr("fullname")+this.attr("words-emote")+":";
for(var i=0;i<limit;i++)
{
outputString+=this.wordsObj[i];
}
return outputString;
}
};
//+++++++++++答题结束+++++++++++
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);
}
}
</script>
</html>

更多精彩内容其他人还在看

jQuery LigerUI 使用教程表格篇(1)

ligerGrid是ligerui系列插件的核心控件,用户可以快速地创建一个美观,而且功能强大的表格,支持排序、分页、多表头、固定列等等
收藏 0 赞 0 分享

JavaScript中常用的运算符小结

JavaScript中常用的运算符小结,需要的朋友可以参考下。
收藏 0 赞 0 分享

深入理解JavaScript系列(13) This? Yes,this!

在这篇文章里,我们将讨论跟执行上下文直接相关的更多细节。讨论的主题就是this关键字。实践证明,这个主题很难,在不同执行上下文中this的确定经常会发生问题
收藏 0 赞 0 分享

javascript (用setTimeout而非setInterval)

javascript (用setTimeout而非setInterval)如果用setInterval 可能出现 下次调用会在前一次调用前调用
收藏 0 赞 0 分享

JavaScript中两个感叹号的作用说明

用两个感叹号的作用就在于,如果明确设置了o中flag的值(非null/undefined/0""/等值),自然test就会取跟o.flag一样的值;如果没有设置,test就会默认为false,而不是null或undefined
收藏 0 赞 0 分享

javascript写的简单的计算器,内容很多,方法实用,推荐

最近用javascript写了一个简单的计算器,自己测试感觉还好,代码都给了注释,非常不错,推荐大家学习。
收藏 0 赞 0 分享

js的表单操作 简单计算器

javascript写的简单的加减乘除计算器,里面涉及到一些方法还是很实用的哦,新手不要错过
收藏 0 赞 0 分享

Jquery中删除元素的实现代码

empty用来删除指定元素的子元素,remove用来删除元素,或者设定细化条件执行删除
收藏 0 赞 0 分享

javaScript 利用闭包模拟对象的私有属性

JavaScript缺少块级作用域,没有private修饰符,但它具有函数作用域。作用域的好处是内部函数可以访问它们的外部函数的参数和变量(除了this和argument
收藏 0 赞 0 分享

为JavaScript类型增加方法的实现代码(增加功能)

大家在js开发过程中有些功能已经满足不了我们的需求,或没有我们需要的功能,那么我们就可以自己扩展下,个性化js
收藏 0 赞 0 分享
查看更多