从面试题学习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 相关文章推荐
csdn 博客中实现运行代码功能实现
Aug 29 Javascript
Three.js源码阅读笔记(基础的核心Core对象)
Dec 27 Javascript
js获取html页面节点方法(递归方式)
Dec 13 Javascript
js 去除字符串第一位逗号的方法
Jun 07 Javascript
JS判断变量是否为空判断是否null
Jul 25 Javascript
jquery实现无限分级横向导航菜单的方法
Mar 12 Javascript
jQuery网页选项卡插件rTabs用法实例分析
Aug 26 Javascript
微信小程序使用第三方库Immutable.js实例详解
Sep 27 Javascript
原生js代码实现图片放大境效果
Oct 30 Javascript
jQuery元素选择器实例代码
Feb 06 Javascript
解决layer 关闭当前弹窗 关闭遮罩层 input值获取不到的问题
Sep 25 Javascript
针对Vue路由history模式下Nginx后台配置操作
Oct 22 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/10/09 PHP
PHP 存储文本换行实现方法
2010/01/05 PHP
php simplexmlElement操作xml的命名空间实现代码
2011/01/04 PHP
解决在Laravel 中处理OPTIONS请求的问题
2019/10/11 PHP
可以把编码转换成 gb2312编码lib.UTF8toGB2312.js
2007/08/21 Javascript
js 手机号码合法性验证代码集合
2012/09/29 Javascript
两个数组去重的JS代码
2013/12/04 Javascript
js实现按钮加背景图片常用方法
2014/11/01 Javascript
jQuery插件EnPlaceholder实现输入框提示文字
2015/06/05 Javascript
jquery拖动层效果插件用法实例分析(附demo源码)
2016/04/28 Javascript
AngularJS中isolate scope的用法分析
2016/11/22 Javascript
利用angularjs1.4制作的简易滑动门效果
2017/02/28 Javascript
nodejs个人博客开发第六步 数据分页
2017/04/12 NodeJs
解决ionic和angular上拉加载的问题
2017/08/03 Javascript
JavaScript使用math.js进行精确计算操作示例
2018/06/19 Javascript
angular 内存溢出的问题解决
2018/07/12 Javascript
深入学习Vue nextTick的用法及原理
2019/10/08 Javascript
谈谈JavaScript中的函数
2020/09/08 Javascript
JavaScript TAB栏切换效果的示例
2020/11/05 Javascript
[55:16]Mski vs VGJ.S Supermajor小组赛C组 BO3 第二场 6.3
2018/06/04 DOTA
python线程锁(thread)学习示例
2013/12/04 Python
Python命令行参数解析模块getopt使用实例
2015/04/13 Python
基于pip install django失败时的解决方法
2018/06/12 Python
python 爬虫百度地图的信息界面的实现方法
2019/10/27 Python
Rakuten Kobo台湾:电子书、eReaders和Reading应用程式
2017/11/24 全球购物
比利时买床:Beter Bed
2017/12/06 全球购物
吉列剃须刀英国官网:Gillette英国
2019/03/28 全球购物
护理专业本科生自荐信
2013/10/01 职场文书
教师岗位职责
2013/11/17 职场文书
写给女生的道歉信
2014/01/08 职场文书
餐饮收银员岗位职责
2014/02/07 职场文书
司机检讨书
2014/02/13 职场文书
医院节能减排方案
2014/06/13 职场文书
2014年妇女工作总结
2014/12/06 职场文书
MySQL query_cache_type 参数与使用详解
2021/07/01 MySQL
Apache Linkis 中间件架构及快速安装步骤
2022/03/16 Servers