Javascript创建类和对象详解


Posted in Javascript onMay 31, 2017

现总结一下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类和对象的总结,其中个人理解错误之处还望大家批评指正。

Javascript 相关文章推荐
MooTools 页面滚动浮动层智能定位实现代码
Aug 23 Javascript
高效的获取当前元素是父元素的第几个子元素
Oct 15 Javascript
jquery+php实现搜索框自动提示
Nov 28 Javascript
jQuery实现带幻灯的tab滑动切换风格菜单代码
Aug 27 Javascript
javascript多物体运动实现方法分析
Jan 08 Javascript
Bootstrap源码解读标签、徽章、缩略图和警示框(8)
Dec 26 Javascript
新手vue构建单页面应用实例代码
Sep 18 Javascript
微信小程序HTTP接口请求封装的实现
Feb 21 Javascript
使用JQuery自动完成插件Auto Complete详解
Jun 18 jQuery
layui表单验证select下拉框实现验证的方法
Sep 05 Javascript
vue监听dom大小改变案例
Jul 29 Javascript
vscode中的vue项目报错Property ‘xxx‘ does not exist on type ‘CombinedVueInstance<{ readyOnly...Vetur(2339)
Sep 11 Javascript
Javascript继承机制详解
May 30 #Javascript
Vue2.x中的Render函数详解
May 30 #Javascript
jQuery实现动态删除LI的方法
May 30 #jQuery
Vue.js实现在下拉列表区域外点击即可关闭下拉列表的功能(自定义下拉列表)
May 30 #Javascript
JS给按钮添加跳转功能类似a标签
May 30 #Javascript
jQuery异步提交表单实例
May 30 #jQuery
JS实现多级菜单中当前菜单不随页面跳转样式而发生变化
May 30 #Javascript
You might like
开启CURL扩展,让服务器支持PHP curl函数(远程采集)
2011/03/19 PHP
php设置编码格式的方法
2013/03/05 PHP
php中rename函数用法分析
2014/11/15 PHP
动态表单验证的操作方法和TP框架里面的ajax表单验证
2017/07/19 PHP
thinkPHP5实现数据库添加内容的方法
2017/10/25 PHP
PHP-FPM和Nginx的通信机制详解
2019/02/01 PHP
myeclipse安装jQuery插件的方法
2011/03/29 Javascript
jQuery的Ajax的自动完成功能控件简要说明
2013/02/22 Javascript
jquery表格内容筛选实现思路及代码
2013/04/16 Javascript
JavaScript中setAttribute用法介绍
2013/07/20 Javascript
固定表格行列(expression)在IE下适用
2013/07/25 Javascript
JavaScript实现将UPC转换成ISBN的方法
2015/05/26 Javascript
深入浅析javascript立即执行函数
2015/10/23 Javascript
JavaScript+Java实现HTML页面转为PDF文件保存的方法
2016/05/30 Javascript
JavaScript生成带有缩进的表格代码
2016/06/15 Javascript
Bootstrap缩略图与警告框学习使用
2017/02/08 Javascript
一种angular的方法级的缓存注解(装饰器)
2018/03/13 Javascript
将Python中的数据存储到系统本地的简单方法
2015/04/11 Python
使用Python实现BT种子和磁力链接的相互转换
2015/11/09 Python
在Python中,不用while和for循环遍历列表的实例
2019/02/20 Python
详解python的argpare和click模块小结
2019/03/31 Python
django项目中使用手机号登录的实例代码
2019/08/15 Python
Python selenium模拟手动操作实现无人值守刷积分功能
2020/05/13 Python
如何基于Python爬取隐秘的角落评论
2020/07/02 Python
python使用Windows的wmic命令监控文件运行状况,如有异常发送邮件报警
2021/01/30 Python
Python运算符+与+=的方法实例
2021/02/18 Python
美国电力供应商店/电气批发商:USESI
2018/10/12 全球购物
什么是聚集索引和非聚集索引
2012/01/17 面试题
四川internet信息高速公路(C#)笔试题
2012/02/29 面试题
品学兼优的大学生自我评价
2013/09/20 职场文书
致100米运动员广播稿
2014/02/14 职场文书
协议书模板
2014/04/23 职场文书
班主任个人工作反思
2014/04/28 职场文书
日语系毕业求职信
2014/07/27 职场文书
环卫处个人工作总结
2015/03/04 职场文书
技术员岗位职责范本
2015/04/11 职场文书