JavaScript 对象化编程:with 语句、this 关键字与自定义构造函数
本文介绍 JavaScript 对象化编程的核心概念,包括使用 with 语句简化代码、this 关键字在不同上下文中的指向,以及通过 function 和 new 关键字创建自定义构造函数。文章提供了浏览器信息检测与朋友信息管理的代码示例,帮助开发者掌握基础面向对象编程技巧。
现在我们可以开始学习对象化编程的相关内容,这部分知识其实属于上一章的延伸。
with 语句的使用
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 关键字定义,并在函数内部使用 this 来定义属性。
语法结构为:function <构造函数名> [(<参数>)] {
...
this.<属性名> = <初始值>;
...
}
随后,使用 new 关键字来构造变量:
var <变量名> = new <构造函数名>[(<参数>)];
构造完成后,<变量名> 成为一个对象,拥有通过 this 在函数中定义的属性。
以下是一个从网络获取的、用于搜集浏览器详细信息的自定义构造函数示例:
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异步发送HTTP请求时怎么优雅地处理错误
2026-11-05 17:10:44
5款主流JS在线运行工具对比:CodePen、JSFiddle与StackBlitz怎么选
2026-11-05 17:04:04
JavaScript入门书籍避坑:这些书不适合初学者
2026-11-05 16:31:15
JS使用Math.round实现保留两位小数的原理与代码
2026-11-05 15:35:55
JavaScript 原生 Date 对象怎么实现日期加减
2026-11-05 14:30:00
