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


Posted in Javascript onMarch 30, 2012

题目:

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>

Javascript 相关文章推荐
js+FSO遍历文件夹下文件并显示
Mar 07 Javascript
JS中不为人知的五种声明Number的方式简要概述
Feb 22 Javascript
jquery select多选框的左右移动 具体实现代码
Jul 03 Javascript
window.location的重写及判断location是否被重写
Sep 04 Javascript
JS仿淘宝实现的简单滑动门效果代码
Oct 14 Javascript
jQuery Form表单取值的方法
Jan 11 Javascript
JavaScript实现定时页面跳转功能示例
Feb 14 Javascript
详解vue-cli构建项目反向代理配置
Sep 07 Javascript
Bootstrap4如何定制自己的颜色和风格
Feb 26 Javascript
layui框架table 数据表格的方法级渲染详解
Aug 19 Javascript
深入浅出了解Node.js Streams
May 27 Javascript
vue 使用vant插件做tabs切换和无限加载功能的实现
Nov 04 Javascript
jQuery 自定义函数写法分享
Mar 30 #Javascript
一个JQuery操作Table的代码分享
Mar 30 #Javascript
javascript工具库代码
Mar 29 #Javascript
Web开发之JavaScript
Mar 29 #Javascript
CodeMirror2 IE7/IE8 下面未知运行时错误的解决方法
Mar 29 #Javascript
javascript对talbe进行动态添加、删除、验证实现代码
Mar 29 #Javascript
jQuery 下拉列表 二级联动插件分享
Mar 29 #Javascript
You might like
笑谈配置,使用Smarty技术
2007/01/04 PHP
php array_map array_multisort 高效处理多维数组排序
2009/06/11 PHP
PHP 显示客户端IP与服务器IP的代码
2010/10/12 PHP
PHP简洁函数小结
2011/08/12 PHP
PHP文件上传之多文件上传的实现思路
2016/01/27 PHP
laravel csrf排除路由,禁止,关闭指定路由的例子
2019/10/21 PHP
jquery BS,dialog控件自适应大小
2009/07/06 Javascript
向大师们学习Javascript(视频与PPT)
2009/12/27 Javascript
js实现的真正的iframe高度自适应(兼容IE,FF,Opera)
2010/03/07 Javascript
js 用CreateElement动态创建标签示例
2013/11/20 Javascript
给js文件传参数(详解)
2014/07/13 Javascript
node.js中的console.time方法使用说明
2014/12/09 Javascript
JavaScript Length 属性的总结
2015/11/02 Javascript
bootstrap实现弹窗和拖动效果
2016/01/03 Javascript
精彩的Bootstrap案例分享 重点在注释!(选项卡、栅格布局)
2016/07/01 Javascript
zTree异步加载展开第一级节点的实现方法
2017/09/05 Javascript
vue.js  父向子组件传参的实例代码
2017/10/29 Javascript
跟混乱的页面弹窗说再见
2019/04/11 Javascript
实用的Vue开发技巧
2019/05/30 Javascript
聊聊Vue 中 title 的动态修改问题
2019/06/11 Javascript
[13:16]INFAMOUS vs VGJ T BO3
2018/06/07 DOTA
[36:22]VP vs Serenity 2018国际邀请赛小组赛BO2 第一场 8.16
2018/08/17 DOTA
python基础入门详解(文件输入/输出 内建类型 字典操作使用方法)
2013/12/08 Python
python用来获得图片exif信息的库实例分析
2015/03/16 Python
python抓取最新博客内容并生成Rss
2015/05/17 Python
详解python函数传参是传值还是传引用
2018/01/16 Python
python 矩阵增加一行或一列的实例
2018/04/04 Python
判断python对象是否可调用的三种方式及其区别详解
2019/01/31 Python
django框架forms组件用法实例详解
2019/12/10 Python
用python监控服务器的cpu,磁盘空间,内存,超过邮件报警
2021/01/29 Python
New Balance美国官网:运动鞋和健身服装
2017/04/11 全球购物
应聘面试自我评价
2014/01/24 职场文书
餐厅经理岗位职责范本
2014/02/17 职场文书
新闻发布会新闻稿
2015/07/17 职场文书
多属性、多分类MySQL模式设计
2021/04/05 MySQL
redis击穿 雪崩 穿透超详细解决方案梳理
2022/03/17 Redis