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 相关文章推荐
在js中单选框和复选框获取值的方式
Nov 06 Javascript
基于JavaScript实现移动端TAB触屏切换效果
Oct 20 Javascript
基于Jquery和html5实现炫酷的3D焦点图动画
Mar 02 Javascript
angular源码学习第一篇 setupModuleLoader方法
Oct 20 Javascript
浅析JavaScript中作用域和作用域链
Dec 06 Javascript
JavaScript实现实时更新系统时间的实例代码
Apr 04 Javascript
jQuery md5加密插件jQuery.md5.js用法示例
Aug 24 jQuery
Vue-cli3.x + axios 跨域方案踩坑指北
Jul 04 Javascript
layui内置模块layim发送图片添加加载动画的方法
Sep 23 Javascript
微信小程序自定义弹出层效果
May 26 Javascript
vue 手机物理监听键+退出提示代码
Sep 09 Javascript
Vue中用JSON实现刷新界面不影响倒计时
Oct 26 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
动态网站web开发 PHP、ASP还是ASP.NET
2006/10/09 PHP
PHP Session_Regenerate_ID函数双释放内存破坏漏洞
2011/01/27 PHP
PHP人民币金额转大写实例代码
2015/10/02 PHP
php使用PDO下exec()函数查询执行后受影响行数的方法
2017/03/28 PHP
繁简字转换功能
2006/07/19 Javascript
JQuery中的$.getJSON 使用说明
2011/03/10 Javascript
js 分页全选或反选标识实现代码
2011/08/09 Javascript
jQuery学习笔记(1)--用jQuery实现异步通信(用json传值)具体思路
2013/04/08 Javascript
JavaScript获取图片的原始尺寸以宽度为例
2014/05/04 Javascript
javascript中为某个元素指定事件的三种方式
2014/08/07 Javascript
运行Node.js的IIS扩展iisnode安装配置笔记
2015/03/02 Javascript
JavaScript DOM进阶方法
2015/04/13 Javascript
AngularJS 模型详细介绍及实例代码
2016/07/27 Javascript
移动端日期插件Mobiscroll.js使用详解
2016/12/19 Javascript
Javascript实现找不同色块的游戏
2017/07/17 Javascript
jquery插件canvaspercent.js实现百分比圆饼效果
2017/07/18 jQuery
bootstrap模态框弹出和隐藏,动态改变中间内容的实例
2018/08/10 Javascript
使用Node搭建reactSSR服务端渲染架构
2018/08/30 Javascript
vue分页器组件编写方法详解
2019/06/28 Javascript
go和python调用其它程序并得到程序输出
2014/02/10 Python
python通过yield实现数组全排列的方法
2015/03/18 Python
python实现爬取千万淘宝商品的方法
2015/06/30 Python
通过mod_python配置运行在Apache上的Django框架
2015/07/22 Python
python reduce 函数使用详解
2017/12/05 Python
python range()函数取反序遍历sequence的方法
2018/06/25 Python
python pyg2plot的原理知识点总结
2021/02/28 Python
10 套华丽的CSS3 按钮小结
2012/10/03 HTML / CSS
全球知名旅游社区法国站点:TripAdvisor法国
2016/08/03 全球购物
Java基础面试题
2012/11/02 面试题
工商管理系学生的自我评价分享
2013/11/29 职场文书
关于环保的建议书
2014/05/12 职场文书
厕所文明标语
2014/06/11 职场文书
课外访万家心得体会
2014/09/03 职场文书
落实八项规定专题民主生活会对照检查材料
2014/09/15 职场文书
银行先进个人总结
2015/02/15 职场文书
三八节活动简报
2015/07/20 职场文书