JavaScript入门教程(12) js对象化编程


Posted in Javascript onJanuary 31, 2009

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之事件绑定
Jul 08 Javascript
解决自定义$(id)的方法与jquery选择器$冲突的问题
Jun 14 Javascript
jQuery+HTML5实现手机摇一摇换衣特效
Jun 05 Javascript
浅谈javascript的call()、apply()、bind()的用法
Feb 21 Javascript
微信js-sdk预览图片接口及从拍照或手机相册中选图接口用法示例
Oct 13 Javascript
五步轻松实现JavaScript HTML时钟效果
Mar 25 Javascript
JS正则表达式常见用法实例详解
Jun 19 Javascript
jQuery序列化form表单数据为JSON对象的实现方法
Sep 20 jQuery
angular 实现下拉列表组件的示例代码
Mar 09 Javascript
10种JavaScript最常见的错误(小结)
Jun 21 Javascript
vue 取出v-for循环中的index值实例
Nov 09 Javascript
Vue列表如何实现滚动到指定位置样式改变效果
May 09 Javascript
JavaScript入门教程(11) js事件处理
Jan 31 #Javascript
JavaScript入门教程(10) 认识其他对象
Jan 31 #Javascript
JavaScript入门教程(9) Document文档对象
Jan 31 #Javascript
JavaScript入门教程(8) Location地址对象
Jan 31 #Javascript
JavaScript入门教程(7) History历史对象
Jan 31 #Javascript
JavaScript入门教程(6) Window窗口对象
Jan 31 #Javascript
JavaScript入门教程(5) js Screen屏幕对象
Jan 31 #Javascript
You might like
thinkPHP简单导入和使用阿里云OSSsdk的方法
2017/03/15 PHP
解决IE下select标签innerHTML插入option的BUG(兼容IE,FF,Opera,Chrome,Safari)
2010/05/13 Javascript
jQuery UI AutoComplete 自动完成使用小记
2010/08/21 Javascript
jquery的ajax简单结构示例代码
2014/02/17 Javascript
jQuery+AJAX实现网页无刷新上传
2015/02/22 Javascript
JavaScript实现俄罗斯方块游戏过程分析及源码分享
2015/03/23 Javascript
jQuery实现自动调整字体大小的方法
2015/06/15 Javascript
javascript实现的淘宝旅行通用日历组件用法实例
2015/08/03 Javascript
javascript学习笔记整理(概述、变量、数据类型简介)
2015/10/25 Javascript
用jQuery旋转插件jqueryrotate制作转盘抽奖
2017/02/10 Javascript
使用Nodejs连接mongodb数据库的实现代码
2017/08/21 NodeJs
vue2.0 computed 计算list循环后累加值的实例
2018/03/07 Javascript
jQuery实现文件编码成base64并通过AJAX上传的方法
2018/04/12 jQuery
浅析Vue.js 中的条件渲染指令
2018/11/19 Javascript
微信小程序实现日期格式化和倒计时
2020/11/01 Javascript
layui实现根据table数据判断按钮显示情况的方法
2019/09/26 Javascript
vue实现一个6个输入框的验证码输入组件功能的实例代码
2020/06/29 Javascript
[01:00:26]Ti4主赛事胜者组第一天 EG vs NEWBEE 1
2014/07/19 DOTA
python中的字典详细介绍
2014/09/18 Python
python 信息同时输出到控制台与文件的实例讲解
2018/05/11 Python
python二进制文件的转译详解
2019/07/03 Python
Python如何使用队列方式实现多线程爬虫
2020/05/12 Python
Python xml、字典、json、类四种数据类型如何实现互相转换
2020/05/27 Python
基于PyTorch的permute和reshape/view的区别介绍
2020/06/18 Python
读取nii或nii.gz文件中的信息即输出图像操作
2020/07/01 Python
施华洛世奇日本官网:SWAROVSKI日本
2018/05/04 全球购物
俄罗斯大型在线书店:Читай-город
2019/10/10 全球购物
同步和异步有何异同,在什么情况下分别使用他们?
2012/12/28 面试题
机械制造专业个人的自我评价
2013/12/28 职场文书
2014年无财产无子女离婚协议书范本
2014/10/09 职场文书
关于拾金不昧的感谢信
2015/01/21 职场文书
教师个人学习总结
2015/02/11 职场文书
项目备案申请报告
2015/05/15 职场文书
开学季:喜迎新生,迎新标语少不了
2019/11/07 职场文书
基于Python实现的购物商城管理系统
2021/04/27 Python
Python socket如何解析HTTP请求内容
2022/02/12 Python