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 相关文章推荐
js的闭包的一个示例说明
Nov 18 Javascript
jquery里的each使用方法详解
Dec 22 Javascript
JQuery 1.6发布 性能提升,同时包含大量破坏性变更
May 10 Javascript
jQuery常用操作方法及常用函数总结
Jun 19 Javascript
document.forms用法示例介绍
Jun 26 Javascript
jQuery地图map悬停显示省市代码分享
Aug 20 Javascript
jQuery实现可编辑的表格实例讲解(2)
Sep 17 Javascript
原生javascript实现匀速运动动画效果
Feb 26 Javascript
微信小程序自定义导航栏实例代码
Apr 05 Javascript
vue 实现websocket发送消息并实时接收消息
Dec 09 Javascript
基于Vue实现微前端的示例代码
Apr 24 Javascript
基于VUE实现判断设备是PC还是移动端
Jul 03 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
使用 PHPMAILER 发送邮件实例应用
2012/11/07 PHP
PHP 用session与gd库实现简单验证码生成与验证的类方法
2016/11/15 PHP
超强多功能php绿色集成环境详解
2017/01/25 PHP
php生成条形码的图片的实例详解
2017/09/13 PHP
php 与 nginx 的处理方式及nginx与php-fpm通信的两种方式
2018/09/28 PHP
用js做一个小游戏平台 (一)
2009/12/29 Javascript
javascript让setInteval里的函数参数中的this指向特定的对象
2010/01/31 Javascript
javascript处理table表格的代码
2010/12/06 Javascript
jquery lazyload延迟加载技术的实现原理分析
2011/01/24 Javascript
jQuery EasyUI API 中文文档 - EasyLoader 加载器
2011/09/29 Javascript
jQuery获取注册信息并提示实现代码
2013/04/21 Javascript
JS二叉树的简单实现方法示例
2017/04/05 Javascript
js实现鼠标拖拽多选功能示例
2017/08/01 Javascript
解决vue+webpack打包路径的问题
2018/03/06 Javascript
Angular通过指令动态添加组件问题
2018/07/09 Javascript
webpack4 SCSS提取和懒加载的示例
2018/09/03 Javascript
vue前端框架—Mint UI详解(更适用于移动端)
2019/04/30 Javascript
《javascript设计模式》学习笔记四:Javascript面向对象程序设计链式调用实例分析
2020/04/07 Javascript
把MySQL表结构映射为Python中的对象的教程
2015/04/07 Python
python实现从ftp服务器下载文件的方法
2015/04/30 Python
Python的collections模块中namedtuple结构使用示例
2016/07/07 Python
Python编程实现微信企业号文本消息推送功能示例
2017/08/21 Python
浅谈flask截获所有访问及before/after_request修饰器
2018/01/18 Python
Python使用Windows API创建窗口示例【基于win32gui模块】
2018/05/09 Python
对python sklearn one-hot编码详解
2018/07/10 Python
基于python 微信小程序之获取已存在模板消息列表
2019/08/05 Python
基于Python实现剪切板实时监控方法解析
2019/09/11 Python
浅谈JupyterNotebook导出pdf解决中文的问题
2020/04/22 Python
iPython pylab模式启动方式
2020/04/24 Python
django有哪些好处和优点
2020/09/01 Python
pycharm2020.1.2永久破解激活教程,实测有效
2020/10/29 Python
CSS3 text-shadow实现文字阴影效果
2016/02/24 HTML / CSS
Expedia加拿大官方网站:加拿大最大的在线旅游提供商
2017/12/31 全球购物
学术诚信承诺书
2014/05/26 职场文书
2014年员工工作总结范文
2014/11/18 职场文书
background-position百分比原理详解
2021/05/08 HTML / CSS