首頁 > 開發者 > JavaScript
知識點：
（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>
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
