工廠模式、建構函式模式與原型模式
阿新 • • 發佈:2018-12-12
工廠模式
用函式來封裝以特定介面建立物件的細節
function createPerson(name,age,job){
var o=new Object();
o.name=name;
o.age=age;
o.job=job;
o.sayName=function(){
console.log(this.name);
};
return o;
}
var person1=createPerson("Nicholas",29,"Software Engineer");
var person2=createPerson("Greg" ,27,"Doctor");
建構函式模式
ECMAScript中可以建立自定義的建構函式,從而定義自定義物件型別的屬性和方法。
function Person(name,age,job){
this.name=name;
this.age=age;
this.job=job;
this.sayName=function(){
console.log(this.name);
};
}
var person1=new Person("Nicholas",29,"Software Engineer");
var person2=new Person ("Greg",27,"Doctor");
注意:建構函式模式與工廠模式的不同之處:
1.沒有顯式的建立物件;
2.直接將屬性和方法賦給this物件
3.沒有return語句‘
4.建立例項時,必須使用new操作符
5.函式名始終以一個大寫字母開頭,便於區分ECMAScript中的其他函式。
物件的constructor(建構函式)屬性
用來標識物件型別
function Person(name,age,job){
this.name=name;
this.age=age;
this.job=job;
this.sayName=function(){
console. log(this.name);
};
}
var person1=new Person("Nicholas",29,"Software Engineer");
var person2=new Person("Greg",27,"Doctor");
console.log(person1.constructor==Person);//true
console.log(person1 instanceof Person);//true
console.log(person2.constructor==Person);//true
console.log(person2 instanceof Person);//true
勝於工廠模式之處:
可以將它的例項標識為一種特定的型別。
將建構函式當做函式
任何函式,只要通過new操作符來呼叫,那它就可以作為建構函式;而任何函式,如果不通過new操作符來呼叫,那它跟普通函式也不會有什麼兩樣
function Person(name,age,job){
this.name=name;
this.age=age;
this.job=job;
this.sayName=function(){
console.log(this.name);
};
}
var person1=new Person("Nicholas",29,"Software Engineer");
var person2=new Person("Greg",27,"Doctor");
Person("yangyuqing",21,"student");
window.sayName();//yangyuqing
var o=new Object();
o.name="yyq";
Person.call(o,"yangyuqing",21,"student");
o.sayName();//yangyuqing
建構函式的問題
以上面的方式建立函式,每個Person例項都包含一個不同的function函式。
console.log(person1.sayName==person2.sayName);//false
通過把函式定義轉移到建構函式外部來解決這個問題。
function Person(name,age,job){
this.name=name;
this.age=age;
this.job=job;
this.sayName=sayName;
}
function sayName(){
console.log(this.name);
}
var person1=new Person("Nicholas",29,"Software Engineer");
var person2=new Person("Greg",27,"Doctor");
console.log(person1.sayName==person2.sayName);//true
新問題
如果物件需要定義很多方法,那麼就要定義很多個全域性函式,於是我們自定義的引用型別就毫無封裝性而言。
原型模式
解決建構函式模式下的問題。不必再在建構函式中定義物件例項的資訊,而是可以將這些資訊直接新增到原型物件中。例項可共享這個物件的屬性和方法。
function Person(){
}
//每個函式都有一個prototype(原型)屬性,這個屬性是一個指標,指向函式的原型物件
Person.prototype.name="Nicholas";
Person.prototype.age=29;
Person.prototype.job="SoftWare Engineer";
Person.prototype.sayName=function(){
console.log(this.name);
};
var person1=new Person();
person1.sayName();//Nicholas
var person2=new Person();
person2.sayName();//Nicholas
console.log(person1.sayName==person2.sayName);//true