JavaScript对象操作与BOM核心详解

作者:流萤

时间:2026-10-30

浏览:168

本文系统梳理JavaScript中对象的核心操作与BOM模型。涵盖window对象的属性与方法调用语法,详解prompt、alert等常用窗口函数及特征属性。同时深入讲解自定义对象的两种声明方式(Object构造函数与this关键字),并演示对象属性遍历与with语句块的实际应用,帮助开发者掌握基础对象编程技巧。

文章目录

BOM模型与window对象基础

浏览器对象模型(BOM)是JavaScript的重要组成部分,它提供了一套独立于页面内容的对象接口,用于与浏览器窗口进行交互。其内部包含分层结构,便于开发者管理窗口状态。

BOM模型与window对象基础

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>

上述代码运行后的效果截图展示了对象属性的输出结果。

BOM模型与window对象基础

第二种方式是通过构造函数配合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>

该方式运行后的效果截图验证了实例化对象的功能。

BOM模型与window对象基础

遍历对象的所有属性是常见需求,通常使用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>

遍历操作的效果截图显示了所有属性键值对的输出。

BOM模型与window对象基础

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语句块的使用效果截图展示了简化后的代码执行结果。

BOM模型与window对象基础

以上内容总结了JavaScript对象的相关操作,包括BOM模型、window对象方法及自定义对象的创建与遍历,希望能为读者提供实用的参考。

实用工具推荐

电子包浆

绿化、压缩、噪点和虚拟水印,自由调节做旧程度。

使用 ›
图片压缩

选择画质和输出格式,预览压缩前后的大小。

使用 ›
相关文章