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 相关文章推荐
基于jquery的用鼠标画出可移动的div
Sep 06 Javascript
zTree插件之多选下拉菜单实例代码
Nov 06 Javascript
原生js仿jq判断当前浏览器是否为ie,精确到ie6~8
Aug 30 Javascript
jquery组件WebUploader文件上传用法详解
Oct 23 Javascript
javascript十六进制数字和ASCII字符之间的转换方法
Dec 27 Javascript
谈谈第三方App接入微信登录 解读
Dec 27 Javascript
实现单层json按照key字母顺序排序的示例
Dec 06 Javascript
将Sublime Text 3 添加到右键中的简单方法
Dec 12 Javascript
Angular中使用better-scroll插件的方法
Mar 27 Javascript
JavaScript交换变量的常用方法小结【4种方法】
May 07 Javascript
javascript canvas封装动态时钟
Sep 30 Javascript
JS实现购物车基本功能
Nov 08 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 输出缓存详解
2009/06/20 PHP
php网上商城购物车设计代码分享
2012/02/15 PHP
PHP动态页生成静态页的3种常用方法
2014/11/13 PHP
php 解决扫描二维码下载跳转问题
2017/01/13 PHP
ThinkPHP中类的构造函数_construct()与_initialize()的区别详解
2017/03/13 PHP
JS input 数字验证代码
2009/07/30 Javascript
JavaScript运行时库属性一览表
2014/03/14 Javascript
Js制作点击输入框时默认文字消失的效果
2015/09/05 Javascript
js小数运算出现多位小数如何解决
2015/10/08 Javascript
jQuery Easyui实现左右布局
2016/01/26 Javascript
jQuery实现可以编辑的表格实例详解【附demo源码下载】
2016/07/09 Javascript
JS 全屏和退出全屏详解及实例代码
2016/11/07 Javascript
JavaScript验证知识整理
2017/03/24 Javascript
阿里大于短信验证码node koa2的实现代码(最新)
2017/09/07 Javascript
基于 flexible 的 Vue 组件:Toast -- 显示框效果
2017/12/26 Javascript
iview table高度动态设置方法
2018/03/14 Javascript
微信小程序学习笔记之登录API与获取用户信息操作图文详解
2019/03/29 Javascript
详解如何运行vue项目
2019/04/15 Javascript
一文快速详解前端框架 Vue 最强大的功能
2019/05/21 Javascript
解决LayUI加上form.render()下拉框和单选以及复选框不出来的问题
2019/09/27 Javascript
vue+element树组件 实现树懒加载的过程详解
2019/10/21 Javascript
浅谈pycharm出现卡顿的解决方法
2018/12/03 Python
python日期相关操作实例小结
2019/06/24 Python
Python企业编码生成系统之系统主要函数设计详解
2019/07/26 Python
Python如何使用Gitlab API实现批量的合并分支
2019/11/27 Python
Python ckeditor富文本编辑器代码实例解析
2020/06/22 Python
html5新增的属性和废除的属性简要概述
2013/02/20 HTML / CSS
Html5移动端适配IphoneX等机型的方法
2019/06/25 HTML / CSS
塔吉特百货公司官网:Target
2017/04/27 全球购物
计算机专业个人简短的自我评价
2013/10/23 职场文书
中介公司区域经理岗位职责范本
2014/03/02 职场文书
中学生演讲稿
2014/04/26 职场文书
高校师德师风自我剖析材料
2014/09/29 职场文书
浅谈TypeScript 索引签名的理解
2021/10/16 Javascript
2007年老电脑安装win11会怎么样? 网友实测win11在老电脑运行良好
2021/11/21 数码科技
redis的list数据类型相关命令介绍及使用
2022/01/18 Redis