从面试题学习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 相关文章推荐
一个判断email合法性的函数[非正则]
Dec 09 Javascript
基于jquery的让页面控件不可用的实现代码
Apr 27 Javascript
使用Grunt.js管理你项目的应用说明
Apr 24 Javascript
js获取 type=radio 值的方法
May 09 Javascript
使用JSON.parse将json字符串转换成json对象的时候会出错
Sep 04 Javascript
在浏览器中实现图片粘贴的jQuery插件-- pasteimg使用指南
Dec 29 Javascript
优化RequireJS项目的相关技巧总结
Jul 01 Javascript
利用n 升级工具升级Node.js版本及在mac环境下的坑
Feb 15 Javascript
利用node.js如何搭建一个简易的即时响应服务器
May 28 Javascript
vue绑定的点击事件阻止冒泡的实例
Feb 08 Javascript
js实现图片局部放大效果详解
Mar 18 Javascript
Bootstrap table 实现树形表格联动选中联动取消功能
Sep 30 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
PHP中,文件上传
2006/12/06 PHP
分享一个PHP数据流应用的简单例子
2012/06/01 PHP
ThinkPHP结合ajax、Mysql实现的客户端通信功能代码示例
2014/06/23 PHP
PHP获取MySQL执行sql语句的查询时间方法
2018/08/21 PHP
鼠标滚轮改变图片大小的示例代码
2013/11/20 Javascript
append和appendTo的区别以及appendChild用法
2013/12/24 Javascript
window.onload追加函数使用示例
2014/03/03 Javascript
jQuery动画效果实现图片无缝连续滚动
2016/01/12 Javascript
JavaScript实现通过select标签跳转网页的方法
2016/09/29 Javascript
JavaScript实现提交模式窗口后刷新父窗口数据的方法
2017/06/16 Javascript
在vue中使用jointjs的方法
2018/03/24 Javascript
详解解决使用axios发送json后台接收不到的问题
2018/06/27 Javascript
vue项目中实现的微信分享功能示例
2019/01/21 Javascript
JavaScript对象字面量和构造函数原理与用法详解
2020/04/18 Javascript
[03:13]DOTA2-DPC中国联赛1月25日Recap集锦
2021/03/11 DOTA
Python魔术方法详解
2015/02/14 Python
python字符串string的内置方法实例详解
2018/05/14 Python
Python 使用 Pillow 模块给图片添加文字水印的方法
2019/08/30 Python
用python求一重积分和二重积分的例子
2019/12/06 Python
Pytorch 神经网络—自定义数据集上实现教程
2020/01/07 Python
python selenium操作cookie的实现
2020/03/18 Python
python 如何停止一个死循环的线程
2020/11/24 Python
如何使用python-opencv批量生成带噪点噪线的数字验证码
2020/12/21 Python
45个非常奇妙的CSS3 特性应用示例
2012/01/01 HTML / CSS
澳大利亚领先的女帽及配饰公司:Morgan&Taylor
2019/12/01 全球购物
请解释virtual关键字的含义
2015/06/17 面试题
应届生文秘专业个人自荐信格式
2013/09/21 职场文书
遗嘱继承公证书
2014/04/09 职场文书
乔布斯斯坦福大学演讲稿
2014/05/23 职场文书
团党委领导干部党的群众路线教育实践活动个人对照检查材料思想汇
2014/10/05 职场文书
2015年国庆节慰问信
2015/03/23 职场文书
物业项目经理岗位职责
2015/04/01 职场文书
思想工作总结范文
2015/08/12 职场文书
如何用Laravel包含你自己的帮助函数
2021/05/27 PHP
Python可变集合和不可变集合的构造方法大全
2021/12/06 Python
《现实主义勇者的王国再建记》第三弹OST全曲试听片段公开
2022/04/04 日漫