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 相关文章推荐
一个js的tab切换效果代码[代码分离]
Apr 11 Javascript
JQuery Dialog的内存泄露问题解决方法
Jun 18 Javascript
JavaScript给每一个li节点绑定点击事件的实现方法
Dec 01 Javascript
一个可复用的vue分页组件
May 15 Javascript
angularjs实现搜索的关键字在正文中高亮出来
Jun 13 Javascript
微信小程序tabBar底部导航中文注解api详解
Aug 16 Javascript
Vue.js与 ASP.NET Core 服务端渲染功能整合
Nov 16 Javascript
vue-cli2.9.3 详细教程
Apr 23 Javascript
原生JS实现的简单轮播图功能【适合新手】
Aug 17 Javascript
Layui多选只有最后一个值的解决方法
Sep 02 Javascript
如何通过javaScript去除字符串两端的空白字符
Feb 06 Javascript
js实现列表按字母排序
Aug 11 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缩放图片(根据宽高的等比例缩放)实例介绍
2013/06/09 PHP
php编写批量生成不重复的卡号密码代码
2015/05/14 PHP
php获取excel文件数据
2017/04/21 PHP
一页面多XMLHttpRequest对象
2007/01/22 Javascript
javascript Select标记中options操作方法集合
2008/10/22 Javascript
javascript 字符 Escape,encodeURI,encodeURIComponent
2009/07/09 Javascript
判断iframe是否加载完成的完美方法
2010/01/07 Javascript
Javascript公共脚本库系列(一): 弹出层脚本
2011/02/24 Javascript
javascript学习笔记(二) js一些基本概念
2012/06/18 Javascript
javascript实现禁止鼠标滚轮事件
2015/07/24 Javascript
js实现点击获取验证码倒计时效果
2021/01/28 Javascript
javascript验证手机号和实现星号(*)代替实例
2016/08/16 Javascript
JavaScript实现点击按钮复制指定区域文本(推荐)
2016/11/25 Javascript
微信小程序之数据双向绑定与数据操作
2017/05/12 Javascript
js+html5实现半透明遮罩层弹框效果
2020/08/24 Javascript
vue+Java后端进行调试时解决跨域问题的方式
2017/10/19 Javascript
原生JS+HTML5实现跟随鼠标一起流动的粒子动画效果
2018/05/03 Javascript
JS自定义右键菜单实现代码解析
2020/07/16 Javascript
[27:53]2014 DOTA2华西杯精英邀请赛 5 24 NewBee VS iG
2014/05/26 DOTA
Python中if elif else及缩进的使用简述
2018/05/31 Python
Pandas 按索引合并数据集的方法
2018/11/15 Python
python中强大的format函数实例详解
2018/12/05 Python
Python面向对象之类和实例用法分析
2019/06/08 Python
Windows上安装tensorflow  详细教程(图文详解)
2020/02/04 Python
Python叠加矩形框图层2种方法及效果
2020/06/18 Python
如何从csv文件构建Tensorflow的数据集
2020/09/21 Python
python切片作为占位符使用实例讲解
2021/02/17 Python
HTML5如何实现元素拖拽
2016/03/11 HTML / CSS
Scotch Porter官方网站:男士美容产品
2020/08/31 全球购物
*p++ 自增p 还是p所指向的变量
2016/07/16 面试题
Boolean b = new Boolean(“abcde”); 会编译错误码
2013/11/27 面试题
户外婚礼策划方案
2014/02/08 职场文书
鼓舞士气的口号
2014/06/16 职场文书
警察群众路线对照检查材料思想汇报
2014/10/01 职场文书
Python 内置函数速查表一览
2021/06/02 Python
python数字图像处理:图像简单滤波
2022/06/28 Python