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 ThickBox插件使用心得(不建议使用)
Sep 08 Javascript
JavaScript 函数惰性载入的实现及其优点介绍
Aug 12 Javascript
js获取指定日期前后的日期代码
Aug 20 Javascript
使用js简单实现了tree树菜单
Nov 20 Javascript
javascript学习笔记(五)原型和原型链详解
Oct 08 Javascript
JS实现的左侧竖向滑动菜单效果代码
Oct 19 Javascript
JavaScript编写点击查看大图的页面半透明遮罩层效果实例
May 09 Javascript
JS中跨页面调用变量和函数的方法(例如a.js 和 b.js中互相调用)
Nov 01 Javascript
详解vue中computed 和 watch的异同
Jun 30 Javascript
javaScript动态添加Li元素的实例
Feb 24 Javascript
Koa 使用小技巧(小结)
Oct 22 Javascript
vue.js实现只能输入数字的输入框
Oct 19 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查看session内容的函数
2008/08/27 PHP
php xml实例 留言本
2009/03/20 PHP
php adodb连接mssql解决乱码问题
2009/06/12 PHP
php两种无限分类方法实例
2015/04/21 PHP
php自定义函数br2nl实现将html中br换行符转换为文本输入中换行符的方法【与函数nl2br功能相反】
2017/02/17 PHP
laravel中Redis队列监听中断的分析
2020/09/14 PHP
Aliyun Linux 编译安装 php7.3 tengine2.3.2 mysql8.0 redis5的过程详解
2020/10/20 PHP
js点击页面其它地方将某个显示的DIV隐藏
2012/07/12 Javascript
jquery根据属性和index来查找属性值并操作
2014/07/25 Javascript
JavaScript模块规范之AMD规范和CMD规范
2015/10/27 Javascript
详解页面滚动值scrollTop在FireFox与Chrome浏览器间的兼容问题
2015/12/03 Javascript
JavaScript中数组添加值和访问值常见问题
2016/02/06 Javascript
通过BootStrap实现轮播图的实际应用
2016/09/26 Javascript
微信小程序 解决请求服务器手机预览请求不到数据的方法
2017/01/04 Javascript
详解VUE的状态控制与延时加载刷新
2017/03/27 Javascript
JavaScript输入框字数实时统计更新
2017/06/17 Javascript
JS实现碰撞检测的方法分析
2018/01/19 Javascript
Vue表单类的父子组件数据传递示例
2018/05/03 Javascript
Vue动画事件详解及过渡动画实例
2019/02/09 Javascript
详解express使用vue-router的history踩坑
2019/06/05 Javascript
全网小程序接口请求封装实例代码
2020/11/06 Javascript
python实现对csv文件的列的内容读取
2018/07/04 Python
详解使用HTML5的classList属性操作CSS类
2017/10/13 HTML / CSS
HTML5中原生的右键菜单创建方法
2016/06/28 HTML / CSS
Otel.com:折扣酒店预订
2017/08/24 全球购物
Baby Tulai澳大利亚:美国婴儿背带品牌
2018/10/15 全球购物
为什么需要版本控制
2016/10/28 面试题
便利店投资的创业计划书
2014/01/12 职场文书
庆六一文艺汇演活动方案
2014/08/26 职场文书
华山导游词
2015/02/03 职场文书
南湾猴岛导游词
2015/02/09 职场文书
环卫工人慰问信
2015/02/15 职场文书
社会实践心得体会范文
2016/01/14 职场文书
初中政治教学反思
2016/02/23 职场文书
2016学校先进党组织事迹材料
2016/02/29 职场文书
HTML5页面音频自动播放的实现方式
2021/06/21 HTML / CSS