JavaScript中的对象化编程


Posted in Javascript onJanuary 16, 2008

关于对象化编程的语句 现在我们有实力学习以下关于对象化编程,但其实属于上一章的内容了。

with 语句 为一个或一组语句指定默认对象。

用法:
with (<对象>) <语句>;

with 语句通常用来缩短特定情形下必须写的代码量。在下面的例子中,请注意 Math 的重复使用:
x = Math.cos(3 * Math.PI) + Math.sin(Math.LN10);
y = Math.tan(14 * Math.E);

当使用 with 语句时,代码变得更短且更易读:
with (Math) {
  x = cos(3 * PI) + sin(LN10);
  y = tan(14 * E);
}

this 对象 返回“当前”对象。在不同的地方,this 代表不同的对象。如果在 JavaScript 的“主程序”中(不在任何 function 中,不在任何事件处理程序中)使用 this,它就代表 window 对象;如果在 with 语句块中使用 this,它就代表 with 所指定的对象;如果在事件处理程序中使用 this,它就代表发生事件的对象。

一个常用的 this 用法:
<script>
...
function check(formObj) {
  ...
}
...
</script>

<body ...>
...
<form ...>
...
<input type="text" ... onchange="check(this.form)">
...
</form>
...
</body>

这个用法常用于立刻检测表单输入的有效性。

自定义构造函数 我们已经知道,Array(),Image()等构造函数能让我们构造一个变量。其实我们自己也可以写自己的构造函数。自定义构造函数也是用 function。在 function 里边用 this 来定义属性。
function <构造函数名> [(<参数>)] {
  ...
  this.<属性名> = <初始值>;
  ...
}

然后,用 new 构造函数关键字来构造变量:
var <变量名> = new <构造函数名>[(<参数>)];

构造变量以后,<变量名>成为一个对象,它有它自己的属性——用 this 在 function 里设定的属性。

以下是一个从网上找到的搜集浏览器详细资料的自定义构造函数的例子:
function Is() {
  var agent = navigator.userAgent.toLowerCase();
  this.major = parseInt(navigator.appVersion);  //主版本号
  this.minor = parseFloat(navigator.appVersion);//全版本号
  this.ns = ((agent.indexOf('mozilla')!=-1) &&
             ((agent.indexOf('spoofer')==-1) && //是否 Netscape
              (agent.indexOf('compatible') == -1)));
  this.ns2 = (this.ns && (this.major == 3));    //是否 Netscape 2
  this.ns3 = (this.ns && (this.major == 3));    //是否 Netscape 3
  this.ns4b = (this.ns && (this.minor < 4.04)); //是否 Netscape 4 低版本
  this.ns4 = (this.ns && (this.major >= 4));    //是否 Netscape 4 高版本
  this.ie = (agent.indexOf("msie") != -1);      //是否 IE
  this.ie3 = (this.ie && (this.major == 2));    //是否 IE 3
  this.ie4 = (this.ie && (this.major >= 4));    //是否 IE 4
  this.op3 = (agent.indexOf("opera") != -1);    //是否 Opera 3
  this.win = (agent.indexOf("win")!=-1);        //是否 Windows 版本
  this.mac = (agent.indexOf("mac")!=-1);        //是否 Macintosh 版本
  this.unix = (agent.indexOf("x11")!=-1);       //是否 Unix 版本
}

var is = new Is();

这个构造函数非常完整的搜集了浏览器的信息。我们看到它为对象定义了很多个属性:major, minor, ns, ie, win, mac 等等。它们的意思见上面的注释。把 is 变量定义为 Is() 对象后,用 if (is.ns) 这种格式就可以很方便的知道浏览器的信息了。我们也可以从这个构造函数中看到,它也可以使用一般的 JavaScript 语句(上例中为 var 语句)。

让我们再来看一个使用参数的构造函数:
function myFriend(theName, gender, theAge, birthOn, theJob) {
  this.name = theName;
  this.isMale = (gender.toLowerCase == 'male');
  this.age = theAge;
  this.birthday = new Date(birthOn);
  this.job = theJob
}

var Stephen = new myFriend('Stephen', 'Male', 18, 'Dec 22, 1982', 'Student');

