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 相关文章推荐
javascript 对象比较实现代码
Apr 27 Javascript
对setInterval在火狐和chrome切换标签产生奇怪的效果之探索,与解决方案!
Oct 29 Javascript
javascript检测页面是否缩放的小例子
May 16 Javascript
jQuery实现带分组数据的Table表头排序实例分析
Nov 24 Javascript
学习JavaScript设计模式之享元模式
Jan 18 Javascript
浅谈js继承的实现及公有、私有、静态方法的书写
Oct 28 Javascript
JavaScript拖动层Div代码
Mar 01 Javascript
Vue 2.0 服务端渲染入门介绍
Mar 29 Javascript
图文讲解用vue-cli脚手架创建vue项目步骤
Feb 12 Javascript
JS求1到任意数之间的所有质数的方法详解
May 20 Javascript
微信小程序里引入SVG矢量图标的方法
Sep 20 Javascript
JavaScript计算正方形面积
Nov 26 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中字符串与多进制转换函数的实例代码
2016/11/03 PHP
PHP实现Huffman编码/解码的示例代码
2018/04/20 PHP
PHP goto语句用法实例
2019/08/06 PHP
一个挺有意思的Javascript小问题说明
2011/09/26 Javascript
js实现鼠标移到链接文字弹出一个提示层的方法
2015/05/11 Javascript
Reactjs实现通用分页组件的实例代码
2017/01/19 Javascript
JavaScript对象_动力节点Java学院整理
2017/06/23 Javascript
使用JavaScript实现一个小程序之99乘法表
2017/09/21 Javascript
JS随机排序数组实现方法分析
2017/10/11 Javascript
JS关于刷新页面的相关总结
2018/05/09 Javascript
详解vue中的computed的this指向问题
2018/12/05 Javascript
详解jquery和vue对比
2019/04/16 jQuery
JavaScript React如何修改默认端口号方法详解
2020/07/28 Javascript
[53:49]LGD vs Fnatic 2018国际邀请赛小组赛BO2 第二场 8.18
2018/08/19 DOTA
Python 拷贝对象(深拷贝deepcopy与浅拷贝copy)
2008/09/06 Python
Python中的yield浅析
2014/06/16 Python
python selenium 查找隐藏元素 自动播放视频功能
2019/07/24 Python
Python ADF 单位根检验 如何查看结果的实现
2020/06/03 Python
英国袜子店:Sock Shop
2017/01/11 全球购物
日本高岛屋百货购物网站:TAKASHIMAYA
2019/03/24 全球购物
印度排名第一的蛋糕、鲜花和礼品送货:Winni
2019/08/02 全球购物
Yahoo-PHP面试题1
2016/07/20 面试题
食堂员工工作职责
2013/12/18 职场文书
2014年情人节活动方案
2014/02/16 职场文书
正风肃纪剖析材料
2014/02/18 职场文书
电工技术比武方案
2014/05/11 职场文书
孝敬父母的活动方案
2014/08/28 职场文书
单位工作证明
2014/10/07 职场文书
小学班主任自我评价
2015/03/11 职场文书
员工升职自荐信
2015/03/27 职场文书
农业项目合作意向书
2015/05/08 职场文书
2015年企业员工工作总结范文
2015/05/21 职场文书
2015年青年教师工作总结
2015/05/25 职场文书
小学语文课《掌声》教学反思
2016/03/03 职场文书
公司致全体员工的感谢信
2019/06/24 职场文书
SpringBoot详解自定义Stater的应用
2022/07/15 Java/Android