Javascript创建类和对象
现总结一下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中手动创建类数组对象
前言 关于什么是js的类数组对象这里不再赘述.可以参考这个链接,还有这里. js中类数组对象很多,概念简单的讲就是看上去像数组,又不是数组,可以使用数字下标方式访问又没有数组方法. 例: argume ...
- JS创建类和对象
JavaScript 创建类/对象的几种方式 在JS中,创建对象(Create Object)并不完全是我们时常说的创建类对象,JS中的对象强调的是一种复合类型,JS中创建对象及对对象的访问是极其灵活 ...
- JS创建类和对象(好多方法哟!)
http://www.cnblogs.com/tiwlin/archive/2009/08/06/1540161.html 这是别人写的~~~我借来看看 JavaScript 创建类/对象的几种方式 ...
- javascript创建类的6种方式
javascript创建类的7种方式 一 使用字面量创建 1.1 示例 var obj={}; 1.2 使用场景 比较适用于临时构建一个对象,且不关注该对象的类型,只用于临时封装一次数据,且不适合代码 ...
- JS创建类和对象,看完了,头就不大了
JavaScript 创建类/对象的几种方式 在JS中,创建对象(Create Object)并不完全是我们时常说的创建类对象,JS中的对象强调的是一种复合类型,JS中创建对象及对对象的访问是极其灵活 ...
- 扩展javascript扩展(类,对象,原型)
扩展javascript扩展(类,对象,原型)
- 1.面向过程编程 2.面向对象编程 3.类和对象 4.python 创建类和对象 如何使用对象 5.属性的查找顺序 6.初始化函数 7.绑定方法 与非绑定方法
1.面向过程编程 面向过程:一种编程思想在编写代码时 要时刻想着过程这个两个字过程指的是什么? 解决问题的步骤 流程,即第一步干什么 第二步干什么,其目的是将一个复杂的问题,拆分为若干的小的问题,按照 ...
- Python 面向对象(创建类和对象,面向对象的三大特性是指:封装、继承和多态,多态性)
概念: ...
- JavaScript 创建类/对象的几种方式
在JS中,创建对象(Create Object)并不完全是我们时常说的创建类对象,JS中的对象强调的是一种复合类型,JS中创建对象及对对象的访问是极其灵活的. JS对象是一种复合类型,它允许你通过变量 ...
随机推荐
- 将 JSP 中数组传递给 js
<% String[] name = { "w ", "a ", "n ", "g"}; % ...
- 浅谈css中单位px和em,rem的区别-转载
px是你屏幕设备物理上能显示出的最小的一个点,这个点不是固定宽度的,不同设备上点的长宽.比例有可能会不同.假设:你现在用的显示器上1px宽=1毫米,但我用的显示器1px宽=两毫米,那么你定义一个div ...
- 我从现象中学到的CSS
文字溢出隐藏 如果你观察过浮动元素,你会发现这样一个事实,当前一个元素将宽度占满以后,后一个元素就会往下掉,如下所示 代码如下 <style> div,p{ margin:0; } #bo ...
- 使用live555 在linux下搭建 rtsp server
系统环境 Debian 7 x64 / centos 7 x64 都可以 首先去下载源码 http://www.live555.com/liveMedia/public/live555-lates ...
- STM32学习笔记(五)——通用定时器计数延时
STM32定时器概述 STM32F40x系列总共最多有14个定时器,定时器分为三类:基本定时器.通用定时器和高级定时器.它们的都是通过计数来达到定时的目的,和51的定时器差不多,基本原理都是一样的,就 ...
- Virtualbox mac版centos7.2 安装共享文件夹
因为用的是mac本,在自己电脑上用virtualbox安装了centos7.2 虚拟机,为了实现与本机交换文件,需要用到贡享文件夹功能. 网上搜的时候多是windows版的,所以自己写一个mac版的. ...
- SSH框架搭建 详细图文教程
转载请标明原文地址 一.什么是SSH? SSH是JavaEE中三种框架(Struts+Spring+Hibernate)的集成框架,是目前比较流行的一种Java Web开源框架. SSH主要用于Jav ...
- Python中使用Mysql(安装篇)
准备工作 import MySQLdb Linux系统自带了Python,但并不是都有这个包,至少我每次拿到一台全新的服务器时候,都发现没有装这个包. 这个东西的下载地址是 http://source ...
- 使用 rsync 同步
原文地址 http://www.howtocn.org/rsync:use_rsync 选项 说明 -a, ––archive 归档模式,表示以递归方式传输文件,并保持所有文件属性,等价于 -rlpt ...
- 纯HTML课表
table标签构造课表 table标签常用于制作表格以及简单布局,于是我就玩了下table标签,用table标签也能构造出很漂亮的页面呢,虽然在博客页面加入与实际打开页面稍微有点出入,但还是可以接受的 ...