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解密入门 最终变量劫持
Jun 25 Javascript
js跟随滚动条滚动浮动代码
Dec 31 Javascript
在一个js文件里远程调用jquery.js会在ie8下的一个奇怪问题
Nov 28 Javascript
『jQuery』.html(),.text()和.val()的概述及使用
Apr 22 Javascript
图标线性回归斜着移动到指定的位置
Aug 16 Javascript
一个JavaScript去除字符串末尾的空白实例代码
Sep 22 Javascript
原生javascript实现图片滚动、延时加载功能
Jan 12 Javascript
javascript实现带节日和农历的日历特效
Feb 01 Javascript
Javascript循环删除数组中元素的几种方法示例
May 18 Javascript
解决使用Vue.js显示数据的时,页面闪现原始代码的问题
Feb 11 Javascript
JS实现左边列表移到到右边列表功能
Mar 28 Javascript
Vue2.0实现组件之间数据交互和通信操作示例
May 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
我的论坛源代码(七)
2006/10/09 PHP
php合并数组array_merge函数运算符加号与的区别
2008/10/31 PHP
如何修改和添加Apache的默认站点目录
2013/07/05 PHP
ThinkPHP3.1查询语言详解
2014/06/19 PHP
Yii分页用法实例详解
2014/12/04 PHP
php 如何禁用eval() 函数实例详解
2016/12/01 PHP
thinkPHP5实现的查询数据库并返回json数据实例
2017/10/23 PHP
laravel 解决Eloquent ORM的save方法无法插入数据的问题
2019/10/21 PHP
类似CSDN图片切换效果脚本
2009/09/17 Javascript
再谈ie和firefox下的document.all属性
2009/10/21 Javascript
Javascript异步表单提交,图片上传,兼容异步模拟ajax技术
2010/05/10 Javascript
jQuery简单实现日历的方法
2015/05/04 Javascript
js获取客户端操作系统类型的方法【测试可用】
2016/05/27 Javascript
关于js函数解释(包括内嵌,对象等)
2016/11/20 Javascript
微信小程序 两种为对象属性赋值的方式详解
2017/02/23 Javascript
详解vue axios用post提交的数据格式
2018/08/07 Javascript
一步步教你利用Docker设置Node.js
2018/11/20 Javascript
python利用lxml读写xml格式的文件
2017/08/10 Python
Python网络编程之TCP与UDP协议套接字用法示例
2018/02/02 Python
windows下添加Python环境变量的方法汇总
2018/05/14 Python
使用Py2Exe for Python3创建自己的exe程序示例
2018/10/31 Python
解决pyinstaller打包pyqt5的问题
2019/01/08 Python
使用before和:after伪类制作css3圆形按钮
2014/04/08 HTML / CSS
法国在线购买汽车轮胎网站:123pneus.fr
2019/02/25 全球购物
JD Sports西班牙:英国领先的运动服装公司
2020/01/06 全球购物
意大利在线药房:Saninforma
2021/02/11 全球购物
Structs界面控制层技术
2013/10/11 面试题
上级检查欢迎词
2014/01/18 职场文书
珍惜水资源建议书
2014/03/12 职场文书
校园环保建议书
2014/05/14 职场文书
2015年见习期工作总结
2014/12/12 职场文书
清洁工个人总结
2015/03/04 职场文书
地震捐款简报
2015/07/21 职场文书
2016年庆“七一”主题党日活动总结
2016/04/05 职场文书
windows安装python超详细图文教程
2021/05/21 Python
python实现学员管理系统(面向对象版)
2022/06/05 Python