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 相关文章推荐
splice slice区别
Oct 09 Javascript
Javascript中的数学函数集合
May 08 Javascript
js 关于=+与+=日期函数使用说明(赋值运算符)
Nov 15 Javascript
上传的js验证(图片/文件的扩展名)
Apr 25 Javascript
清除div下面的所有标签的方法
Feb 17 Javascript
jQuery .tmpl() 用法示例介绍
Aug 21 Javascript
jQuery中:disabled选择器用法实例
Jan 04 Javascript
JS通过ajax动态读取xml文件内容的方法
Mar 24 Javascript
JavaScript学习笔记之创建对象
Mar 25 Javascript
js实现移动端微信页面禁止字体放大
Feb 16 Javascript
vue实现消息的无缝滚动效果的示例代码
Dec 05 Javascript
使用jQuery实现购物车
Oct 29 jQuery
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
一个简单的php实现的MySQL数据浏览器
2007/03/11 PHP
解析wamp5下虚拟机配置文档
2013/06/27 PHP
html+javascript实现可拖动可提交的弹出层对话框效果
2013/08/05 Javascript
快速查找数组中的某个元素并返回下标示例
2013/09/03 Javascript
jQuery中extend函数的实现原理详解
2015/02/03 Javascript
浏览器中url存储的JavaScript实现
2015/07/07 Javascript
Angular中$compile源码分析
2016/01/28 Javascript
jquery checkbox无法用attr()二次勾选问题的解决方法
2016/07/22 Javascript
angular-ui-sortable实现可拖拽排序列表
2016/12/28 Javascript
jquery validation验证表单插件
2017/01/07 Javascript
Javascript ES6中对象类型Sets的介绍与使用详解
2017/07/17 Javascript
js实现日期显示的一些操作(实例讲解)
2017/07/27 Javascript
Node.js使用MySQL连接池的方法实例
2018/02/11 Javascript
Vue.js 十五分钟入门图文教程
2018/09/12 Javascript
Vue项目路由刷新的实现代码
2019/04/17 Javascript
jQuery 查找元素操作实例小结
2019/10/02 jQuery
vue之组件内监控$store中定义变量的变化详解
2019/11/08 Javascript
Python变量作用范围实例分析
2015/07/07 Python
python日期相关操作实例小结
2019/06/24 Python
python多进程间通信代码实例
2019/09/30 Python
Python时间差中seconds和total_seconds的区别详解
2019/12/26 Python
python有序查找算法 二分法实例解析
2020/02/18 Python
keras打印loss对权重的导数方式
2020/06/10 Python
Python基于yaml文件配置logging日志过程解析
2020/06/23 Python
HTML5 播放 RTSP 视频的实例代码
2019/07/29 HTML / CSS
ASOS英国官网:英国在线时装和化妆品零售商
2017/05/19 全球购物
trivago美国:全球最大的酒店价格比较网站
2018/01/18 全球购物
定制别致的瑜伽垫:Sugarmat
2019/06/21 全球购物
美国在线和移动免费会员制批发零售商:Boxed(移动端的Costco)
2020/01/02 全球购物
金士达面试非笔试
2012/03/14 面试题
Python中如何定义一个函数
2016/09/06 面试题
质量管理标语
2014/06/12 职场文书
2015年药房工作总结
2015/04/25 职场文书
2015年行政部工作总结
2015/04/28 职场文书
2016年学校党支部公开承诺书
2016/03/25 职场文书
2019年汽车租赁合同范本!
2019/08/12 职场文书