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 相关文章推荐
浅谈tudou土豆网首页图片延迟加载的效果
Jun 23 Javascript
jquery异步调用页面后台方法&amp;#8207;(asp.net)
Mar 01 Javascript
Javascript创建自定义对象 创建Object实例添加属性和方法
Jun 04 Javascript
js获取元素到文档区域document的(横向、纵向)坐标的两种方法
May 17 Javascript
JS制作手机端自适应缩放显示
Jun 11 Javascript
js格式化输入框内金额、银行卡号
Feb 01 Javascript
javascript瀑布流式图片懒加载实例解析与优化
Feb 23 Javascript
JS实现520 表白简单代码
May 21 Javascript
使用vue-infinite-scroll实现无限滚动效果
Jun 22 Javascript
vue项目部署到Apache服务器中遇到的问题解决
Aug 24 Javascript
vue引入axios同源跨域问题
Sep 27 Javascript
jQuery+ajax实现用户登录验证
Sep 13 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
《雄兵连》系列首部大电影《烈阳天道》:可能是因为期望值太高了
2020/08/18 国漫
ThinkPHP在新浪SAE平台的部署实例
2014/10/31 PHP
PHP读取txt文本文件并分页显示的方法
2015/03/11 PHP
php实现用于验证所有类型的信用卡类
2015/03/24 PHP
php日期操作技巧小结
2016/06/25 PHP
PHP通过调用新浪API生成t.cn格式短网址链接的方法详解
2019/02/20 PHP
PHP函数积累总结
2019/03/19 PHP
PHP快速导出百万级数据到CSV或者EXCEL文件
2020/11/27 PHP
javascript 当前日期加(天、周、月、年)
2009/08/09 Javascript
JS实现可编辑的后台管理菜单功能【附demo源码下载】
2016/09/13 Javascript
jQuery如何解决IE输入框不能输入的问题
2016/10/08 Javascript
node.js入门学习之url模块
2017/02/25 Javascript
关于foreach循环中遇到的问题小结
2017/05/08 Javascript
AngularJS实现的回到顶部指令功能实例
2017/05/17 Javascript
VueJs组件prop验证简单介绍
2017/09/12 Javascript
react-native-fs实现文件下载、文本存储的示例代码
2017/09/22 Javascript
nodejs实现简单的gulp打包
2017/12/21 NodeJs
vue移动端UI框架实现QQ侧边菜单组件
2018/03/09 Javascript
JavaScript数组方法的错误使用例子
2018/09/13 Javascript
JavaScript中的this/call/apply/bind的使用及区别
2020/03/06 Javascript
python单链表实现代码实例
2013/11/21 Python
跟老齐学Python之玩转字符串(2)
2014/09/14 Python
详解python进行mp3格式判断
2016/12/23 Python
python自定义线程池控制线程数量的示例
2019/02/22 Python
Python函数基础实例详解【函数嵌套,命名空间,函数对象,闭包函数等】
2019/03/30 Python
python和go语言的区别是什么
2020/07/20 Python
药学专业大学生自荐信
2013/09/28 职场文书
战友聚会邀请函
2014/01/18 职场文书
采购助理岗位职责
2014/02/16 职场文书
酒店管理求职信范文
2014/04/06 职场文书
小学二年级学生评语
2014/04/21 职场文书
土建专业毕业生自荐书
2014/07/04 职场文书
领导干部群众路线对照检查材料
2014/11/05 职场文书
2016年端午节寄语
2015/12/04 职场文书
同学联谊会邀请函
2019/06/24 职场文书
详解Java实现设计模式之责任链模式
2021/06/23 Java/Android