JavaScript对象操作与BOM核心详解
本文系统梳理JavaScript中对象的核心操作与BOM模型。涵盖window对象的属性与方法调用语法，详解prompt、alert等常用窗口函数及特征属性。同时深入讲解自定义对象的两种声明方式（Object构造函数与this关键字），并演示对象属性遍历与with语句块的实际应用，帮助开发者掌握基础对象编程技巧。
BOM模型与window对象基础
浏览器对象模型（BOM）是JavaScript的重要组成部分，它提供了一套独立于页面内容的对象接口，用于与浏览器窗口进行交互。其内部包含分层结构，便于开发者管理窗口状态。
window对象处于BOM的核心地位，它由document（文档对象）、location（地址对象）以及history（历史对象）共同构成，是控制浏览器行为的关键入口。
访问对象属性时，主要遵循两种标准语法格式。
第一种方式是通过点运算符直接赋值，即对象.属性名=“属性值”；第二种方式是利用方括号语法，将属性名作为字符串处理，即对象[“属性名称字符串”]=”属性值”。
执行对象方法时，同样存在两种调用路径。
1.对象的方法名(); 2.对象["方法名称字符串"]();
window对象常用方法与特征属性
window对象提供了多种常用方法，用于处理用户交互和窗口控制。
以下是window对象中一些高频使用的函数列表，包括提示、确认及窗口控制等功能。
| 名 称 | 说 明 |
| prompt（） | 显示可提示用户输入的对话框 |
| alert（） | 显示一个大有提示信息和一个“确定“按钮的警示对话框 |
| confirm（） | 显示一个大有提示信息、”确定“和”取消“按钮的对话框 |
| close（） | 关闭浏览器窗口 |
| open（） | 打开一个新的浏览器窗口加载给定URL所指定的文档 |
| setTimeout（） | 在指定毫秒数后调用函数或计算表达式 |
| setInterval（） | 按照指定的周期（以毫秒记）来调用函数或计算表达式 |
除了方法外，window对象还具备一系列控制窗口外观的特征属性。
| 名 称 | 说 明 |
| height、width | 高度、宽度（以像素记） |
| left、top | 窗口的x和y坐标 以像素记 |
| toolbar | 是否显示浏览器的工具栏 |
| scrollbars | 是否显示滚动条 |
| location | 是否显示地址栏 |
| status | 是否添加状态栏 |
| menubar | 是否显示菜单栏 |
| resizable | 窗口是否可调节尺寸 |
| titlebar | 是否显示标题栏 |
| fullscreen | 是否使用全屏模式显示浏览器 |
在事件处理方面，window对象支持多种常用事件监听。
| 名 称 | 说 明 |
| onload | 一个页面或一幅图像加载完成 |
| onmouseover | 鼠标指针移到某元素之上 |
| onclick | 鼠标单击某个对象 |
| onkeydown | 某个键盘按键被按下 |
| onchange | 域的内容被改变 |
自定义对象的声明与遍历
在JavaScript中，开发者可以自定义对象，主要有两种声明途径。
第一种方式是利用Object构造函数手动创建对象实例。
<script type="text/javascript">
function paly() {
var p = new Object();//创建一个Object对象开辟内存空间
//给对象p定义属性
p.age = 1;
p.name = "javascript";
//给对象p定义方法
p.sayHi = function () {
document.write("大家好！我是" + p.name + "我今年" + p.age + "岁了");
}
//返回对象p
return p;
}
//创建自定义对象的实例
var js = paly();
//调用对象的方法
js.sayHi();
//调用对象的属性
document.write(js.name);
</script>上述代码运行后的效果截图展示了对象属性的输出结果。
第二种方式是通过构造函数配合this关键字来定义对象属性与方法。
<script type="text/javascript">
function paly() {
//给对象定义属性
this.age = 1;
this.name = "javascript";
//给对象定义方法
this.sayHi = function () {
document.write("大家好！我是" + this.name + "我今年" + this.age + "岁了");
}
}
//创建自定义对象的实例
var js = new paly();
//调用对象的方法
js.sayHi();
//调用对象的属性
document.write(js.name);
</script>该方式运行后的效果截图验证了实例化对象的功能。
遍历对象的所有属性是常见需求，通常使用for-in循环实现。
<script type="text/javascript">
function paly() {
//给对象定义属性
this.age = 1;
this.name = "javascript";
//给对象定义方法
this.sayHi = function () {
document.write("大家好！我是" + this.name + "我今年" + this.age + "岁了");
}
}
//创建自定义对象的实例
var js = new paly();
//遍历对象的属性
for (var par in js) {
document.write("js."+par+"="+js[par]);
}
</script>遍历操作的效果截图显示了所有属性键值对的输出。
with语句块允许简化对特定对象属性的访问，省略重复的对象前缀。
<script type="text/javascript">
function paly() {
//给对象定义属性
this.age = 1;
this.name = "javascript";
//给对象定义方法
this.sayHi = function () {
document.write("大家好！我是" + this.name + "我今年" + this.age + "岁了");
}
}
//创建自定义对象的实例
var js = new paly();
//with结构块中的方法或属性如不指定对象则默认为括号中（js）对象的属性或方法
with (js) {
sayHi();
document.write("<br/>"+age);
}
</script>with语句块的使用效果截图展示了简化后的代码执行结果。
以上内容总结了JavaScript对象的相关操作，包括BOM模型、window对象方法及自定义对象的创建与遍历，希望能为读者提供实用的参考。
JavaScript将图片转换为Base64编码的两种途径
2026-11-05 16:43:05
怎么在 Vue 或 React 项目中正确集成 animate.js
2026-11-05 10:23:38
JS注册事件：addEventListener基础语法与参数详解
2026-11-05 08:44:56
JSP和JS的区别：运行环境与服务端/客户端职责解析
2026-11-04 23:34:36
pdf.js 官方下载地址：GitHub Release 获取预编译包
2026-11-04 23:07:27