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 类
Nov 07 Javascript
Javascript Select操作大集合
May 26 Javascript
Js冒泡事件详解及阻止示例
Mar 21 Javascript
详谈jQuery中的this和$(this)
Nov 13 Javascript
jquery中用函数来设置css样式
Dec 22 Javascript
微信小程序Server端环境配置详解(SSL, Nginx HTTPS,TLS 1.2 升级)
Jan 12 Javascript
vue项目中应用ueditor自定义上传按钮功能
Apr 27 Javascript
微信小程序上传图片实例
May 28 Javascript
vue scroll滚动判断的实现(是否滚动到底部、滚动方向、滚动节流、获取滚动区域dom元素)
Jun 11 Javascript
vue-cli打包后本地运行dist文件中的index.html操作
Aug 12 Javascript
解决vant框架做H5时踩过的坑(下拉刷新、上拉加载等)
Nov 11 Javascript
JavaScript模拟实现网易云轮播效果
Apr 04 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中批量生成静态html(命令行下运行PHP)
2014/04/19 PHP
php生成QRcode实例
2014/09/22 PHP
php上传大文件设置方法
2016/04/14 PHP
PHP超低内存遍历目录文件和读取超大文件的方法
2019/05/01 PHP
jquery下json数组的操作实现代码
2010/08/09 Javascript
11款新鲜的jQuery插件[附所有demo下载]
2011/01/24 Javascript
关于URL中的特殊符号使用介绍
2011/11/03 Javascript
Array.prototype.concat不是通用方法反驳[译]
2012/09/20 Javascript
javascript分页代码实例分享(js分页)
2013/12/13 Javascript
jQuery基本选择器(实例及表单域value的获取方法)
2016/05/20 Javascript
angular实现商品筛选功能
2017/02/01 Javascript
javascript实现动态显示颜色块的报表效果
2017/04/10 Javascript
原生js FileReader对象实现图片上传本地预览效果
2020/03/27 Javascript
JS实现的简单表单验证功能完整实例
2017/10/14 Javascript
编写React组件项目实践分析
2018/03/04 Javascript
使用D3.js构建实时图形的示例代码
2018/08/28 Javascript
解决VUE双向绑定失效的问题
2019/10/29 Javascript
Node 模块原理与用法详解
2020/05/13 Javascript
JavaScript this关键字的深入详解
2021/01/14 Javascript
[50:22]完美盛典-2018年度红毯走秀
2018/12/16 DOTA
Python实现向QQ群成员自动发邮件的方法
2014/11/19 Python
python定向爬虫校园论坛帖子信息
2018/07/23 Python
对python中矩阵相加函数sum()的使用详解
2019/01/28 Python
对IPython交互模式下的退出方法详解
2019/02/16 Python
pyqt5 使用cv2 显示图片,摄像头的实例
2019/06/27 Python
简单了解django索引的相关知识
2019/07/17 Python
使用Pyhton集合set()实现成果查漏的例子
2019/11/24 Python
python类中super() 的使用解析
2019/12/19 Python
python shutil文件操作工具使用实例分析
2019/12/25 Python
python实现简单俄罗斯方块
2020/03/13 Python
平面设计师的工作职责
2013/11/21 职场文书
机关道德讲堂实施方案
2014/03/15 职场文书
宣传口号大全
2014/06/16 职场文书
我对PyTorch dataloader里的shuffle=True的理解
2021/05/20 Python
总结Python使用过程中的bug
2021/06/18 Python
SQL Server作业失败:无法确定所有者是否有服务器访问权限的解决方法
2021/06/30 SQL Server