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 相关文章推荐
同一个表单 根据要求递交到不同页面的实现方法小结
Aug 05 Javascript
MC Dialog js弹出层 完美兼容多浏览器(5.6更新)
May 06 Javascript
jquery异步循环获取功能实现代码
Sep 19 Javascript
点击A元素触发B元素的事件在IE8下会识别成A元素
Sep 04 Javascript
javascript跨域原因以及解决方案分享
Apr 08 Javascript
javascript+ajax实现产品页面加载信息
Jul 09 Javascript
JavaScript+CSS实现仿Mootools竖排弹性动画菜单效果
Oct 14 Javascript
js与jquery正则验证电子邮箱、手机号、邮政编码的方法
Jul 04 Javascript
React-router v4 路由配置方法小结
Aug 08 Javascript
用Axios Element实现全局的请求loading的方法
Mar 15 Javascript
解决vue的变量在settimeout内部效果失效的问题
Aug 30 Javascript
js module大战
Apr 19 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漏洞小结
2012/02/05 PHP
PHP 中关于ord($str)&amp;gt;0x80的详细说明
2012/09/23 PHP
PHP解密Unicode及Escape加密字符串
2015/05/17 PHP
PHP中异常处理的一些方法整理
2015/07/03 PHP
javascript new 需不需要继续使用
2009/07/02 Javascript
获取HTML DOM节点元素的方法的总结
2009/08/21 Javascript
javascript动画之圆形运动,环绕鼠标运动作小球
2010/07/20 Javascript
jquery.combobox中文api和例子,修复了上面的小bug
2011/03/28 Javascript
iframe实用操作锦集
2014/04/22 Javascript
Jquery搜索父元素操作方法
2015/02/10 Javascript
分享12个实用的jQuery代码片段
2016/03/09 Javascript
使用struts2+Ajax+jquery验证用户名是否已被注册
2016/03/22 Javascript
jQuery实现按钮点击遮罩加载及处理完后恢复的效果
2016/06/07 Javascript
JavaScript面向对象编写购物车功能
2016/08/19 Javascript
Vue 固定头 固定列 点击表头可排序的表格组件
2016/11/25 Javascript
bootstrapValidator 重新启用提交按钮的方法
2017/02/20 Javascript
解决Vue.js 2.0 有时双向绑定img src属性失败的问题
2018/03/14 Javascript
webpack+vue-cil中proxyTable处理跨域的方法
2018/07/20 Javascript
vue实现todolist功能、todolist组件拆分及todolist的删除功能
2019/04/11 Javascript
Vue.extend实现挂载到实例上的方法
2019/05/01 Javascript
JS 创建对象的模式实例小结
2020/04/28 Javascript
Nuxt 项目性能优化调研分析
2020/11/07 Javascript
Python中super的用法实例
2015/05/28 Python
Python cookbook(数据结构与算法)通过公共键对字典列表排序算法示例
2018/03/15 Python
Python 3.x基于Xml数据的Http请求方法
2018/12/28 Python
Python基础之高级变量类型实例详解
2020/01/03 Python
Python图像阈值化处理及算法比对实例解析
2020/06/19 Python
通俗易懂了解Python装饰器原理
2020/09/17 Python
amazeui 验证按钮扩展的实现
2020/08/21 HTML / CSS
Roxy俄罗斯官方网站:冲浪和滑雪板的一切
2020/06/20 全球购物
编写一个类体现构造,公有,私有方法,静态,私有变量
2013/08/10 面试题
农药学硕士毕业生自荐信
2013/09/25 职场文书
新闻系毕业生推荐信
2013/11/16 职场文书
大学生自荐信
2013/12/11 职场文书
建筑班组长岗位职责
2014/01/02 职场文书
婚宴邀请函
2015/01/30 职场文书