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 相关文章推荐
web页面数据展示新想法(json)
Jun 08 Javascript
JavaScript中使用构造器创建对象无需new的情况说明
Mar 01 Javascript
JavaScript设计模式之抽象工厂模式介绍
Dec 28 Javascript
JavaScript处理解析JSON数据过程详解
Sep 11 Javascript
Node.js编写CLI的实例详解
May 17 Javascript
微信小程序的日期选择器的实例详解
Sep 29 Javascript
JavaScript中变量、指针和引用功能与操作示例
Aug 04 Javascript
vue轮播组件实现$children和$parent 附带好用的gif录制工具
Sep 26 Javascript
JavaScript 作用域scope简单汇总
Oct 23 Javascript
JS函数参数的传递与同名参数实例分析
Mar 16 Javascript
Vue 自适应高度表格的实现方法
May 13 Javascript
浅谈vue.watch的触发条件是什么
Nov 07 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
thinkPHP实现MemCache分布式缓存功能
2016/03/23 PHP
phpStudy配置多站点多域名方法及遇到的403错误解决方法
2017/10/19 PHP
PHP过滤器 filter_has_var() 函数用法实例分析
2020/04/23 PHP
表单元素的submit()方法和onsubmit事件应用概述
2013/02/01 Javascript
兼容主流浏览器的iframe自适应高度js脚本
2014/01/10 Javascript
关于Javascript中defer和async的区别总结
2016/09/20 Javascript
JavaScript实现图片懒加载(Lazyload)
2016/11/28 Javascript
微信小程序 swiper制作tab切换实现附源码
2017/01/21 Javascript
Node.js使用NodeMailer发送邮件实例代码
2017/03/06 Javascript
浅谈Node 调试工具入门教程
2018/03/20 Javascript
浅析微信小程序modal弹窗关闭默认会执行cancel问题
2019/10/14 Javascript
javascript设计模式 ? 简单工厂模式原理与应用实例分析
2020/04/09 Javascript
Node Express用法详解【安装、使用、路由、中间件、模板引擎等】
2020/05/13 Javascript
Python模块学习 datetime介绍
2012/08/27 Python
python操作xml文件示例
2014/04/07 Python
用Django实现一个可运行的区块链应用
2018/03/08 Python
Django实现一对多表模型的跨表查询方法
2018/12/18 Python
Django项目中添加ldap登陆认证功能的实现
2019/04/04 Python
python读文件的步骤
2019/10/08 Python
Bergfreunde丹麦:登山装备网上零售商
2017/02/26 全球购物
丝芙兰加拿大官方网站:SEPHORA加拿大
2018/11/20 全球购物
捷克移动配件网上商店:ProMobily.cz
2019/03/15 全球购物
Linux如何为某个操作添加别名
2015/02/05 面试题
举例说明类变量和实例变量的区别
2016/06/30 面试题
教师自我鉴定
2013/12/13 职场文书
失业者真诚求职信范文
2013/12/25 职场文书
应用化学专业职业生涯规划书
2013/12/31 职场文书
女儿十岁生日答谢词
2014/01/27 职场文书
先进事迹报告会主持词
2014/04/02 职场文书
双方协议书
2014/04/22 职场文书
六一儿童节演讲稿
2014/05/23 职场文书
贪污受贿检讨书范文
2014/11/19 职场文书
2014年师德师风工作总结
2014/11/25 职场文书
2014年助理政工师工作总结
2014/12/19 职场文书
李强优秀员工观后感
2015/06/16 职场文书
竞聘演讲报告:基本写作有哪些?附开头范文
2019/10/16 职场文书