从这个构造函数我们不但看到了参数的用法,还看到了不同的属性用不同的数据型是可以的(上例五个属性分别为:字符串,布尔值,数字,日期,字符串),还看到了构造函数里也可以用构造函数来“构造”属性。如果用了足够的“保护措施”来避免无限循环,更可以用构造函数自身来构造自己的属性。

Javascript 相关文章推荐
JavaScript高级程序设计(第3版)学习笔记3 js简单数据类型
Oct 11 Javascript
jquery拖动插件(jquery.drag)使用介绍
Jun 18 Javascript
js 时间函数应用加、减、比较、格式转换的示例代码
Aug 23 Javascript
JS复制内容到剪切板的实例代码(兼容IE与火狐)
Nov 19 Javascript
利用jQuery实现可以编辑的表格
May 26 Javascript
js实现文本框输入文字个数限制代码
Dec 25 Javascript
JS实现网页抢购功能(触发,终止脚本)
Nov 27 Javascript
详解vue-cli 本地开发mock数据使用方法
May 29 Javascript
JavaScript使用indexOf()实现数组去重的方法分析
Sep 04 Javascript
ztree加载完成后显示勾选节点的实现代码
Oct 22 Javascript
Mint UI实现A-Z字母排序的城市选择列表
Dec 28 Javascript
bootstrap-treeview实现多级树形菜单 后台JSON格式如何组织?
Jul 26 Javascript
JavaScript中的事件处理
Jan 16 #Javascript
JavaScript中的其他对象
Jan 16 #Javascript
JavaScript中的Document文档对象
Jan 16 #Javascript
JavaScript中的Location地址对象
Jan 16 #Javascript
JavaScript中的History历史对象
Jan 16 #Javascript
JavaScript中的Window窗口对象
Jan 16 #Javascript
JavaScript中的Screen屏幕对象
Jan 16 #Javascript
You might like
一条久听不愿放下的DIY森海MX500,三言两语话神奇
2021/03/02 无线电
自动跳转中英文页面
2006/10/09 PHP
上传多个文件的PHP脚本
2006/11/26 PHP
控制PHP的输出:缓存并压缩动态页面
2013/06/11 PHP
php生成随机数的三种方法
2014/09/10 PHP
Yii框架中memcache用法实例
2014/12/03 PHP
PHP常用正则表达式精选(推荐)
2019/05/28 PHP
一个js实现的所谓的滑动门
2007/05/23 Javascript
js jquery验证银行卡号信息正则学习
2013/01/21 Javascript
js闭包所用的场合以及优缺点分析
2015/06/22 Javascript
如何使用jQuery技术开发ios风格的页面导航菜单
2015/07/29 Javascript
JavaScript设计模式经典之工厂模式
2016/02/24 Javascript
AngularJS 与Bootstrap实现表格分页实例代码
2016/10/14 Javascript
使用Bootstrap Tabs选项卡Ajax加载数据实现
2016/12/23 Javascript
nodejs multer实现文件上传与下载
2017/05/10 NodeJs
详解Vue 开发模式下跨域问题
2017/06/06 Javascript
vue滚动轴插件better-scroll使用详解
2017/10/17 Javascript
微信小程序中的video视频实现 自定义播放按钮、封面图、视频封面上文案
2020/01/02 Javascript
python基础教程之lambda表达式使用方法
2014/02/12 Python
Python基于time模块求程序运行时间的方法
2017/09/18 Python
详解tensorflow训练自己的数据集实现CNN图像分类
2018/02/07 Python
15行Python代码带你轻松理解令牌桶算法
2018/03/21 Python
Python pygorithm模块用法示例【常见算法测试】
2018/08/16 Python
python时间序列按频率生成日期的方法
2019/05/14 Python
python内置函数sorted()用法深入分析
2019/10/08 Python
Python netmiko模块的使用
2020/02/14 Python
如何在django中运行scrapy框架
2020/04/22 Python
python实现移动木板小游戏
2020/10/09 Python
分享全球十款超强HTML5开发工具
2014/05/14 HTML / CSS
中文专业学生自我评价范文
2014/02/06 职场文书
入党思想汇报怎么写
2014/04/03 职场文书
组工干部对照检查材料
2014/08/25 职场文书
护理专业自荐信范文
2015/03/06 职场文书
创业计划书之个人工作室
2019/08/22 职场文书
超级实用!五步法则,教你写好年终工作总结
2019/12/05 职场文书
MySQL令人大跌眼镜的隐式转换
2021/08/23 MySQL