當前位置:
首頁 >
前端技术
> javascript
>内容正文
javascript
javascript创建对象的几种方式 .
生活随笔
收集整理的這篇文章主要介紹了
javascript创建对象的几种方式 .
小編覺得挺不錯的,現在分享給大家,幫大家做個參考.
// 1. 工廠方法:能創建并返回特定類型對象的工廠函數(factory function).
function createCar(sColor){
var car = new Object(); // 或者 var car = new Object ;
//?對象屬性
car.color = sColor ;?
//?對象方法
car.showColor = function (){?
alert(123);
} ; //?記住,這里一定要用 ; 表示結束
return car; //?這里是 return car ; 而不是 return this.car ; 因為 this.car 為 undefined
}
/*?
調用此函數時,將創建對象,并賦予它所有必要的屬性,使用此方法創建 car 對象的兩個版本,
( oCar1 和 oCar2 ) ,他們的屬性完全一樣。
使用此方法存在的問題:
1. 語義上看起來不像使用帶有構造函數的 new 運算那么正規.
2. 使用這種方式必須創建對象的方法。每次調用 createCar(),都要創建 showColor(),意味著每一個對象
都有自己的 showColor 版本,事實上,每一個對象都共享了是同一個函數.
有些開發者在工廠函數外定義對象的方法,然后通過屬性指向該方法。從而避免這個問題:
*/
function createCar2(sColor){
var car = new Object();
car.color = sColor ;
car.showColor = showColor ;
return car ;
}
function showColor(){
alert(this.color);
}
var oCar1 = createCar('red');
var oCar2 = createCar('yellow');
var oCar3 = createCar2('blue');
var oCar4 = createCar2('black');
/*
注意這兩個對象(oCar3 和 oCar4 ) 調用showColor 屬性的方式,雖然美其名曰是“屬性”,其實還是方法!!!
所以是 oCar3.showColor(); 而不是 oCar3.showColor ;
*/
oCar3.showColor();
oCar4.showColor();
/*
在這段重寫的代碼中,在函數 createCar2() 前定義了函數showColor(), 在 createCar2() 內部,賦予對象一個已經
指向已經存在的 showColor() 函數的指針,從功能上講,這樣解決了重復創建對象的問題,但該函數看起來不像對象
的方法。
所有這些問題引起了開發者的定義構造函數的出現
*/
// 2. 構造函數方式
function Car(sColor){
this.color = sColor;
this.showColor = function(){
alert(this.color);
};
}
var car1 = new Car('red');
car1.showColor();
/*
你可能已經注意到第一個的差別了,在構造函數內部無創建對象,而是使用 this 關鍵字,使用 new?
運算符調用構造函數,在執行第一行代碼前先創建一個對象,只有用 this 才能訪問該對象。然后可以
直接賦予 this 屬性,默認情況下是構造函數的返回值,(不必明確使用 return 運算符)。
這種方式在管理函數方面與工廠方法一樣都存在相同的問題.
*/
// 3. 原型方式
function PCar(){
}
PCar.prototype.color = "blue";
var pcar1 = new PCar();
/*
調用 new Car()時,原型的所有屬性都被立即賦予要創建的對象,意味著所有的 PCar 實例存放的是指向
showColor() 函數的指針,從語義看起來都屬于一個對象,因此解決了前面兩種方式存在的問題。此外使用
該方法,還能使用 instanceof 運算符檢查給定變量指向的對象類型。因此下面的代碼將輸出 true:
*/
alert(pcar1 instanceof PCar); // output "true"
/*
這個方法看起來不錯,遺憾的是,它并不盡人意。
1. 首先這個構造函數沒有參數。使用原型方式時,不能給構造函數傳遞參數初始化屬性值,因為 pcar1 和
pcar2 的屬性都等于 "blue"
2. 真正的問題出現在屬性指向的對象,而不是函數時,函數共享不會造成任何問題,但是對象卻是很少被多個
實例共享的。
*/
// 4. 混合的構造函數/原型方式(推薦)
/*
聯合使用構造函數和原型方式,就可像使用其他程序設計語言一樣創建對象,這種概念非常簡單,即用構造函數
定義對象的所有非函數屬性,用原型方式定義對象的函數屬性(方法)。
*/
function hCar(sColor){
this.color = sColor;?
this.drivers = new Array('Mike','Sue');
}
hCar.prototype.showColor = function(){
alert(this.color);
}
var hcar1 = new hCar('y color');
var hcar2 = new hCar('r color');
hcar1.drivers.push('Matt');
alert(hcar1.drivers); // output "Mike,Sue,Matt"
alert(hcar2.drivers); // output "Mike,Sue"
// 5. 動態原型方式 (推薦)
/*
對于習慣使用其他開發語言的開發者來說,使用混合構造函數/原型方式感覺不那么和諧。批評構造函數/原型方式的人
認為,在構造函數內找屬性,在外部找方法的做法不合理。所以他們設計了動態原型方式,以供更友好的編碼風格。
動態原型方式的基本想法與混合構造函數/原型方式 相同,即在構造函數內定義非函數的屬性,而函數的屬性則利用
原型屬性定義。唯一的區別是賦予對象方法的位置。下面是使用動態原型方法重寫的 Car 類:
*/
function DCar(sColor){
this.color = sColor;
this.drivers = new Array('Mike','Sue');
if(typeof DCar._initialized == 'undefined'){
DCar.prototype.showColor = function(){
alert(this.color);
}
}
DCar._initialized = true;
}
var dcar1 = new DCar('y dcar');
var dcar2 = new DCar('b dcar');
dcar1.showColor();
dcar2.showColor();
alert(DCar._initialized); // output "true"
alert(dcar1._initialized); // output "undefined"
// 6、對象直接量、new創建
創建對象最簡單的方法是你的javascript代碼中包含對象直接量,也可以通過運算符new創建。
var empty = {}; // An object with no properties
var point = { x:0, y:0 };
var circle = { x:point.x, y:point.y+1, radius:2 };
var homer = {
"name": "Homer Simpson",
"age": 34,
"married": true,
"occupation": "plant operator",
'email': homer@example.com
};
var a = new Array(); // Create an empty array
var d = new Date(); // Create an object representing the current date and time
var r = new RegExp("javascript", "i"); // Create a pattern-matching object
創建對象后,我們可以通過"."運算符,在對象中創建新屬性、引用已有屬性、設置屬性值等。
var book = new Object(); //創建對象
book.title="JavaScript: The Definitive Guide";
book.chapter1=new Object(); //作為對象屬性的,嵌套對象
book.chapter1.title = "Introduction to JavaScript";
book.chapter1.pages = 11;
book.chapter2 = { title: "Lexical Structure", pages: 6 };
alert("Outline: " + book.title + "\n\t" +
"Chapter 1 " + book.chapter1.title + "\n\t" +
"Chapter 2 " + book.chapter2.title); // 從對象中讀取一些屬性.
在上例中,需注意,可以通過把一個值賦給對象的一個新屬性來創建它.
在JavaScript語句中提到過用for/in語句可以遍歷對象的屬性和方法。 刪除屬性:delete book.chapter2;
function createCar(sColor){
var car = new Object(); // 或者 var car = new Object ;
//?對象屬性
car.color = sColor ;?
//?對象方法
car.showColor = function (){?
alert(123);
} ; //?記住,這里一定要用 ; 表示結束
return car; //?這里是 return car ; 而不是 return this.car ; 因為 this.car 為 undefined
}
/*?
調用此函數時,將創建對象,并賦予它所有必要的屬性,使用此方法創建 car 對象的兩個版本,
( oCar1 和 oCar2 ) ,他們的屬性完全一樣。
使用此方法存在的問題:
1. 語義上看起來不像使用帶有構造函數的 new 運算那么正規.
2. 使用這種方式必須創建對象的方法。每次調用 createCar(),都要創建 showColor(),意味著每一個對象
都有自己的 showColor 版本,事實上,每一個對象都共享了是同一個函數.
有些開發者在工廠函數外定義對象的方法,然后通過屬性指向該方法。從而避免這個問題:
*/
function createCar2(sColor){
var car = new Object();
car.color = sColor ;
car.showColor = showColor ;
return car ;
}
function showColor(){
alert(this.color);
}
var oCar1 = createCar('red');
var oCar2 = createCar('yellow');
var oCar3 = createCar2('blue');
var oCar4 = createCar2('black');
/*
注意這兩個對象(oCar3 和 oCar4 ) 調用showColor 屬性的方式,雖然美其名曰是“屬性”,其實還是方法!!!
所以是 oCar3.showColor(); 而不是 oCar3.showColor ;
*/
oCar3.showColor();
oCar4.showColor();
/*
在這段重寫的代碼中,在函數 createCar2() 前定義了函數showColor(), 在 createCar2() 內部,賦予對象一個已經
指向已經存在的 showColor() 函數的指針,從功能上講,這樣解決了重復創建對象的問題,但該函數看起來不像對象
的方法。
所有這些問題引起了開發者的定義構造函數的出現
*/
// 2. 構造函數方式
function Car(sColor){
this.color = sColor;
this.showColor = function(){
alert(this.color);
};
}
var car1 = new Car('red');
car1.showColor();
/*
你可能已經注意到第一個的差別了,在構造函數內部無創建對象,而是使用 this 關鍵字,使用 new?
運算符調用構造函數,在執行第一行代碼前先創建一個對象,只有用 this 才能訪問該對象。然后可以
直接賦予 this 屬性,默認情況下是構造函數的返回值,(不必明確使用 return 運算符)。
這種方式在管理函數方面與工廠方法一樣都存在相同的問題.
*/
// 3. 原型方式
function PCar(){
}
PCar.prototype.color = "blue";
var pcar1 = new PCar();
/*
調用 new Car()時,原型的所有屬性都被立即賦予要創建的對象,意味著所有的 PCar 實例存放的是指向
showColor() 函數的指針,從語義看起來都屬于一個對象,因此解決了前面兩種方式存在的問題。此外使用
該方法,還能使用 instanceof 運算符檢查給定變量指向的對象類型。因此下面的代碼將輸出 true:
*/
alert(pcar1 instanceof PCar); // output "true"
/*
這個方法看起來不錯,遺憾的是,它并不盡人意。
1. 首先這個構造函數沒有參數。使用原型方式時,不能給構造函數傳遞參數初始化屬性值,因為 pcar1 和
pcar2 的屬性都等于 "blue"
2. 真正的問題出現在屬性指向的對象,而不是函數時,函數共享不會造成任何問題,但是對象卻是很少被多個
實例共享的。
*/
// 4. 混合的構造函數/原型方式(推薦)
/*
聯合使用構造函數和原型方式,就可像使用其他程序設計語言一樣創建對象,這種概念非常簡單,即用構造函數
定義對象的所有非函數屬性,用原型方式定義對象的函數屬性(方法)。
*/
function hCar(sColor){
this.color = sColor;?
this.drivers = new Array('Mike','Sue');
}
hCar.prototype.showColor = function(){
alert(this.color);
}
var hcar1 = new hCar('y color');
var hcar2 = new hCar('r color');
hcar1.drivers.push('Matt');
alert(hcar1.drivers); // output "Mike,Sue,Matt"
alert(hcar2.drivers); // output "Mike,Sue"
// 5. 動態原型方式 (推薦)
/*
對于習慣使用其他開發語言的開發者來說,使用混合構造函數/原型方式感覺不那么和諧。批評構造函數/原型方式的人
認為,在構造函數內找屬性,在外部找方法的做法不合理。所以他們設計了動態原型方式,以供更友好的編碼風格。
動態原型方式的基本想法與混合構造函數/原型方式 相同,即在構造函數內定義非函數的屬性,而函數的屬性則利用
原型屬性定義。唯一的區別是賦予對象方法的位置。下面是使用動態原型方法重寫的 Car 類:
*/
function DCar(sColor){
this.color = sColor;
this.drivers = new Array('Mike','Sue');
if(typeof DCar._initialized == 'undefined'){
DCar.prototype.showColor = function(){
alert(this.color);
}
}
DCar._initialized = true;
}
var dcar1 = new DCar('y dcar');
var dcar2 = new DCar('b dcar');
dcar1.showColor();
dcar2.showColor();
alert(DCar._initialized); // output "true"
alert(dcar1._initialized); // output "undefined"
// 6、對象直接量、new創建
創建對象最簡單的方法是你的javascript代碼中包含對象直接量,也可以通過運算符new創建。
var empty = {}; // An object with no properties
var point = { x:0, y:0 };
var circle = { x:point.x, y:point.y+1, radius:2 };
var homer = {
"name": "Homer Simpson",
"age": 34,
"married": true,
"occupation": "plant operator",
'email': homer@example.com
};
var a = new Array(); // Create an empty array
var d = new Date(); // Create an object representing the current date and time
var r = new RegExp("javascript", "i"); // Create a pattern-matching object
創建對象后,我們可以通過"."運算符,在對象中創建新屬性、引用已有屬性、設置屬性值等。
var book = new Object(); //創建對象
book.title="JavaScript: The Definitive Guide";
book.chapter1=new Object(); //作為對象屬性的,嵌套對象
book.chapter1.title = "Introduction to JavaScript";
book.chapter1.pages = 11;
book.chapter2 = { title: "Lexical Structure", pages: 6 };
alert("Outline: " + book.title + "\n\t" +
"Chapter 1 " + book.chapter1.title + "\n\t" +
"Chapter 2 " + book.chapter2.title); // 從對象中讀取一些屬性.
在上例中,需注意,可以通過把一個值賦給對象的一個新屬性來創建它.
在JavaScript語句中提到過用for/in語句可以遍歷對象的屬性和方法。 刪除屬性:delete book.chapter2;
總結
以上是生活随笔為你收集整理的javascript创建对象的几种方式 .的全部內容,希望文章能夠幫你解決所遇到的問題。
- 上一篇: javascript对象创建的五种方式
- 下一篇: SQL面试题二