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 相关文章推荐
基于jQuery的输入框在光标位置插入内容, 并选中
Oct 29 Javascript
Node.js开发指南中的简单实例(mysql版)
Sep 17 Javascript
JS兼容浏览器的导出Excel(CSV)文件的方法
May 03 Javascript
javascript中call,apply,bind的用法对比分析
Feb 12 Javascript
JS中的THIS和WINDOW.EVENT.SRCELEMENT详解
May 25 Javascript
JavaScript实现快速排序的方法
Jul 31 Javascript
AngularJS入门之动画
Jul 27 Javascript
JS实现的五级联动菜单效果完整实例
Feb 23 Javascript
详解AngularJS 模块化
Jun 14 Javascript
AngularJS中ng-class用法实例分析
Jul 06 Javascript
JS非行间样式获取函数的实例代码
Jun 05 Javascript
图文详解vue框架安装步骤
Feb 12 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
PHP 代码规范小结
2012/03/08 PHP
PHP过滤黑名单关键字的方法
2014/12/01 PHP
php生成二维码时出现中文乱码的解决方法
2014/12/18 PHP
PHP实现对文件锁进行加锁、解锁操作的方法
2017/07/04 PHP
收集的网上用的ajax之chat.js文件
2007/04/08 Javascript
基于jquery的鼠标拖动效果代码
2012/05/30 Javascript
js修改input的type属性及浏览器兼容问题探讨与解决
2013/01/23 Javascript
JS代码同步文本框内容的实例方法
2013/07/12 Javascript
javascript删除数组元素并且数组长度减小的简单实例
2014/02/14 Javascript
javascript检查浏览器是否支持flash的实现代码
2014/08/14 Javascript
JavaScript中的数组操作介绍
2014/12/30 Javascript
jquery使用ul模拟select实现表单美化的方法
2015/08/18 Javascript
跟我学习javascript的undefined与null
2015/11/17 Javascript
jQuery旋转木马式幻灯片轮播特效
2015/12/04 Javascript
使用JS读取XML文件的方法
2016/11/25 Javascript
浅谈AngularJS中$http服务的简单用法
2018/05/15 Javascript
让webpack+vue-cil项目不再自动打开浏览器的方法
2018/09/27 Javascript
JS学习笔记之闭包小案例分析
2019/05/29 Javascript
vue data引入本地图片的两种方式小结
2019/11/13 Javascript
JavaScript或jQuery 获取option value值方法解析
2020/05/12 jQuery
antd Select下拉菜单动态添加option里的内容操作
2020/11/02 Javascript
Vue 解决在element中使用$notify在提示信息中换行问题
2020/11/11 Javascript
python fabric使用笔记
2015/05/09 Python
python中requests爬去网页内容出现乱码问题解决方法介绍
2017/10/25 Python
sublime python3 输入换行不结束的方法
2018/04/19 Python
深入了解Django中间件及其方法
2019/07/26 Python
瑜伽国际:Yoga International
2018/04/18 全球购物
日本乐天德国站:Rakuten.de
2019/05/16 全球购物
Solid & Striped官网:美国泳装品牌
2019/06/19 全球购物
高中军训感言200字
2014/02/23 职场文书
梅花魂教学反思
2014/04/25 职场文书
优秀员工事迹材料
2014/12/20 职场文书
学生病假条怎么写
2015/08/17 职场文书
导游词之江苏同里古镇
2019/11/18 职场文书
mysql数据库入门第一步之创建表
2021/05/14 MySQL
mysql 如何获取两个集合的交集/差集/并集
2021/06/08 MySQL