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 相关文章推荐
网站上面有这种切换效果
Jun 26 Javascript
javascript parseInt与Number函数的区别
Jan 21 Javascript
JS实现div内部的文字或图片自动循环滚动代码
Apr 19 Javascript
JQuery中clone方法复制节点
May 18 Javascript
bootstrap输入框组代码分享
Jun 07 Javascript
JS本地刷新返回上一页代码
Jul 25 Javascript
使用Vue.js创建一个时间跟踪的单页应用
Nov 28 Javascript
vue 实现 tomato timer(蕃茄钟)实例讲解
Jul 24 Javascript
JavaScript继承与多继承实例分析
May 26 Javascript
express express-session的使用小结
Dec 12 Javascript
JS 数组和对象的深拷贝操作示例
Jun 06 Javascript
vue 在服务器端直接修改请求的接口地址
Dec 19 Vue.js
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
PHP与服务器文件系统的简单交互
2016/10/21 PHP
PHP实现支持CURL字符串证书传输的方法
2019/03/23 PHP
jQuery帮助之CSS尺寸(五)outerHeight、outerWidth
2009/11/14 Javascript
完美兼容IE,chrome,ff的设为首页、加入收藏及保存到桌面js代码
2014/12/17 Javascript
js+css实现回到顶部按钮(back to top)
2016/03/02 Javascript
原生JS实现首页进度加载动画
2016/09/14 Javascript
Jquery Easyui分割按钮组件SplitButton使用详解(17)
2016/12/18 Javascript
bootstrap中的 form表单属性role=&quot;form&quot;的作用详解
2017/01/20 Javascript
COM组件中调用JavaScript函数详解及实例
2017/02/23 Javascript
Bootstrap Table使用整理(二)
2017/06/09 Javascript
Node.js中,在cmd界面,进入退出Node.js运行环境的方法
2018/05/12 Javascript
vue中keep-alive的用法及问题描述
2018/05/15 Javascript
node.js 模块和其下载资源的镜像设置的方法
2018/09/06 Javascript
JointJS流程图的绘制方法
2018/12/03 Javascript
JavaScript私有变量实例详解
2019/01/24 Javascript
VUE搭建手机商城心得和遇到的坑
2019/02/21 Javascript
vue-cli3+typescript初体验小结
2019/02/28 Javascript
NodeJs入门教程之定时器和队列
2019/03/08 NodeJs
JS计算两个数组的交集、差集、并集、补集(多种实现方式)
2019/05/21 Javascript
Node使用Nodemailer发送邮件的方法实现
2020/02/24 Javascript
vue 使用async写数字动态加载效果案例
2020/07/18 Javascript
js实现弹窗效果
2020/08/09 Javascript
解决element-ui里的下拉多选框 el-select 时,默认值不可删除问题
2020/08/14 Javascript
Vue+element-ui添加自定义右键菜单的方法示例
2020/12/08 Vue.js
[44:15]DOTA2上海特级锦标赛主赛事日 - 5 败者组决赛Liquid VS EG第二局
2016/03/06 DOTA
[48:28]完美世界DOTA2联赛循环赛FTD vs Magma第二场 10月30日
2020/10/31 DOTA
python 读写、创建 文件的方法(必看)
2016/09/12 Python
基于Python3.6+splinter实现自动抢火车票
2018/09/25 Python
python利用requests库模拟post请求时json的使用教程
2018/12/07 Python
CSS3线性渐变简单实现以及该属性在浏览器中的不同
2012/12/12 HTML / CSS
利用CSS3的线性渐变linear-gradient制作边框的示例
2016/06/02 HTML / CSS
旷工检讨书1000字
2015/01/01 职场文书
销售经理工作检讨书
2015/02/19 职场文书
升学宴家长答谢词
2015/09/29 职场文书
postgresql 删除重复数据案例详解
2021/08/02 PostgreSQL
Moment的feature导致线上bug解决分析
2022/09/23 Javascript