下面通過文字詳解加代碼分析的方式給大家分享下javascript設計模式之對象工廠函數與構造函數的相關知識。
概述使用對象字面量,或者向空對象中動態地添加新成員,是最簡單易用的對象創建方法。然而,除了這兩種常用的對象創建方式,JavaScript還提供了其他方法創建對象。1).使用工廠函數創建對象我們可以編寫一個函數,此函數的功能就是創建對象,可將其.
概述
使用對象字面量,或者向空對象中動態地添加新成員,是最簡單易用的對象創建方法。
然而,除了這兩種常用的對象創建方式,JavaScript還提供了其他方法創建對象。
1).使用工廠函數創建對象
我們可以編寫一個函數,此函數的功能就是創建對象,可將其稱為“對象工廠方法”。
復制代碼 代碼如下:
//工廠函數
function createPerson(name, age, job) {
var o = new Object();
o.name = name;
o.age = age;
o.job = job;
o.sayName = function () {
console.info(this.name);
};
return o; } //使用工廠函數創建對象
var person1 = createPerson('張三', 29, '軟件工程師');
var person2 = createPerson('李四', 40, '醫生');
2).定義對象構造函數
a).對象構造函數首字母大寫
b).內部使用this關鍵字給對象添加成員
c).使用new關鍵字調用對象構造函數
復制代碼 代碼如下:
//定義對象“構造”函數
function Person(name, age, job) {
this.name = name;
this.age = age;
this.job = job;
this.sayName = function () {
console.info(this.name);
};
} //使用new調用對象構造函數創建對象
var p1 = new Person('張三', 29, '軟件工程師');
var p2 = new Person('李四', 40, '醫生');
以普通方式調用的“構造函數”
構造函數其實也是一個函數,不同之處在於調用它時必須要加一個“new”關鍵字,如果不加這個關鍵字,則對它的調用被認為是普通函數調用。
復制代碼 代碼如下:
//作為普通函數調用的構造函數,通過this添加的屬性,
//成為了window對象的屬性與方法。
console.info(window.name);//張三
console.info(window.age); //29
console.info(window.job); //軟件工程師
對象構造函數長得這個樣:
復制代碼 代碼如下:
function Person (name) {
this.name = name;
this.say = function () {
return "I am " + this.name;
};
}
實際上是這樣(示意):
復制代碼 代碼如下:
function Person (name) {
// var this = {};
this.name = name;
this.say = function () {
return "I am " + this.name;
};
// return this;
}
構造函數完成的工作
1. 創建一個新的對象
2. 讓構造函數的this引用這一新創建的對象
3. 執行構造函數中的代碼,這些代碼通常完成向新對象添加屬性的工作
4. 向外界返回新創建的對象引用。
對象構造函數與對象工廠方法的區別
1. 對象構造函數中沒有顯式的對象創建代碼
2. 新對象應具備的屬性與方法是通過this引用添加的.
3. 對象構造函數中沒有return語句
通常會把對象構造函數的首字母設置為大寫的,以區別於普通函數。
對象的constructor屬性
a).使用對象工廠函數創建對象,每個對象的constructor屬性引用Object()
復制代碼 代碼如下:
var person = createPerson('張三', 29, '軟件工程師');
//使用工廠方法創建對象,
其constructor屬性引用Object()函數
console.info(person1.constructor === Object);
//true
b).使用對象構造函數創建對象,每個對象的constructor屬性引用這個構造函數
復制代碼 代碼如下:
var p = new Person('張三', 29, '軟件工程師');
//使用對象構造函數創建對象,
//每個對象的constructor屬性,引用這個構造函數
console.info(p.constructor === Person);
//true如何避免“忘記”new?可以使用arguments.callee解決這個問題
//了解arguments.callee的作用
function TestArgumentsCallee()
{
console.info(this);
console.info(this instanceof TestArgumentsCallee);
console.info(this instanceof arguments.callee);
};
TestArgumentsCallee(); //window
//false
//false
new TestArgumentsCallee();
//TestArgumentsCallee
//true
//true
於是,可以直接用arguments.callee
復制代碼 代碼如下:
//避免忘記new
function MyObject(value)
{
if (!(this instanceof arguments.callee))
{
//如果調用者忘記加上new了,就加上new再調用一次
return new MyObject(value);
}
this.prop = value;
}
//測試
var obj1 = new MyObject(100);
console.info(obj1.prop);//100
var obj2 = MyObject(200);
console.info(obj2.prop); //200
以上內容就是javascript設計模式之對象工廠函數與構造函數詳解,希望大家喜歡。