Javascript创建类和对象详解
现总结一下Javascript创建类和对象的几种方法:
1、原始的创建方法:
<script type="text/javascript"> var person = new Object(); person.name="Amy"; person.sex="Woman"; person.show=function(){ document.write("name is: "+this.name+" ; sex is:"+this.sex); } person.show(); </script>
原始的创建方法对于熟悉面向对象的人来说难以接受,总感觉属性和方法的封装不是很紧密,这种封装是以“对象名”+“.”的方式进行,表示对象名后跟的属性和方法是这个对象拥有的东西,这个对象(例如:person)就是封装好的结果,你可以继续追加方法和属性,例如追加age属性:person.age=23;这种创建方法会让熟悉Java编程的人感到很难受。我们可以对原始的创建方法进一步“封装”一下,请看下一步:
2、工厂方法模式:
<script type="text/javascript"> function personFactory(name,age,sex){ var ob=new Object(); ob.name=name; ob.age=age; ob.sex=sex; ob.show=function(){ document.write(ob.name+" "+ob.age+" "+ob.sex); } return ob; } var person=personFactory("Amy",21,"Woman"); person.show(); </script>
工厂方法模式看起来更像一个类了,personFactory对原始的创建方法进行了封装,并将创建好的对象返回给person引用变量,person就可以引用这个创建好的对象了,但是还不够完美:你每一次创建一个对象, 并使用该对象调用show()方法时,都会创建新的show()函数,它们完全可以调用同一个show方法,优化方法是将show放到工厂外,如下:
<script type="text/javascript"> function show(){ document.write(this.name+" "+this.age+" "+this.sex); } function personFactory(name,age,sex){ var ob=new Object(); ob.name=name; ob.age=age; ob.sex=sex; ob.show=show; return ob; } var person=personFactory("Amy",22,"Woman"); person.show(); </script>
从功能上说,上面的代码解决了函数重用问题,但是呈现方式不像是创建一个对象,熟悉Java的人仍感到难受。请看下一步:
3、构造方法模式:
<script type="text/javascript"> function person(name,age,sex){ this.name=name; this.age=age; this.sex=sex; this.show=function(){ document.write(this.name+" "+this.age+" "+this.sex); document.write("<br>"); } } var per=new person("Amy",22,"Woman"); per.show(); </script>
上述代码的创建方式已经与Java类和对象的创建方式几乎一样了,封装好类的属性和方法,然后利用new关键字创建并返回一个对象,这不就是Java创建类和对象的过程吗,是的,就是这个过程,但是还可以优化,这种方式创建的对象调用show方法是也会即时地创建一个show函数,我们能不能创建一个所有对象公用的一个方法呢?就像Java类中的static方法一样,所有对象都使用同一个static方法,答案是可以的。请看下一步:
4、动态原型方法:
<script type="text/javascript"> function Person(name,age,sex){ this.name=name; this.age=age; this.sex=sex; if(typeof Person.tag == "undefined"){ Person.prototype.show=function(){ document.write(this.name+" "+this.age+" "+this.sex); document.write("<br>"); } Person.tag=true; } } var per=new Person("Peter",22,"Man"); per.show(); </script>
这里使用了一点技巧,当用new创建对象是,会执行Person功能块中的if判断语句,顺序从上往下,刚开始tag变量当然没有定义,所以执行if语句块里的内容:
Person.prototype.show=function(){ document.write(this.name+" "+this.age+" "+this.sex); document.write("<br>"); }
这段内容的含义是创建一个属于类Person的show方法,注意,它是一个类方法,相当于Java中static修饰后的方法,而非单个对象的方法,这样所有的对象均可调用同一个方法了,这样也不用每次不同对象调用方法是都创建自己的show函数了,既节省空间又节省时间,这种方法岂不更妙。这里解释一下,以“类名.prototype.属性/方法”方式构造的属性和方法相当于Java中用static修饰的变量或方法,是属于整个类的,而非单个的对象,也即所有对象是共享的。
以上是学习JS类和对象的总结,其中个人理解错误之处还望大家批评指正。
原文链接:http://www.cnblogs.com/codeMedita/p/6920314.html
(资源库 www.zyku.net)
上一篇:用JavaScrip正则表达式验证form表单的方法
栏 目:JavaScript
下一篇:js获取地址栏参数的两种方法
本文标题:Javascript创建类和对象详解
本文地址:https://www.zyku.net/js/1382.html
您可能感兴趣的文章
- 07-31类似看云(KanCloud)的在线文档编辑平台有哪些
- 05-10JS - 获取文件后缀,判断文件类型(比如是否为图片格式)
- 05-10js根据后缀判断文件文件类型的代码
- 05-06配置错误 在唯一密钥属性"value"设置为"Index.aspx"时
- 03-01配置错误 在唯一密钥属性“fileExtension”设置为“.m
- 12-09TortoiseSVN checkout 之后图标(绿色勾之类的)没有显
- 07-21PHP实现生成PDF文件的方法基于FPDF类库
- 09-15帝国CMS7.5版专题子类支持自定义文件名,更个性化
- 07-27PHP实现的Redis多库选择功能单例类
- 07-07MySQL中的数据类型binary和varbinary详解
- 11-10苹果13怎么设置时间
- 02-27帝国CMS各种调用标签使用中的一些小技
- 07-05Linux newaliases命令
- 01-03极速WiFi万能密码-极速WiFi万能密码应
- 03-03iPhone12pro拍摄月亮技巧操作方法
- 01-08国宇ERP-国宇ERP应用软件功能介绍
- 11-20vivoX70pro+耳机返听功能在哪
- 10-03oppok9pro在哪里查看网速
- 06-03WIN10系统提示windows sockets启动失
- 03-07oppo手机关闭游戏助手教程
最近更新
阅读排行
猜你喜欢
- 07-05Linux talk命令
- 12-30素描入门教程-素描入门教程应用软件功
- 01-08轻松扫描-轻松扫描应用软件功能介绍
- 01-11快速清理手机垃圾-快速清理手机垃圾应
- 05-09接口测试 Fiddler 抓取 https
- 11-16华为nova9怎么设置上滑退出模式
- 01-12y2002电音软件-y2002电音软件应用软件
- 01-17百盟影视-百盟影视应用软件功能介绍
- 12-30WOLB-WOLB应用软件功能介绍
- 09-20ankidroid导入牌组步骤分享