首页
所有分类
TAGS
文字工具 EMOJI BIBLE
编程 Javascript

从面试题学习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 相关文章推荐
js ondocumentready onmouseover onclick onmouseout 样式
Jul 22 Javascript
jquery获取div宽度的实现思路与代码
Jan 13 Javascript
extjs 3.31 TreeGrid实现静态页面加载json到TreeGrid里面
Apr 02 Javascript
JS获取当前日期和时间的简单实例
Nov 19 Javascript
js获取IP地址的方法小结
Jul 01 Javascript
JavaScript中String.prototype用法实例
May 20 Javascript
JavaScript+html5 canvas绘制的圆弧荡秋千效果完整实例
Jan 26 Javascript
JQuery 获取多个select标签option的text内容(实例)
Sep 07 jQuery
打造通用的匀速运动框架(实例讲解)
Oct 17 Javascript
JS实现在文本指定位置插入内容的简单示例
Dec 22 Javascript
微信小程序开发之左右分栏效果的实例代码
May 20 Javascript
JavaScript实现页面高亮操作提示和蒙板
Jan 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
音箱(1) 单管机(1) 发烧友(1) 耳机(1) 春雷3P7(1) AM(1) 探测器(1) 电路(15) 原理(1) ICF-2010(1)
You might like
PHP编程入门的基本语法知识点总结
2016/01/26 PHP
PHP中ID设置自增后不连续的原因分析及解决办法
2016/08/21 PHP
PDO::_construct讲解
2019/01/27 PHP
JavaScript代码应该放在HTML代码哪个位置比较好？
2014/10/16 Javascript
JavaScript每天定时更换皮肤样式的方法
2015/07/01 Javascript
JavaScript获取function所有参数名的方法
2015/10/30 Javascript
JSON+Jquery省市区三级联动
2016/01/13 Javascript
JS实现随页面滚动显示/隐藏窗口固定位置元素
2016/02/26 Javascript
[js高手之路]HTML标签解释成DOM节点的实现方法
2017/08/31 Javascript
JavaScript引用类型Object常见用法实例分析
2018/08/08 Javascript
layui框架table 数据表格的方法级渲染详解
2018/08/19 Javascript
详解Vue之父子组件传值
2019/04/01 Javascript
Node.js创建一个Express服务的方法详解
2020/01/06 Javascript
JavaScript语句错误throw、try及catch实例解析
2020/08/18 Javascript
[32:26]EG vs IG 2018国际邀请赛小组赛BO2 第一场 8.16
2018/08/17 DOTA
python正则表达式re模块详细介绍
2014/05/29 Python
python 读取Linux服务器上的文件方法
2018/12/27 Python
python django 原生sql 获取数据的例子
2019/08/14 Python
详解numpy矩阵的创建与数据类型
2019/10/18 Python
python将图片转base64,实现前端显示
2020/01/09 Python
python计算二维矩形IOU实例
2020/01/18 Python
keras做CNN的训练误差loss的下降操作
2020/06/22 Python
pycharm实现猜数游戏
2020/12/07 Python
通过Canvas及File API缩放并上传图片完整示例
2013/08/08 HTML / CSS
财务务虚会发言材料
2014/10/20 职场文书
民主生活会汇报材料
2014/12/15 职场文书
好好学习保证书
2015/02/26 职场文书
2015年护理工作总结范文
2015/04/03 职场文书
迎新年主持词
2015/07/06 职场文书
五星级酒店宣传口号
2015/12/25 职场文书
2019下半年英语教师的教学工作计划（3篇）
2019/09/25 职场文书
Redis基于Bitmap实现用户签到功能
2021/06/20 Redis
python中super()函数的理解与基本使用
2021/08/30 Python
HTML5基础学习之文本标签控制
2022/03/25 HTML / CSS
不负正版帝国之名 《重返帝国》引领SLG手游制作新的标杆
2022/04/07 其他游戏
flex布局中使用flex-wrap实现换行的项目实践
2022/06/21 HTML / CSS