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 相关文章推荐
LazyLoad 延迟加载(按需加载)
May 31 Javascript
jQuery中append、insertBefore、after与insertAfter的简单用法与注意事项
Apr 04 Javascript
HTML5附件拖拽上传drop &amp; google.gears实现代码
Apr 28 Javascript
javascript代码运行不出来执行错误的可能情况整理
Oct 18 Javascript
js使用post 方式打开新窗口
Feb 26 Javascript
JavaScript实现MIPS乘法模拟的方法
Apr 17 Javascript
JavaScript中的fontsize()方法使用详解
Jun 08 Javascript
Jquery简单实现GridView行高亮的方法
Jun 15 Javascript
js绘制圆形和矩形的方法
Aug 05 Javascript
jQuery的$.extend 浅拷贝与深拷贝
Mar 08 Javascript
vue实现父子组件之间的通信以及兄弟组件的通信功能示例
Jan 29 Javascript
使用VUE实现在table中文字信息超过5个隐藏鼠标移到时弹窗显示全部
Sep 16 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数据采集之单页面采集函数get_html的使用
2013/04/28 PHP
ThinkPHP水印功能实现修复PNG透明水印并增加JPEG图片质量可调整
2014/11/05 PHP
PHP中each与list用法分析
2016/01/08 PHP
thinkphp实现分页显示功能
2016/12/03 PHP
Yii2框架控制器、路由、Url生成操作示例
2019/05/27 PHP
飞鱼(shqlsl) javascript作品集
2006/12/16 Javascript
基于jquery实现控制经纬度显示地图与卫星
2013/05/20 Javascript
原生js和jQuery实现淡入淡出轮播效果
2015/12/25 Javascript
Bootstrap所支持的表单控件实例详解
2016/05/16 Javascript
最细致的vue.js基础语法 值得收藏!
2016/11/03 Javascript
JavaScript trim 实现去除字符串首尾指定字符的简单方法
2016/12/27 Javascript
基于Vue制作组织架构树组件
2017/12/06 Javascript
基于vue、react实现倒计时效果
2019/08/26 Javascript
解决mui框架中switch开关通过js控制开或者关状态时小圆点不动的问题
2019/09/03 Javascript
详解element-ui 表单校验 Rules 配置 常用黑科技
2020/07/11 Javascript
基于js实现的图片拖拽排序源码实例
2020/11/04 Javascript
删除目录下相同文件的python代码(逐级优化)
2012/05/25 Python
python实现超简单端口转发的方法
2015/03/13 Python
举例讲解Python编程中对线程锁的使用
2016/07/12 Python
python使用xlrd与xlwt对excel的读写和格式设定
2017/01/21 Python
python爬取哈尔滨天气信息
2018/07/14 Python
python在回调函数中获取返回值的方法
2019/02/22 Python
解决Tensorflow 内存泄露问题
2020/02/05 Python
python图形界面开发之wxPython树控件使用方法详解
2020/02/24 Python
美国眼镜网站:LensCrafters
2020/01/19 全球购物
意大利包包和行李箱销售网站:Bagaglio.it
2021/03/02 全球购物
servlet面试题
2012/08/20 面试题
请介绍一下WSDL的文档结构
2013/03/17 面试题
出国考察邀请函
2014/01/21 职场文书
《藤野先生》教学反思
2014/02/19 职场文书
婚礼主持结束词
2014/03/13 职场文书
优秀的2014年两会精神解读
2014/03/17 职场文书
党委书记个人检查对照材料思想汇报
2014/10/11 职场文书
影视后期实训报告
2014/11/05 职场文书
初中物理教学反思
2016/02/19 职场文书
mysql中DCL常用的用户和权限控制
2022/03/31 MySQL