js面向?qū)ο蟮膶懛?/h1>
更新時間：2016年02月19日 16:45:55 投稿：lijiao
這篇文章主要介紹了四種js面向?qū)ο蟮某Ｒ妼懛ǎ€介紹了有關(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.有點變化，但是實質(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;
常用為第一種和第三種，第三種寫法的擴展小實例
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的一點點介紹，希望對大家有幫助。
一開始采用動態(tài)原型方法在js中創(chuàng)建自定義的對象，this也用著很順的。
這種方法中對于在對象內(nèi)部對變量的創(chuàng)建和使用都是用"this."開頭的。
比如：對象ContactModel,有三個屬性，crtnewFriendListLen,crtNewFriendList,crtFindedUserID
和四個方法requestContactList(),requestNewfriendList(),requestFindUser(),requestAddContact()
在這個變量內(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;
};
}
但這時問題出現(xiàn)了，在requestFindUser ()內(nèi)，若用this.crtFindedUserID來存儲服務(wù)端傳來的數(shù)值，那么在之后此對象被調(diào)用了requestAddContact()方法后，是拿不到crtFindedUserID這個值的，alert里顯示的依然會是初始值-1,問題就出在$.getJSON()的回調(diào)方法內(nèi)，此時的this指的不是ContactModel的實例，而是此方法體，所以這里的解決辦法就是在這個回調(diào)方法內(nèi)拿到ContectModel的實例，然后給這個實例的屬性crtFindedUserID賦值。
在對象內(nèi)部對視圖組件的監(jiān)聽回調(diào)方法里，this指向的也不是對象本身，同樣還是這個被回調(diào)的方法體，這時若要訪問對象本身的屬性，就要拿到此對象的實例來訪問，而不是用this.
下面是一段JS面向?qū)ο蟮臉藴蕦懛?/strong>：
<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è)計有所幫助。
相關(guān)文章
-
這篇文章主要介紹了bootstrap組件之按鈕式下拉菜單，包括單按鈕下拉菜單，分裂式下拉菜單和向上彈出式菜單，本文給大家介紹的非常詳細，需要的朋友參考下吧 2017-01-01
-
這篇文章主要介紹了微信小程序開發(fā)常用功能,本文通過實例代碼給大家介紹的非常詳細，對大家的學(xué)習(xí)或工作具有一定的參考借鑒價值，需要的朋友可以參考下 2022-02-02
-
本篇文章主要介紹了Webpack打包字體font-awesome的方法示例，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧 2018-04-04
-
這篇文章介紹了Ajax實現(xiàn)郵箱驗證的方法，文中通過示例代碼介紹的非常詳細。對大家的學(xué)習(xí)或工作具有一定的參考借鑒價值，需要的朋友可以參考下 2022-04-04
-
如果要操作一個元素，首先要獲取到它，下面為大家介紹下document節(jié)點對象的獲取方式，感興趣的朋友不要錯過 2013-12-12
-
js實現(xiàn)類似于add(1)(2)(3)調(diào)用方式的方法
這篇文章主要介紹了js實現(xiàn)類似于add(1)(2)(3)調(diào)用方式的方法,需要的朋友可以參考下 2015-03-03
-
3D球狀標簽云的效果想必很多朋友在瀏覽網(wǎng)頁時都有見到過吧，看起來提復(fù)雜的，其實實現(xiàn)起來挺容易的，感興趣的朋友可以了解下本文 2013-12-12
-
這篇文章主要介紹了微信小程序?qū)崿F(xiàn)蒙版彈出窗功能，本文通過實例代碼給大家介紹的非常詳細，具有一定的參考借鑒價值,需要的朋友可以參考下 2019-09-09
-
這篇文章主要介紹了原生js+css調(diào)節(jié)音量滑塊，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下 2020-01-01
-
JS集成fckeditor及判斷內(nèi)容是否為空的方法
這篇文章主要介紹了JS集成fckeditor及判斷內(nèi)容是否為空的方法,涉及fckeditor的設(shè)置及頁面元素的操作技巧,并分析了php環(huán)境下配置文件上傳的注意事項,需要的朋友可以參考下 2016-05-05
最新評論
本文歸納了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.有點變化，但是實質(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;
常用為第一種和第三種，第三種寫法的擴展小實例
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的一點點介紹，希望對大家有幫助。
一開始采用動態(tài)原型方法在js中創(chuàng)建自定義的對象，this也用著很順的。
這種方法中對于在對象內(nèi)部對變量的創(chuàng)建和使用都是用"this."開頭的。
比如：對象ContactModel,有三個屬性，crtnewFriendListLen,crtNewFriendList,crtFindedUserID
和四個方法requestContactList(),requestNewfriendList(),requestFindUser(),requestAddContact()
在這個變量內(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;
};
}
但這時問題出現(xiàn)了，在requestFindUser ()內(nèi)，若用this.crtFindedUserID來存儲服務(wù)端傳來的數(shù)值，那么在之后此對象被調(diào)用了requestAddContact()方法后，是拿不到crtFindedUserID這個值的，alert里顯示的依然會是初始值-1,問題就出在$.getJSON()的回調(diào)方法內(nèi)，此時的this指的不是ContactModel的實例，而是此方法體，所以這里的解決辦法就是在這個回調(diào)方法內(nèi)拿到ContectModel的實例，然后給這個實例的屬性crtFindedUserID賦值。
在對象內(nèi)部對視圖組件的監(jiān)聽回調(diào)方法里，this指向的也不是對象本身，同樣還是這個被回調(diào)的方法體，這時若要訪問對象本身的屬性，就要拿到此對象的實例來訪問，而不是用this.
下面是一段JS面向?qū)ο蟮臉藴蕦懛?/strong>：
<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è)計有所幫助。
相關(guān)文章
- 這篇文章主要介紹了bootstrap組件之按鈕式下拉菜單，包括單按鈕下拉菜單，分裂式下拉菜單和向上彈出式菜單，本文給大家介紹的非常詳細，需要的朋友參考下吧2017-01-01
- 這篇文章主要介紹了微信小程序開發(fā)常用功能,本文通過實例代碼給大家介紹的非常詳細，對大家的學(xué)習(xí)或工作具有一定的參考借鑒價值，需要的朋友可以參考下2022-02-02
- 本篇文章主要介紹了Webpack打包字體font-awesome的方法示例，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2018-04-04
- 這篇文章介紹了Ajax實現(xiàn)郵箱驗證的方法，文中通過示例代碼介紹的非常詳細。對大家的學(xué)習(xí)或工作具有一定的參考借鑒價值，需要的朋友可以參考下2022-04-04
- 如果要操作一個元素，首先要獲取到它，下面為大家介紹下document節(jié)點對象的獲取方式，感興趣的朋友不要錯過2013-12-12
-
js實現(xiàn)類似于add(1)(2)(3)調(diào)用方式的方法
這篇文章主要介紹了js實現(xiàn)類似于add(1)(2)(3)調(diào)用方式的方法,需要的朋友可以參考下2015-03-03 - 3D球狀標簽云的效果想必很多朋友在瀏覽網(wǎng)頁時都有見到過吧，看起來提復(fù)雜的，其實實現(xiàn)起來挺容易的，感興趣的朋友可以了解下本文2013-12-12
- 這篇文章主要介紹了微信小程序?qū)崿F(xiàn)蒙版彈出窗功能，本文通過實例代碼給大家介紹的非常詳細，具有一定的參考借鑒價值,需要的朋友可以參考下2019-09-09
- 這篇文章主要介紹了原生js+css調(diào)節(jié)音量滑塊，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2020-01-01
-
JS集成fckeditor及判斷內(nèi)容是否為空的方法
這篇文章主要介紹了JS集成fckeditor及判斷內(nèi)容是否為空的方法,涉及fckeditor的設(shè)置及頁面元素的操作技巧,并分析了php環(huán)境下配置文件上傳的注意事項,需要的朋友可以參考下2016-05-05