從面試題學習Javascript 面向?qū)ο螅▌?chuàng)建對象)
更新時間:2012年03月30日 00:37:33 作者:
從面試題學習Javascript 面向?qū)ο螅▌?chuàng)建對象),學習js的朋友可以參考下
題目:
try{
var me = Man({ fullname: "小紅" });
var she = new Man({ fullname: "小紅" });
console.group();
console.info("我的名字是:" + me.attr("fullname") + "\n我的性別是:" + me.attr("gender"));
console.groupEnd();
/*------[執(zhí)行結(jié)果]------
我的名字是:小紅
我的性別是:<用戶未輸入>
------------------*/
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();
/*------[執(zhí)行結(jié)果]------
我的名字是:小明
我的性別是:男
------------------*/
console.group();
console.info("我的名字是:" + she.attr("fullname") + "\n我的性別是:" + she.attr("gender"));
console.groupEnd();
/*------[執(zhí)行結(jié)果]------
我的名字是:小紅
我的性別是:女
------------------*/
me.attr({
"words-limit": 3,
"words-emote": "微笑"
});
me.words("我喜歡看視頻。");
me.words("我們的辦公室太漂亮了。");
me.words("視頻里美女真多!");
me.words("我平時都看優(yōu)酷!");
console.group();
console.log(me.say());
/*------[執(zhí)行結(jié)果]------
小明微笑:"我喜歡看視頻。我們的辦公室太漂亮了。視頻里美女真多!"
------------------*/
me.attr({
"words-limit": 2,
"words-emote": "喊"
});
console.log(me.say());
console.groupEnd();
/*------[執(zhí)行結(jié)果]------
小明喊:"我喜歡看視頻。我們的辦公室太漂亮了。"
------------------*/
}catch(e){
console.error("執(zhí)行出錯,錯誤信息: " + e);
}
知識點:
(1)JS面向?qū)ο蠡A(chǔ):ECMA-262把對象定義為:“無序?qū)傩缘募希鋵傩钥梢园局?、對象或者函?shù)”。
(2)JS創(chuàng)建對象的方法:
?。╝)工廠模式:用函數(shù)來封裝以特定接口創(chuàng)建對象的細節(jié)。
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”);
缺點:工廠模式雖然解決了創(chuàng)建多個相識對象的問題,但卻沒有解決對象識別的問題(即怎樣知道一個對象的類型)。
?。╞)構(gòu)造函數(shù)模式:ECMAScript中的構(gòu)造函數(shù)可以用來創(chuàng)建特定類型的對象。可以創(chuàng)建自定義的構(gòu)造函數(shù),從而定義自定義對象類型的屬性和方法。
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”);
缺點:使用構(gòu)造函數(shù)的主要問題,就是每個方法都要在每個實例上重新創(chuàng)建一遍。不要忘了——ECMAScript中的函數(shù)是對象,因此每定義一個函數(shù),
就是實例化一個對象。
(c)原型模式:我們創(chuàng)建的每個函數(shù)都有一個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
缺點:原型中所有屬性是被很多實例共享的,這種共享對于函數(shù)非常合適。但是對于引用類型值的屬性來說,問題就比較突出了。
?。╠)組合使用構(gòu)造函數(shù)模式和原型模式:創(chuàng)建自定義類型的最常見方式,就是使用組合使用構(gòu)造函數(shù)模式和原型模式。構(gòu)造函數(shù)模式用于定義實例屬性,
而原型模式用于定義方法和共享的屬性。
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;
//+++++++++++答題區(qū)域+++++++++++
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;
}
};
//+++++++++++答題結(jié)束+++++++++++
try{
var me = Man({ fullname: "小紅" });
var she = new Man({ fullname: "小紅" });
console.group();
console.info("我的名字是:" + me.attr("fullname") + "\n我的性別是:" + me.attr("gender"));
console.groupEnd();
/*------[執(zhí)行結(jié)果]------
我的名字是:小紅
我的性別是:<用戶未輸入>
------------------*/
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();
/*------[執(zhí)行結(jié)果]------
我的名字是:小明
我的性別是:男
------------------*/
console.group();
console.info("我的名字是:" + she.attr("fullname") + "\n我的性別是:" + she.attr("gender"));
console.groupEnd();
/*------[執(zhí)行結(jié)果]------
我的名字是:小紅
我的性別是:女
------------------*/
me.attr({
"words-limit": 3,
"words-emote": "微笑"
});
me.words("我喜歡看視頻。");
me.words("我們的辦公室太漂亮了。");
me.words("視頻里美女真多!");
me.words("我平時都看優(yōu)酷!");
console.group();
console.log(me.say());
/*------[執(zhí)行結(jié)果]------
小明微笑:"我喜歡看視頻。我們的辦公室太漂亮了。視頻里美女真多!"
------------------*/
me.attr({
"words-limit": 2,
"words-emote": "喊"
});
console.log(me.say());
console.groupEnd();
/*------[執(zhí)行結(jié)果]------
小明喊:"我喜歡看視頻。我們的辦公室太漂亮了。"
------------------*/
}catch(e){
console.error("執(zhí)行出錯,錯誤信息: " + e);
}
}
</script>
</html>
復制代碼 代碼如下:
try{
var me = Man({ fullname: "小紅" });
var she = new Man({ fullname: "小紅" });
console.group();
console.info("我的名字是:" + me.attr("fullname") + "\n我的性別是:" + me.attr("gender"));
console.groupEnd();
/*------[執(zhí)行結(jié)果]------
我的名字是:小紅
我的性別是:<用戶未輸入>
------------------*/
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();
/*------[執(zhí)行結(jié)果]------
我的名字是:小明
我的性別是:男
------------------*/
console.group();
console.info("我的名字是:" + she.attr("fullname") + "\n我的性別是:" + she.attr("gender"));
console.groupEnd();
/*------[執(zhí)行結(jié)果]------
我的名字是:小紅
我的性別是:女
------------------*/
me.attr({
"words-limit": 3,
"words-emote": "微笑"
});
me.words("我喜歡看視頻。");
me.words("我們的辦公室太漂亮了。");
me.words("視頻里美女真多!");
me.words("我平時都看優(yōu)酷!");
console.group();
console.log(me.say());
/*------[執(zhí)行結(jié)果]------
小明微笑:"我喜歡看視頻。我們的辦公室太漂亮了。視頻里美女真多!"
------------------*/
me.attr({
"words-limit": 2,
"words-emote": "喊"
});
console.log(me.say());
console.groupEnd();
/*------[執(zhí)行結(jié)果]------
小明喊:"我喜歡看視頻。我們的辦公室太漂亮了。"
------------------*/
}catch(e){
console.error("執(zhí)行出錯,錯誤信息: " + e);
}
知識點:
(1)JS面向?qū)ο蠡A(chǔ):ECMA-262把對象定義為:“無序?qū)傩缘募希鋵傩钥梢园局?、對象或者函?shù)”。
(2)JS創(chuàng)建對象的方法:
?。╝)工廠模式:用函數(shù)來封裝以特定接口創(chuàng)建對象的細節(jié)。
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”);
缺點:工廠模式雖然解決了創(chuàng)建多個相識對象的問題,但卻沒有解決對象識別的問題(即怎樣知道一個對象的類型)。
?。╞)構(gòu)造函數(shù)模式:ECMAScript中的構(gòu)造函數(shù)可以用來創(chuàng)建特定類型的對象。可以創(chuàng)建自定義的構(gòu)造函數(shù),從而定義自定義對象類型的屬性和方法。
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”);
缺點:使用構(gòu)造函數(shù)的主要問題,就是每個方法都要在每個實例上重新創(chuàng)建一遍。不要忘了——ECMAScript中的函數(shù)是對象,因此每定義一個函數(shù),
就是實例化一個對象。
(c)原型模式:我們創(chuàng)建的每個函數(shù)都有一個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
缺點:原型中所有屬性是被很多實例共享的,這種共享對于函數(shù)非常合適。但是對于引用類型值的屬性來說,問題就比較突出了。
?。╠)組合使用構(gòu)造函數(shù)模式和原型模式:創(chuàng)建自定義類型的最常見方式,就是使用組合使用構(gòu)造函數(shù)模式和原型模式。構(gòu)造函數(shù)模式用于定義實例屬性,
而原型模式用于定義方法和共享的屬性。
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;
//+++++++++++答題區(qū)域+++++++++++
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;
}
};
//+++++++++++答題結(jié)束+++++++++++
try{
var me = Man({ fullname: "小紅" });
var she = new Man({ fullname: "小紅" });
console.group();
console.info("我的名字是:" + me.attr("fullname") + "\n我的性別是:" + me.attr("gender"));
console.groupEnd();
/*------[執(zhí)行結(jié)果]------
我的名字是:小紅
我的性別是:<用戶未輸入>
------------------*/
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();
/*------[執(zhí)行結(jié)果]------
我的名字是:小明
我的性別是:男
------------------*/
console.group();
console.info("我的名字是:" + she.attr("fullname") + "\n我的性別是:" + she.attr("gender"));
console.groupEnd();
/*------[執(zhí)行結(jié)果]------
我的名字是:小紅
我的性別是:女
------------------*/
me.attr({
"words-limit": 3,
"words-emote": "微笑"
});
me.words("我喜歡看視頻。");
me.words("我們的辦公室太漂亮了。");
me.words("視頻里美女真多!");
me.words("我平時都看優(yōu)酷!");
console.group();
console.log(me.say());
/*------[執(zhí)行結(jié)果]------
小明微笑:"我喜歡看視頻。我們的辦公室太漂亮了。視頻里美女真多!"
------------------*/
me.attr({
"words-limit": 2,
"words-emote": "喊"
});
console.log(me.say());
console.groupEnd();
/*------[執(zhí)行結(jié)果]------
小明喊:"我喜歡看視頻。我們的辦公室太漂亮了。"
------------------*/
}catch(e){
console.error("執(zhí)行出錯,錯誤信息: " + e);
}
}
</script>
</html>
您可能感興趣的文章:
- 面向?qū)ο蟮腏avascript之二(接口實現(xiàn)介紹)
- Javascript 面向?qū)ο螅ㄈ┙涌诖a
- JavaScript面向?qū)ο笾薪涌趯崿F(xiàn)方法詳解
- Javascript之面向?qū)ο?-接口
- JavaScript接口的實現(xiàn)三種方式(推薦)
- JavaScript接口實現(xiàn)代碼 (Interfaces In JavaScript)
- Javascript 面向?qū)ο螅ㄒ唬?共有方法,私有方法,特權(quán)方法)
- 淺談Javascript面向?qū)ο缶幊?/a>
- js面向?qū)ο笾R妱?chuàng)建對象的幾種方式(工廠模式、構(gòu)造函數(shù)模式、原型模式)
- javascript面向?qū)ο笕腴T基礎(chǔ)詳細介紹
- Javascript 面向?qū)ο螅ǘ┓庋b代碼
- JavaScript 接口原理與用法實例詳解
相關(guān)文章
改變javascript函數(shù)內(nèi)部this指針指向的三種方法
javascript 的this 值,真的是非常的莫名奇妙。我一直被搞的很頭暈,也許正是這個this,讓大多數(shù)人感覺js 非常的莫名其妙。2010-04-04- 編寫可維護面向?qū)ο蟮腏avaScript代碼[翻譯],學習js面向?qū)ο缶帉懙呐笥芽梢詤⒖枷隆?/div> 2011-02-02
JavaScript面向?qū)ο蟪绦蛟O(shè)計三 原型模式(上)
在javaScript面向?qū)ο笤O(shè)計一和Javascript面向?qū)ο笤O(shè)計二中分別介紹了工廠模式和構(gòu)造函數(shù)模式,以及他們格式的優(yōu)缺點,今天繼續(xù)講解原型模式2011-12-12[推薦]javascript 面向?qū)ο蠹夹g(shù)基礎(chǔ)教程
看了很多介紹javascript面向?qū)ο蠹夹g(shù)的文章,很暈.為什么?不是因為寫得不好,而是因為太深奧. javascript中的對象還沒解釋清楚怎么回事,一上來就直奔主題,類/繼承/原型/私有變量....2009-03-03面向?qū)ο蟮腏avascript之一(初識Javascript)
Javascript是一門極富表現(xiàn)力的語言,在當今大行其道的Web浪潮中扮演著非常關(guān)鍵的作用。合理、高效地利用這門技術(shù),可以讓我們的Web世界多姿多彩。首先,我們認識一下這門技術(shù)的幾個獨特的特性2012-01-01最新評論