js面向?qū)ο蟮膶懛?/h1>
更新時(shí)間:2016年02月19日 16:45:55 投稿:lijiao
這篇文章主要介紹了四種js面向?qū)ο蟮某R妼懛?,還介紹了有關(guān)this的相關(guān)內(nèi)容,感興趣的小伙伴們可以參考一下
本文歸納了js面向?qū)ο蟮膸追N常見寫法,分享給大家供大家參考,具體內(nèi)容如下
1.工廠方式
var Circle = function() {
var obj = new Object();
obj.PI = 3.14159;
obj.area = function( r ) {
return this.PI * r * r;
}
return obj;
}
var c = new Circle();
alert( c.area( 1.0 ) );
2.比較正規(guī)的寫法
function Circle(r) {
this.r = r;
}
Circle.PI = 3.14159;
Circle.prototype.area = function() {
return Circle.PI * this.r * this.r;
}
var c = new Circle(1.0);
alert(c.area());
3.json寫法
var Circle={
"PI":3.14159,
"area":function(r){
return this.PI * r * r;
}
};
alert( Circle.area(1.0) );
4.有點(diǎn)變化,但是實(shí)質(zhì)和第一種一樣
var Circle=function(r){
this.r=r;
}
Circle.PI = 3.14159;
Circle.prototype={
area:function(){
return this.r*this.r*Circle.PI;
}
}
var obj=new Circle(1.0);
alert(obj.area()
Circle.PI = 3.14159; 能夠放入屬性中寫成this.PI=3.14159;
常用為第一種和第三種,第三種寫法的擴(kuò)展小實(shí)例
var show={
btn:$('.div1'),
init:function(){
var that=this;
alert(this);
this.btn.click(function(){
that.change();
alert(this);
})
},
change:function(){
this.btn.css({'background':'green'});
}
}
show.init();
需要注意的是this的指向問題,下面是關(guān)于this的一點(diǎn)點(diǎn)介紹,希望對大家有幫助。
一開始采用動(dòng)態(tài)原型方法在js中創(chuàng)建自定義的對象,this也用著很順的。
這種方法中對于在對象內(nèi)部對變量的創(chuàng)建和使用都是用"this."開頭的。
比如:對象ContactModel,有三個(gè)屬性,crtnewFriendListLen,crtNewFriendList,crtFindedUserID
和四個(gè)方法requestContactList(),requestNewfriendList(),requestFindUser(),requestAddContact()
在這個(gè)變量內(nèi)部如要訪問自己的屬性,都要帶上"this."
var contactModel;
...
contactModel = new ContactModel();
function ContactModel()
{
// this.contactList;
this.crtnewFriendListLen;
this.crtNewFriendList;
this.crtFindedUserID = "-1";
if(typeof ContactModel._initialized == "undefined")
{
ContactModel.prototype.requestContactList = function()
{
}
ContactModel.prototype.requestNewfriendList = function()
{
}
ContactModel.prototype.requestFindUser = function(userID)
{
$.getJSON(mainUrl + "User/getuserinfo",{"uid":userID},function(resultObj)
{
// this.crtFindedUserID = userID
contactModel.crtFindedUserID = userID;
uiManager.contectAddPage.receiveFindUserResult(resultObj);
});
}
ContactModel.prototype.requestAddContact = function(remark)
{
alert(this.crtFindedUserID);
}
ContactModel._initialized = true;
};
}
但這時(shí)問題出現(xiàn)了,在requestFindUser ()內(nèi),若用this.crtFindedUserID來存儲服務(wù)端傳來的數(shù)值,那么在之后此對象被調(diào)用了requestAddContact()方法后,是拿不到crtFindedUserID這個(gè)值的,alert里顯示的依然會是初始值-1,問題就出在$.getJSON()的回調(diào)方法內(nèi),此時(shí)的this指的不是ContactModel的實(shí)例,而是此方法體,所以這里的解決辦法就是在這個(gè)回調(diào)方法內(nèi)拿到ContectModel的實(shí)例,然后給這個(gè)實(shí)例的屬性crtFindedUserID賦值。
在對象內(nèi)部對視圖組件的監(jiān)聽回調(diào)方法里,this指向的也不是對象本身,同樣還是這個(gè)被回調(diào)的方法體,這時(shí)若要訪問對象本身的屬性,就要拿到此對象的實(shí)例來訪問,而不是用this.
下面是一段JS面向?qū)ο蟮臉?biāo)準(zhǔn)寫法:
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<title>新建網(wǎng)頁 1</title>
<mce:script type=text/javascript><!--
var person=function(name,age){//定義對象構(gòu)造方法
this.name=name;
this.age=age;
}
person.prototype={ //封裝方法
getName:function(){
alert(this.name);
},
getAge:function(){
alert(this.age);
}
}
function test(){//聲明調(diào)用
var man=new person('jack',12);
man.getName()
man.getAge()
}
var test2 ={ //類似靜態(tài)方法 調(diào)用直接:test2.te();即可
te:function(){
alert();
},
te1:function(){
alert();
}
}
// --></mce:script>
</head>
<body>
<input type=button onclick="test()"/>
</body>
</html>
希望本文所述對大家學(xué)習(xí)javascript程序設(shè)計(jì)有所幫助。
相關(guān)文章
-
js驗(yàn)證真實(shí)姓名與身份證號,手機(jī)號的簡單實(shí)例
下面小編就為大家?guī)硪黄猨s驗(yàn)證真實(shí)姓名與身份證號,手機(jī)號的簡單實(shí)例。小編覺得挺不錯(cuò)的,現(xiàn)在就分享給大家,也給大家做個(gè)參考。一起跟隨小編過來看看吧 2016-07-07
-
ECharts調(diào)用接口獲取后端數(shù)據(jù)的四種方法總結(jié)
echarts是我們經(jīng)常用到的數(shù)據(jù)可視化圖形,但是后端反饋給我們的數(shù)據(jù)經(jīng)常是數(shù)組包對象的集合類型,下面這篇文章主要給大家介紹了關(guān)于ECharts調(diào)用接口獲取后端數(shù)據(jù)的四種方法,需要的朋友可以參考下 2022-11-11
-
微信小程序?qū)崿F(xiàn)搜索功能并跳轉(zhuǎn)搜索結(jié)果頁面
這篇文章主要為大家詳細(xì)介紹了微信小程序?qū)崿F(xiàn)搜索功能并跳轉(zhuǎn)搜索結(jié)果頁面,具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下 2019-05-05
-
js 獲取當(dāng)前web應(yīng)用的上下文路徑實(shí)現(xiàn)方法
下面小編就為大家?guī)硪黄猨s 獲取當(dāng)前web應(yīng)用的上下文路徑實(shí)現(xiàn)方法。小編覺得挺不錯(cuò)的,現(xiàn)在就分享給大家,也給大家做個(gè)參考。一起跟隨小編過來看看吧 2016-08-08
-
Js中將Long轉(zhuǎn)換成日期格式的實(shí)現(xiàn)方法
這篇文章主要介紹了Js中將Long轉(zhuǎn)換成日期格式的實(shí)現(xiàn)方法,非常不錯(cuò),具有一定的參考借鑒價(jià)值,需要的朋友可以參考下 2018-06-06
最新評論
本文歸納了js面向?qū)ο蟮膸追N常見寫法,分享給大家供大家參考,具體內(nèi)容如下
1.工廠方式
var Circle = function() { var obj = new Object(); obj.PI = 3.14159; obj.area = function( r ) { return this.PI * r * r; } return obj; } var c = new Circle(); alert( c.area( 1.0 ) );
2.比較正規(guī)的寫法
function Circle(r) { this.r = r; } Circle.PI = 3.14159; Circle.prototype.area = function() { return Circle.PI * this.r * this.r; } var c = new Circle(1.0); alert(c.area());
3.json寫法
var Circle={ "PI":3.14159, "area":function(r){ return this.PI * r * r; } }; alert( Circle.area(1.0) );
4.有點(diǎn)變化,但是實(shí)質(zhì)和第一種一樣
var Circle=function(r){ this.r=r; } Circle.PI = 3.14159; Circle.prototype={ area:function(){ return this.r*this.r*Circle.PI; } } var obj=new Circle(1.0); alert(obj.area()
Circle.PI = 3.14159; 能夠放入屬性中寫成this.PI=3.14159;
常用為第一種和第三種,第三種寫法的擴(kuò)展小實(shí)例
var show={ btn:$('.div1'), init:function(){ var that=this; alert(this); this.btn.click(function(){ that.change(); alert(this); }) }, change:function(){ this.btn.css({'background':'green'}); } } show.init();
需要注意的是this的指向問題,下面是關(guān)于this的一點(diǎn)點(diǎn)介紹,希望對大家有幫助。
一開始采用動(dòng)態(tài)原型方法在js中創(chuàng)建自定義的對象,this也用著很順的。
這種方法中對于在對象內(nèi)部對變量的創(chuàng)建和使用都是用"this."開頭的。
比如:對象ContactModel,有三個(gè)屬性,crtnewFriendListLen,crtNewFriendList,crtFindedUserID
和四個(gè)方法requestContactList(),requestNewfriendList(),requestFindUser(),requestAddContact()
在這個(gè)變量內(nèi)部如要訪問自己的屬性,都要帶上"this."
var contactModel; ... contactModel = new ContactModel();
function ContactModel() { // this.contactList; this.crtnewFriendListLen; this.crtNewFriendList; this.crtFindedUserID = "-1"; if(typeof ContactModel._initialized == "undefined") { ContactModel.prototype.requestContactList = function() { } ContactModel.prototype.requestNewfriendList = function() { } ContactModel.prototype.requestFindUser = function(userID) { $.getJSON(mainUrl + "User/getuserinfo",{"uid":userID},function(resultObj) { // this.crtFindedUserID = userID contactModel.crtFindedUserID = userID; uiManager.contectAddPage.receiveFindUserResult(resultObj); }); } ContactModel.prototype.requestAddContact = function(remark) { alert(this.crtFindedUserID); } ContactModel._initialized = true; }; }
但這時(shí)問題出現(xiàn)了,在requestFindUser ()內(nèi),若用this.crtFindedUserID來存儲服務(wù)端傳來的數(shù)值,那么在之后此對象被調(diào)用了requestAddContact()方法后,是拿不到crtFindedUserID這個(gè)值的,alert里顯示的依然會是初始值-1,問題就出在$.getJSON()的回調(diào)方法內(nèi),此時(shí)的this指的不是ContactModel的實(shí)例,而是此方法體,所以這里的解決辦法就是在這個(gè)回調(diào)方法內(nèi)拿到ContectModel的實(shí)例,然后給這個(gè)實(shí)例的屬性crtFindedUserID賦值。
在對象內(nèi)部對視圖組件的監(jiān)聽回調(diào)方法里,this指向的也不是對象本身,同樣還是這個(gè)被回調(diào)的方法體,這時(shí)若要訪問對象本身的屬性,就要拿到此對象的實(shí)例來訪問,而不是用this.
下面是一段JS面向?qū)ο蟮臉?biāo)準(zhǔn)寫法:
<head> <meta http-equiv="Content-Type" content="text/html; charset=gb2312"> <title>新建網(wǎng)頁 1</title> <mce:script type=text/javascript><!-- var person=function(name,age){//定義對象構(gòu)造方法 this.name=name; this.age=age; } person.prototype={ //封裝方法 getName:function(){ alert(this.name); }, getAge:function(){ alert(this.age); } } function test(){//聲明調(diào)用 var man=new person('jack',12); man.getName() man.getAge() } var test2 ={ //類似靜態(tài)方法 調(diào)用直接:test2.te();即可 te:function(){ alert(); }, te1:function(){ alert(); } } // --></mce:script> </head> <body> <input type=button onclick="test()"/> </body> </html>
希望本文所述對大家學(xué)習(xí)javascript程序設(shè)計(jì)有所幫助。
相關(guān)文章
js驗(yàn)證真實(shí)姓名與身份證號,手機(jī)號的簡單實(shí)例
下面小編就為大家?guī)硪黄猨s驗(yàn)證真實(shí)姓名與身份證號,手機(jī)號的簡單實(shí)例。小編覺得挺不錯(cuò)的,現(xiàn)在就分享給大家,也給大家做個(gè)參考。一起跟隨小編過來看看吧2016-07-07ECharts調(diào)用接口獲取后端數(shù)據(jù)的四種方法總結(jié)
echarts是我們經(jīng)常用到的數(shù)據(jù)可視化圖形,但是后端反饋給我們的數(shù)據(jù)經(jīng)常是數(shù)組包對象的集合類型,下面這篇文章主要給大家介紹了關(guān)于ECharts調(diào)用接口獲取后端數(shù)據(jù)的四種方法,需要的朋友可以參考下2022-11-11微信小程序?qū)崿F(xiàn)搜索功能并跳轉(zhuǎn)搜索結(jié)果頁面
這篇文章主要為大家詳細(xì)介紹了微信小程序?qū)崿F(xiàn)搜索功能并跳轉(zhuǎn)搜索結(jié)果頁面,具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2019-05-05js 獲取當(dāng)前web應(yīng)用的上下文路徑實(shí)現(xiàn)方法
下面小編就為大家?guī)硪黄猨s 獲取當(dāng)前web應(yīng)用的上下文路徑實(shí)現(xiàn)方法。小編覺得挺不錯(cuò)的,現(xiàn)在就分享給大家,也給大家做個(gè)參考。一起跟隨小編過來看看吧2016-08-08Js中將Long轉(zhuǎn)換成日期格式的實(shí)現(xiàn)方法
這篇文章主要介紹了Js中將Long轉(zhuǎn)換成日期格式的實(shí)現(xiàn)方法,非常不錯(cuò),具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2018-06-06