JavaScript入门教程(12) js对象化编程_基础知识

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');

从这个构造函数我们不但看到了参数的用法,还看到了不同的属性用不同的数据型是可以的(上例五个属性分别为:字符串,布尔值,数字,日期,字符串),还看到了构造函数里也可以用构造函数来“构造”属性。如果用了足够的“保护措施”来避免无限循环,更可以用构造函数自身来构造自己的属性。

时间: 2025-01-20 19:52:06

JavaScript入门教程(12) js对象化编程_基础知识的相关文章

JavaScript入门教程(4) js浏览器对象_基础知识

更详细的信息可以去查msdn或者Navigator 2.0以后的说明文档,这里我们之做个简单的说明 包括一下几大属性: appCodeName 返回浏览器的"码名"(?),流行的 IE 和 NN 都返回 'Mozilla'. 下面的例子显示了 appCodeName 属性的值: document.write("navigator.appCodeName 的值是" + navigator.appCodeName) appName 返回浏览器名.IE 返回 'Micro

JavaScript入门教程(10) 认识其他对象_基础知识

anchors[]; links[]; Link 连接对象用法:document.anchors[[x]]; document.links[[x]]; <anchorId>; <linkId> document.anchors 是一个数组,包含了文档中所有锚标记(包含 name 属性的<a>标记),按照在文档中的次序,从 0 开始给每个锚标记定义了一个下标. document.links 也是一个数组,包含了文档中所有连接标记(包含 href 属性的<a>标

JavaScript中的对象化编程_基础知识

关于对象化编程的语句 现在我们有实力学习以下关于对象化编程,但其实属于上一章的内容了. with 语句 为一个或一组语句指定默认对象. 用法: with (<对象>) <语句>; with 语句通常用来缩短特定情形下必须写的代码量.在下面的例子中,请注意 Math 的重复使用: x = Math.cos(3 * Math.PI) + Math.sin(Math.LN10); y = Math.tan(14 * Math.E); 当使用 with 语句时,代码变得更短且更易读: wi

Javascript入门学习资料收集整理篇_基础知识

Javascript入门学习第一篇 js基础Javascript入门学习第二篇 js类型Javascript入门学习第三篇 js运算Javascript入门学习第四篇 js对象和数组Javascript入门学习第五篇 js函数Javascript入门学习第六篇 js DOM编程Javascript入门学习第七篇 js dom实例操作Javascript入门学习第八篇 js dom节点属性说明Javascript入门学习第九篇 Javascript DOM 总结jQuery基础教程笔记适合js新手

THREE.JS入门教程(3)着色器-下_基础知识

译序 Three.js是一个伟大的开源WebGL库,WebGL允许JavaScript操作GPU,在浏览器端实现真正意义的3D.但是目前这项技术还处在发展阶段,资料极为匮乏,爱好者学习基本要通过Demo源码和Three.js本身的源码来学习. .简介 这是WebGL着色器教程的后半部分,如果你没看过前一篇,阅读这一篇教程可能会使你感到困惑,建议你翻阅前面的教程. 上一篇结束的时候,我们在屏幕中央画了一个好看的粉红色的球体.现在我要开始创建一些更加有意思的东西了. 在这一篇教程中,我们会先花点时间

JavaScript学习笔记之JS事件对象_基础知识

事件对象:当事件发生时,浏览器自动建立该对象,并包含该事件的类型.鼠标坐标等. 事件对象的属性:格式:event.属性. 一些说明: event代表事件的状态,例如触发event对象的元素.鼠标的位置及状态.按下的键等等: event对象只在事件发生的过程中才有效. firefox里的event跟IE里的不同,IE里的是全局变量,随时可用:firefox里的要用参数引导才能用,是运行时的临时变量. 在IE/Opera中是window.event,在Firefox中是event: 而事件的对象,在

Javascript实例教程(19) 使用HoTMetal(1)_基础知识

HotMetal PRO 6.0是强大易用的网站编辑和发布工具.在本教程中我们在HotMetal中使用javascript.在HotMetal中,JavaScript支持是基于HotMetal为你提供了丰富的资源以及对象.它包含了几个新的对象,比如访问DOM的对象.另外,HotMetal支持一些ActiveX控件.这些控件以及Windows脚本支持使得HotMetal成为了JavaScript设计人员一个不可多的功能强大的开发环境. 在本节教程中,你将可以学到: 怎样为按钮增加连接宏: 怎样为菜

Javascript实例教程(19) 使用HoTMetal(6)_基础知识

HoTMetal中使用javascript 6.怎样编写一个保存模块脚本 在本节教程的例子中,我们创建了一个新的保存模块文件对话框.HoTMetaL里面有几个模板你可以从中进行选择.模板只是一个普通的网页,这个网页被保存HoTMetaL应用程序目录的Template模板中.当你从文件菜单中选择新项目的时候,其中一个标签选项是Page From Template.当你选择了它,就会弹出一个标签对话框,上面包含了各种模板: General. WebTV. W3C. Frame Pages. Layo

Javascript实例教程(19) 使用HoTMetal(3)_基础知识

HoTMetal中使用javascript 3.什么样的资源适合于脚本编写 当利用HotMetal PRO 6.0编写宏的时候,你可以使用以下几种资源: 预定义事件 HoTMetaL PRO 6.0定义了几个事件以及特殊的用户定义的宏来处理它们.这些宏应该根基HoTMetal的指令来命名的.比如,宏On_Application_Open是在每次HoTMetal PRO 6.0打开的时候被调用的.用户需要定义这个宏并将它增加到Macro/hotmetal.mcr文件中.我们在本教程中将涉及到所有的