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 相关文章推荐
收集的网上用的ajax之chat.js文件
Apr 08 Javascript
extjs 为某个事件设置拦截器
Jan 15 Javascript
拥抱模块化的JavaScript
Mar 07 Javascript
在百度知道团队中快速审批新成员的js脚本
Feb 02 Javascript
解决jQuery动态获取手机屏幕高和宽的问题
May 07 Javascript
函数式 JavaScript(一)简介
Jul 07 Javascript
基于jQuey实现鼠标滑过变色(整行变色)
Dec 07 Javascript
AngularJS基础 ng-options 指令详解
Aug 02 Javascript
Bootstrap3 图片(响应式图片&amp;图片形状)
Jan 04 Javascript
vue指令以及dom操作详解
Mar 04 Javascript
微信小程序wx.navigateTo中events属性实现页面间通信传值,数据同步
Jul 13 Javascript
layui表格数据重载
Jul 27 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
PHP自动选择 连接本地还是远程数据库
2010/12/02 PHP
PHP图像处理类库MagickWand用法实例分析
2015/05/21 PHP
PHP获取某个月最大天数(最后一天)的方法
2015/07/29 PHP
PHP中Restful api 错误提示返回值实现思路
2016/04/12 PHP
Laravel框架Eloquent ORM修改数据操作示例
2019/12/03 PHP
jquery 插件 任意位置浮动固定层
2008/12/25 Javascript
JS option location 页面跳转实现代码
2008/12/27 Javascript
getComputedStyle与currentStyle获取样式(style/class)
2013/03/19 Javascript
jQuery中RadioButtonList的功能及用法实例介绍
2013/08/23 Javascript
判断输入是否为空,获得输入类型的JS代码
2013/10/30 Javascript
jquery实现标签支持图文排列带上下箭头按钮的选项卡
2015/03/14 Javascript
jQuery实现的多级下拉菜单效果代码
2015/08/24 Javascript
jQuery实现点击水纹波动动画
2016/04/10 Javascript
JavaScript 消息框效果【实现代码】
2016/04/27 Javascript
jQuery animate easing使用方法图文详解
2016/06/17 Javascript
移动端脚本框架Hammer.js
2016/12/15 Javascript
浅谈ElementUI中switch回调函数change的参数问题
2018/08/24 Javascript
基于JavaScript实现贪吃蛇游戏
2020/03/16 Javascript
js实现表格单列按字母排序
2020/08/12 Javascript
vue穿梭框实现上下移动
2021/01/29 Vue.js
Python中生成Epoch的方法
2017/04/26 Python
pycharm运行程序时在Python console窗口中运行的方法
2018/12/03 Python
python爬取内容存入Excel实例
2019/02/20 Python
浅谈Python2之汉字编码为unicode的问题(即类似\xc3\xa4)
2019/08/12 Python
python中文分词库jieba使用方法详解
2020/02/11 Python
strlen的几种不同实现方法
2013/05/31 面试题
如何执行一个shell程序
2012/11/23 面试题
仓库管理专业个人的自我评价
2013/12/30 职场文书
自主实习接收函
2014/01/13 职场文书
组织关系转移介绍信
2014/01/16 职场文书
2014党员学习《反腐倡廉警示教育读本》思想汇报
2014/09/13 职场文书
大足石刻导游词
2015/02/02 职场文书
2015年六一儿童节演讲稿
2015/03/19 职场文书
2015年党建工作目标责任书
2015/05/08 职场文书
Python机器学习之KNN近邻算法
2021/05/14 Python
MySQL 逻辑备份 into outfile
2022/05/15 MySQL