js面向对象的写法
本文归纳了js面向对象的几种常见写法，分享给大家供大家参考，具体内容如下
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.比较正规的写法
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.有点变化，但是实质和第一种一样
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的指向问题，下面是关于this的一点点介绍，希望对大家有帮助。
一开始采用动态原型方法在js中创建自定义的对象，this也用着很顺的。
这种方法中对于在对象内部对变量的创建和使用都是用"this."开头的。
比如：对象ContactModel,有三个属性，crtnewFriendListLen,crtNewFriendList,crtFindedUserID
和四个方法requestContactList(),requestNewfriendList(),requestFindUser(),requestAddContact()
在这个变量内部如要访问自己的属性，都要带上"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;
};
}
但这时问题出现了，在requestFindUser ()内，若用this.crtFindedUserID来存储服务端传来的数值，那么在之后此对象被调用了requestAddContact()方法后，是拿不到crtFindedUserID这个值的，alert里显示的依然会是初始值-1,问题就出在$.getJSON()的回调方法内，此时的this指的不是ContactModel的实例，而是此方法体，所以这里的解决办法就是在这个回调方法内拿到ContectModel的实例，然后给这个实例的属性crtFindedUserID赋值。
在对象内部对视图组件的监听回调方法里，this指向的也不是对象本身，同样还是这个被回调的方法体，这时若要访问对象本身的属性，就要拿到此对象的实例来访问，而不是用this.
下面是一段JS面向对象的标准写法：
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<title>新建网页 1</title>
<mce:script type=text/javascript><!--
var person=function(name,age){//定义对象构造方法
this.name=name;
this.age=age;
}
person.prototype={ //封装方法
getName:function(){
alert(this.name);
},
getAge:function(){
alert(this.age);
}
}
function test(){//声明调用
var man=new person('jack',12);
man.getName()
man.getAge()
}
var test2 ={ //类似静态方法 调用直接：test2.te();即可
te:function(){
alert();
},
te1:function(){
alert();
}
}
// --></mce:script>
</head>
<body>
<input type=button onclick="test()"/>
</body>
</html>
希望本文所述对大家学习javascript程序设计有所帮助。
相关文章
这篇文章主要介绍了bootstrap组件之按钮式下拉菜单，包括单按钮下拉菜单，分裂式下拉菜单和向上弹出式菜单，本文给大家介绍的非常详细，需要的朋友参考下吧2017-01-01
这篇文章主要介绍了微信小程序开发常用功能,本文通过实例代码给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值，需要的朋友可以参考下2022-02-02
本篇文章主要介绍了Webpack打包字体font-awesome的方法示例，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2018-04-04
这篇文章介绍了Ajax实现邮箱验证的方法，文中通过示例代码介绍的非常详细。对大家的学习或工作具有一定的参考借鉴价值，需要的朋友可以参考下2022-04-04
如果要操作一个元素，首先要获取到它，下面为大家介绍下document节点对象的获取方式，感兴趣的朋友不要错过2013-12-12
这篇文章主要介绍了js实现类似于add(1)(2)(3)调用方式的方法,需要的朋友可以参考下2015-03-03
3D球状标签云的效果想必很多朋友在浏览网页时都有见到过吧，看起来提复杂的，其实实现起来挺容易的，感兴趣的朋友可以了解下本文2013-12-12
这篇文章主要介绍了微信小程序实现蒙版弹出窗功能，本文通过实例代码给大家介绍的非常详细，具有一定的参考借鉴价值,需要的朋友可以参考下2019-09-09
这篇文章主要介绍了原生js+css调节音量滑块，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2020-01-01
这篇文章主要介绍了JS集成fckeditor及判断内容是否为空的方法,涉及fckeditor的设置及页面元素的操作技巧,并分析了php环境下配置文件上传的注意事项,需要的朋友可以参考下2016-05-05
最新评论