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 相关文章推荐
prototype.js的Ajax对象
Sep 23 Javascript
一个基于jquery的图片切换效果
Jul 06 Javascript
基于Jquery的文字滚动跑马灯插件(一个页面多个滚动区)
Jul 26 Javascript
JavaScript代码复用模式详解
Nov 07 Javascript
VS2008中使用JavaScript调用WebServices
Dec 18 Javascript
总结Javascript中数组各种去重的方法
Oct 04 Javascript
详解Node.js:events事件模块
Nov 24 Javascript
JavaScript简单验证表单空值及邮箱格式的方法
Jan 20 Javascript
JS实现的简单图片切换功能示例【测试可用】
Feb 14 Javascript
vue2.0父子组件间通信的实现方法
Apr 19 Javascript
小白教程|一小时上手最流行的前端框架vue(推荐)
Apr 10 Javascript
Vue Object.defineProperty及ProxyVue实现双向数据绑定
Sep 02 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
PHP.MVC的模板标签系统(三)
2006/09/05 PHP
PHP处理excel cvs表格的方法实例介绍
2013/05/13 PHP
PHP网页游戏学习之Xnova(ogame)源码解读(十二)
2014/06/25 PHP
隐性调用php程序的方法
2015/06/13 PHP
php将远程图片保存到本地服务器的实现代码
2015/08/03 PHP
PHP版本升级到7.x后wordpress的一些修改及wordpress技巧
2015/12/25 PHP
zen cart实现订单中增加paypal中预留电话的方法
2016/07/12 PHP
来自qq的javascript面试题
2010/07/24 Javascript
读jQuery之二(两种扩展)
2011/06/11 Javascript
jquery果冻抖动效果实现方法
2015/01/15 Javascript
jQuery实现炫酷的鼠标轨迹特效
2015/02/01 Javascript
nodejs中的fiber(纤程)库详解
2015/03/24 NodeJs
jquery+css3实现网页背景花瓣随机飘落特效
2015/08/17 Javascript
javascript实现3D切换焦点图
2015/10/16 Javascript
jQuery+Ajax实现无刷新分页
2015/10/30 Javascript
jQuery EasyUI 页面加载等待及页面等待层
2017/02/06 Javascript
jQuery实现表格冻结顶栏效果
2017/08/20 jQuery
layui 富文本赋值,取值,取纯文本值的实例
2019/09/18 Javascript
vue.js实现双击放大预览功能
2020/06/23 Javascript
[14:50]2018DOTA2亚洲邀请赛开幕式
2018/04/03 DOTA
python在指定目录下查找gif文件的方法
2015/05/04 Python
详解python中的装饰器
2018/07/10 Python
python对矩阵进行转置的2种处理方法
2019/07/17 Python
Python操作MySQL数据库实例详解【安装、连接、增删改查等】
2020/01/17 Python
Python 写了个新型冠状病毒疫情传播模拟程序
2020/02/14 Python
Python 实现黑客帝国中的字符雨的示例代码
2020/02/20 Python
Html5 Canvas 实现一个“刮刮乐”游戏
2019/09/05 HTML / CSS
Under Armour安德玛荷兰官网:美国高端运动科技品牌
2019/07/10 全球购物
DataReader和DataSet的异同
2014/12/31 面试题
最经典的商业地产项目广告词
2014/03/13 职场文书
红头文件任命书范本
2014/06/05 职场文书
激励口号大全
2014/06/17 职场文书
大学生第一学年自我鉴定
2014/09/12 职场文书
先进个人推荐材料
2014/12/29 职场文书
总账会计岗位职责
2015/04/02 职场文书
Node实现搜索框进行模糊查询
2021/06/28 Javascript