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利用apply和arguments复用方法
Nov 25 Javascript
javascript遍历控件实例详细解析
Jan 10 Javascript
JS判断客户端是手机还是PC的2个代码
Apr 12 Javascript
使用delegate方法为一个tr标签加一个链接
Jun 27 Javascript
vue2.0全局组件之pdf详解
Jun 26 Javascript
基于ExtJs在页面上window再调用Window的事件处理方法
Jul 26 Javascript
基于Vue自定义指令实现按钮级权限控制思路详解
May 23 Javascript
vue.js计算属性computed用法实例分析
Jul 06 Javascript
jQuery实现的页面弹幕效果【测试可用】
Aug 17 jQuery
在vue中使用v-bind:class的选项卡方法
Sep 27 Javascript
详解微信小程序实现跑马灯效果(附完整代码)
Apr 29 Javascript
微信小程序实现的picker多级联动功能示例
May 23 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 使用pcntl和libevent 实现Timer功能
2013/10/27 PHP
php比较两个字符串长度的方法
2015/07/13 PHP
WordPress中Gravatar头像缓存到本地及相关优化的技巧
2015/12/19 PHP
WordPress中用于创建以及获取侧边栏的PHP函数讲解
2015/12/29 PHP
PHP开发的微信现金红包功能示例
2017/06/29 PHP
php获取目录下所有文件及目录(多种方法)(推荐)
2019/05/14 PHP
php查看一个变量的占用内存的实例代码
2020/03/29 PHP
动态创建script在IE中缓存js文件时导致编码的解决方法
2014/05/04 Javascript
require.js深入了解 require.js特性介绍
2014/09/04 Javascript
bootstrap datepicker 与bootstrapValidator同时使用时选择日期后无法正常触发校验的解决思路
2016/09/28 Javascript
codeMirror插件使用讲解
2017/01/16 Javascript
bootstrap table 数据表格行内修改的实现代码
2017/02/13 Javascript
Vue.js学习记录之在元素与template中使用v-if指令实例
2017/06/27 Javascript
JS库之Waypoints的用法详解
2017/09/13 Javascript
深入理解Node内建模块和对象
2019/03/12 Javascript
图解JS原型和原型链实现原理
2020/09/15 Javascript
python snownlp情感分析简易demo(分享)
2017/06/04 Python
在python中pandas读文件,有中文字符的方法
2018/12/12 Python
Python 学习教程之networkx
2019/04/15 Python
Python实现字典按key或者value进行排序操作示例【sorted】
2019/05/03 Python
pandas中的series数据类型详解
2019/07/06 Python
安装多个版本的TensorFlow的方法步骤
2020/04/21 Python
Keras 数据增强ImageDataGenerator多输入多输出实例
2020/07/03 Python
html5 学习简单的拾色器
2010/09/03 HTML / CSS
windeln官方海外旗舰店:德淘超人气母婴超市
2017/12/15 全球购物
物流管理专业大学生自荐信
2013/10/04 职场文书
制冷与电控专业应届生求职信
2013/11/11 职场文书
会计出纳岗位职责
2013/12/25 职场文书
倡议书格式
2014/04/14 职场文书
学校安全防火方案
2014/06/07 职场文书
宣传标语大全
2014/07/01 职场文书
《中国梦我的梦》大学生演讲稿
2014/08/20 职场文书
关于安全的广播稿
2014/10/23 职场文书
银行求职自荐信范文
2015/03/04 职场文书
建党伟业观后感
2015/06/01 职场文书
Tomcat弱口令复现及利用
2022/05/06 Servers