JavaScript創(chuàng)建類/對象的幾種方式概述及實例
更新時間:2013年05月06日 17:56:24 作者:
JS中的對象強(qiáng)調(diào)的是一種復(fù)合類型,JS中創(chuàng)建對象及對對象的訪問是極其靈活的,下面與大家分享下創(chuàng)建類/對象的幾種方式,感興趣的朋友可以了解下哈
在JS中,創(chuàng)建對象(Create Object)并不完全是我們時常說的創(chuàng)建類對象,JS中的對象強(qiáng)調(diào)的是一種復(fù)合類型,JS中創(chuàng)建對象及對對象的訪問是極其靈活的。
JS對象是一種復(fù)合類型,它允許你通過變量名存儲和訪問,換一種思路,對象是一個無序的屬性集合,集合中的每一項都由名稱和值組成(聽起來是不是很像我們常聽說的HASH表、字典、健/值對?),而其中的值類型可能是內(nèi)置類型(如number,string),也可能是對象。
一、由一對大括號括起來
var emptyObj = {};
var myObj =
{
'id': 1, //屬性名用引號括起來,屬性間由逗號隔開
'name': 'myName'
};
//var m = new myObj(); //不支持
不知你注意到對象都是用 var 聲明的沒有,像上面的代碼,就只是簡單的聲明一個對象,它只有一份拷貝,你不能像實例化類對象一樣對它采用new操作,像上面代碼的注釋部分。這樣就極大的限制了對象的重用,除非你建立的對象只需要一份拷貝,否則考慮用其他方法建立對象。
下面一起看看如何訪問對象的屬性和方法。
var myObj =
{
'id': 1,
'fun': function() {
document.writeln(this.id + '-' + this.name);//以"對象.屬性"方式訪問
},
'name': 'myObj',
'fun1': function() {
document.writeln(this['id'] + '+' + this['name']);//以集合方式訪問
}
};
myObj.fun();
myObj.fun1();
// 結(jié)果
// 1-myObj 1+myObj
二、用 function 關(guān)鍵字模擬 class
在 function 中用 this 引用當(dāng)前對象,通過對屬性的賦值來聲明屬性。如果用var聲明變量,則該變量為局部變量,只允許在類定義中調(diào)用。
function myClass() {
this.id = 5;
this.name = 'myclass';
this.getName = function() {
return this.name;
}
}
var my = new myClass();
alert(my.id);
alert(my.getName());
// 結(jié)果
// 5
// myclass
三、在函數(shù)體中創(chuàng)建一個對象,聲明其屬性再返回
在函數(shù)體中創(chuàng)建對象可利用第一點的方法,或先 new Object(); 再為各屬性賦值。
不過用這種方式創(chuàng)建的對象在VS2008 SP1中是沒有智能提示的。
function myClass() {
var obj =
{
'id':2,
'name':'myclass'
};
return obj;
}
function _myClass() {
var obj = new Object();
obj.id = 1;
obj.name = '_myclass';
return obj;
}
var my = new myClass();
var _my = new _myClass();
alert(my.id);
alert(my.name);
alert(_my.id);
alert(_my.name);
// 結(jié)果
// 2
// myclass
// 1
// _myclass
JS對象是一種復(fù)合類型,它允許你通過變量名存儲和訪問,換一種思路,對象是一個無序的屬性集合,集合中的每一項都由名稱和值組成(聽起來是不是很像我們常聽說的HASH表、字典、健/值對?),而其中的值類型可能是內(nèi)置類型(如number,string),也可能是對象。
一、由一對大括號括起來
復(fù)制代碼 代碼如下:
var emptyObj = {};
var myObj =
{
'id': 1, //屬性名用引號括起來,屬性間由逗號隔開
'name': 'myName'
};
//var m = new myObj(); //不支持
不知你注意到對象都是用 var 聲明的沒有,像上面的代碼,就只是簡單的聲明一個對象,它只有一份拷貝,你不能像實例化類對象一樣對它采用new操作,像上面代碼的注釋部分。這樣就極大的限制了對象的重用,除非你建立的對象只需要一份拷貝,否則考慮用其他方法建立對象。
下面一起看看如何訪問對象的屬性和方法。
復(fù)制代碼 代碼如下:
var myObj =
{
'id': 1,
'fun': function() {
document.writeln(this.id + '-' + this.name);//以"對象.屬性"方式訪問
},
'name': 'myObj',
'fun1': function() {
document.writeln(this['id'] + '+' + this['name']);//以集合方式訪問
}
};
myObj.fun();
myObj.fun1();
// 結(jié)果
// 1-myObj 1+myObj
二、用 function 關(guān)鍵字模擬 class
在 function 中用 this 引用當(dāng)前對象,通過對屬性的賦值來聲明屬性。如果用var聲明變量,則該變量為局部變量,只允許在類定義中調(diào)用。
復(fù)制代碼 代碼如下:
function myClass() {
this.id = 5;
this.name = 'myclass';
this.getName = function() {
return this.name;
}
}
var my = new myClass();
alert(my.id);
alert(my.getName());
// 結(jié)果
// 5
// myclass
三、在函數(shù)體中創(chuàng)建一個對象,聲明其屬性再返回
在函數(shù)體中創(chuàng)建對象可利用第一點的方法,或先 new Object(); 再為各屬性賦值。
不過用這種方式創(chuàng)建的對象在VS2008 SP1中是沒有智能提示的。
復(fù)制代碼 代碼如下:
function myClass() {
var obj =
{
'id':2,
'name':'myclass'
};
return obj;
}
function _myClass() {
var obj = new Object();
obj.id = 1;
obj.name = '_myclass';
return obj;
}
var my = new myClass();
var _my = new _myClass();
alert(my.id);
alert(my.name);
alert(_my.id);
alert(_my.name);
// 結(jié)果
// 2
// myclass
// 1
// _myclass
您可能感興趣的文章:
- JS創(chuàng)建類和對象的兩種不同方式
- 跟我學(xué)習(xí)javascript創(chuàng)建對象(類)的8種方法
- JavaScript 創(chuàng)建對象和構(gòu)造類實現(xiàn)代碼
- JavaScript 常見對象類創(chuàng)建代碼與優(yōu)缺點分析
- JS OOP包機(jī)制,類創(chuàng)建的方法定義
- 創(chuàng)建js對象和js類的方法匯總
- Javascript創(chuàng)建類和對象詳解
- JavaScript構(gòu)造函數(shù)詳解
- JS面向?qū)ο蠡A(chǔ)講解(工廠模式、構(gòu)造函數(shù)模式、原型模式、混合模式、動態(tài)原型模式)
- JS中的構(gòu)造函數(shù)詳細(xì)解析
- 深入理解javascript構(gòu)造函數(shù)和原型對象
- JavaScript 面向?qū)ο蟪绦蛟O(shè)計詳解【類的創(chuàng)建、實例對象、構(gòu)造函數(shù)、原型等】
相關(guān)文章
學(xué)習(xí)LayUI時自研的表單參數(shù)校驗框架案例分析
本框架基于LayUI框架寫的表單參數(shù)校驗框架,本文分過實例代碼給大家介紹的非常詳細(xì),具有一定的參考借鑒價值,需要的朋友參考下吧2019-07-07