从面试题学习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 相关文章推荐
javascript中&quot;/&quot;运算符常见错误
Oct 13 Javascript
javascript:void(0)是什么意思示例介绍
Nov 17 Javascript
js中split函数的使用方法说明
Dec 26 Javascript
元素未显示设置width/height时IE中使用currentStyle获取为auto
May 04 Javascript
jQuery实现精美的多级下拉菜单特效
Mar 14 Javascript
详解Javacript和AngularJS中的Promises
Feb 09 Javascript
jQuery使用Selectator插件实现多选下拉列表过滤框(附源码下载)
Apr 08 Javascript
JavaScript三种绑定事件方式及相互之间的区别分析
Jan 10 Javascript
bootstrap下拉菜单使用方法解析
Jan 13 Javascript
layer子层给父层页面元素赋值,以达到向父层页面传值的效果实例
Sep 22 Javascript
react-native-video实现视频全屏播放的方法
Mar 19 Javascript
vue裁切预览组件功能的实现步骤
May 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
PHP二维数组的去重问题解析
2011/07/17 PHP
php教程之phpize使用方法
2014/02/12 PHP
一个完整的php文件上传类实例讲解
2015/10/27 PHP
如何使用php等比例缩放图片
2016/10/12 PHP
php 使用curl模拟ip和来源进行访问的实现方法
2017/05/02 PHP
Laravel5.5新特性之友好报错以及展示详解
2017/08/13 PHP
PHP实现重载的常用方法实例详解
2017/10/18 PHP
再谈Yii Framework框架中的事件event原理与应用
2020/04/07 PHP
共享自己写一个框架DreamScript
2007/01/20 Javascript
深入理解JavaScript 闭包究竟是什么
2013/04/12 Javascript
浅析JavaScript中两种类型的全局对象/函数
2013/12/05 Javascript
javascript如何创建表格(javascript绘制表格的二种方法)
2013/12/10 Javascript
js清空表单数据的两种方式(遍历+reset)
2014/07/18 Javascript
JQuery设置时间段下拉选择实例
2014/12/30 Javascript
jQuery的one()方法用法实例
2015/01/19 Javascript
jQuery+css实现的蓝色水平二级导航菜单效果代码
2015/09/11 Javascript
jQuery实现可以编辑的表格实例详解【附demo源码下载】
2016/07/09 Javascript
jquery实用技巧之输入框提示语句
2016/07/28 Javascript
再谈Javascript中的异步以及如何异步
2016/08/19 Javascript
浅析vue-cli3配置webpack-bundle-analyzer插件【推荐】
2019/10/23 Javascript
vue prop传值类型检验方式
2020/07/30 Javascript
[06:16]《DAC最前线》之地区预选赛全面回顾
2015/01/19 DOTA
python网络编程学习笔记(六):Web客户端访问
2014/06/09 Python
低版本中Python除法运算小技巧
2015/04/05 Python
使用python加密自己的密码
2015/08/04 Python
python利用插值法对折线进行平滑曲线处理
2018/12/25 Python
使用python的pexpect模块,实现远程免密登录的示例
2019/02/14 Python
pyqt5之将textBrowser的内容写入txt文档的方法
2019/06/21 Python
详解CSS3新增的背景属性
2019/12/25 HTML / CSS
Linux的主要特性
2016/09/03 面试题
初中生学习生活的自我评价
2013/11/20 职场文书
2014信息技术专业毕业生自我评价
2014/01/17 职场文书
高中班主任评语
2014/12/30 职场文书
升学宴家长答谢词
2015/09/29 职场文书
2016年党员干部廉政承诺书
2016/03/24 职场文书
如何利用python和DOS获取wifi密码
2021/03/31 Python