JavaScript 核心对象、文档对象与事件对象详解

JavaScript 对象概述

JavaScript 对象

JavaScript 提供了多种内建对象，例如 String、Date、Array 等。

对象本质上是一种特殊的数据类型，它包含属性与方法。

在 JavaScript 开发中，几乎所有功能都依赖于对象。接下来我们将深入探讨 JavaScript 对象的具体应用。

JavaScript 中的对象分类与之前学习的语言中函数的分类类似，主要分为系统预定义对象和用户自定义对象两类。

整体内容结构如下图所示：

核心对象详解

一、核心对象

1. Array 对象

数组对象用于创建数组，通常通过 new 关键字进行实例化。

其常用方法如下图所示：

常用属性包括：

以下通过示例展示 Array 对象的创建与使用方式。

<script language="javascript"> 
  var data=new Array("1","2","3");//创建数组data 
  document.writeln("data的初始内容为："+data+","); //输出数组内容 
  function fun(){  //自定义函数fun()显示数组长度 
    if(this.length!=0){ 
      document.writeln("<PRE>此数组的长度为："+this.length+"</PRE>"); 
    }else{ 
      document.writeln("<PRE>此数组的长度为0</PRE>"); 
    } 
  } 
  Array.prototype.fun=fun; //为Array对象添加fun()方法 
  data.fun();        //调用fun()方法 
  data=new Array();//清空data数组内容 
  data.fun();//显示清空后数组的长度 
</script> 

运行结果如下：

说明：

prototype 属性用于为对象添加新的属性和方法，使用语法为：Array.prototype.functionName=functionName

2. Function 对象

Function 对象允许在程序运行期间动态生成并调用函数。

其常用属性如下：

其常用方法如下：

以下实例用于说明具体用法：

<script language="javascript"> funSum=new Function("x","y","z=x+y;return z"); //创建函数funSum（） x=prompt("请输X值：",""); y=prompt("请输Y值：",""); x=Number(x); y=Number(y); alert(newfun(x,y)); //调用函数并输出 </script>

注意：Function 对象的首字母必须大写，不可写成小写的 function。Function 是一个对象，用于动态创建函数；而 function 是关键字，通过 function 关键字定义的函数也是 Function 对象的实例。

3. String 对象

String 对象提供了处理字符串所需的属性和方法。使用时可以直接赋值，也可以通过 new 关键字创建后再赋值。

String 对象包含大量方法，主要涉及字符串在 Web 页面中的显示格式、字体大小、字体颜色、字符搜索以及大小写转换等功能。

通过上述对象的 prototype 属性，我们可以看到 JavaScript 的一个显著特点：它不仅提供内置功能，还允许用户自行扩展功能，这非常便捷。

文档对象应用

二、文档对象

document 对象是接触 JavaScript 时的第一个例子，通常通过 ID 名称获取控件，当时可能未深入思考，仅将其视为关键字使用。

document 对象是 window 对象的属性，也是唯一一个既属于 BOM（浏览器对象模型）又属于 DOM（文档对象模型）的对象。

提及 window 对象，首先需了解 window 中各对象之间的关系，如下图所示：

了解大体结构关系后，接下来查看 document 对象的常用属性：

关于 document 对象的方法，这里重点介绍最常用的 .write() 和 .writeln() 方法。这两个方法的作用都是打印字符，区别在于 writeln 在打印后会额外添加一个换行符。

下面展示一个使用 document 对象的 write 方法动态添加 JavaScript 文件的实例。

<script language="javascript"> 
  document.write("<script type=\"text/javascript\" src=\"textuser.js\">"+"</scr"+"ipt>"); 
</script> 

此处主要解释为何需要将 </script> 标签分开书写。

我们可以先查看分开书写时的网页源码：

乍看之下似乎没有明显区别，接下来我们查看不分开书写时的网页源码：

结果显而易见，如果不分开书写 </script>，它会与前面的 <script> 标签配对，导致浏览器报错。

事件对象基础

三、事件对象

event 对象是一种仅与事件处理过程相关的对象。

JavaScript 中的事件与 VB 中学过的事件类似，包括鼠标事件、键盘事件、加载事件等。

事件的发生必然有其触发者，触发后该事件随即结束。

在 JavaScript 中使用事件非常简单，只需在关键字前加上 On 即可。

以上为本文分享的 JavaScript 对象学习小结，欲了解更多内容，请持续关注本站。