JavaScript面向对象基础：核心内置对象与API详解

什么是对象

在编程语言中，对象是对现实世界中事物的简化抽象。由于完全描述一个复杂实体（如人）极其困难，我们通常将其简化为“属性”和“行为”的组合，并仅保留对程序有意义的部分。例如，在统计身高的程序中，人可以简化为只包含身高属性的对象，省略其他无关特征。

字符串对象 (String)

字符串是JS中最常用的对象之一。定义字符串后，它便拥有内置的属性和方法，无需额外定义即可直接使用。

第1步：获取字符串长度

目的：快速获取字符串中包含的字符数量。
入口/动作：使用 length 属性。
示例：

var str = "字符串" + "串"; // 两个字符串拼接
alert(str.length); // 输出结果

第2步：访问指定位置字符

目的：获取字符串中特定索引位置的字符。
入口/动作：使用 charAt(index) 方法，索引从0开始。
示例：

alert(str.charAt(0)); // 获取第一个字符
alert(str.charAt(1));

第3步：截取子字符串

目的：从原字符串中提取一段子串。
入口/动作：使用 substring(start, end)，包含起始位置，不包含结束位置。
示例：

alert(str.substring(0, 2));

第4步：查找字符位置

目的：确定某字符在字符串中的索引，若不存在返回-1。
入口/动作：使用 indexOf(char) 查找首次出现位置，或 lastIndexOf(char) 查找最后一次出现位置。
示例：

alert(str.indexOf('符'));

日期对象 (Date)

Date 对象用于处理日期和时间。创建新对象后，可通过多种方法获取或设置时间数据。

第1步：创建Date对象

目的：初始化当前日期时间。
入口/动作：使用 new Date()。

var today = new Date();

第2步：格式化为字符串

目的：将日期转换为易读的文本格式。
入口/动作：
toString()：转换为基础字符串格式。
toLocaleString()：转换为本地化格式（如中文环境下的年月日格式）。

第3步：获取具体日期组件

目的：提取年、月、日、星期等独立数值。
入口/动作：使用对应的 get... 系列方法。
注意：月份索引从0开始（0代表1月），getDay() 返回值0代表周日。

var date = today.getDate(); // 当月几日
var day = today.getDay();   // 星期几
var month = today.getMonth(); // 月份（0-11）
var year = today.getFullYear(); // 四位年份

第4步：动态时钟实现实例

目的：利用 Date 对象和定时器实现页面上的动态时钟显示。
操作：结合 setTimeout 每隔一定时间刷新DOM元素。

function startTime() {
    var today = new Date();
    var h = today.getHours();
    var m = today.getMinutes();
    var s = today.getSeconds();
    
    // 补齐两位数格式
    m = checkTime(m);
    s = checkTime(s);
    
    document.getElementById('clock').innerHTML = h + ":" + m + ":" + s;
    // 每500毫秒重新执行一次
    setTimeout("startTime()", 500);
}

function checkTime(i) {
    if (i < 10) { i = "0" + i; }
    return i;
}

数组对象 (Array)

数组是有序的数据集合，具有 length 属性表示元素个数，并提供丰富的操作方法。

第1步：创建数组

目的：初始化数组容器。
入口/动作：
传统方式：new Array(item1, item2)
字面量方式：[item1, item2]（更推荐）

// 字面量方式
var arr = ["HTML", "CSS", "JavaScript", "DOM"];

第2步：访问元素

目的：读取指定下标的值。
入口/动作：使用 arr[n]，n 为从0开始的整数索引。

alert(arr[0]); // 第一个元素
alert(arr[1]); // 第二个元素

第3步：数组合并与排序

目的：合并多个数组或对现有数组进行排序。
入口/动作：
concat()：连接两个或多个数组，返回新数组。
sort()：对数组元素进行排序（默认按字符串Unicode编码排序）。
join()：将数组所有元素连接为字符串。

var arr2 = ["ASP.NET", "PHP"];
var bigArr = arr.concat(arr2); // 合并数组
var sortArr = bigArr.sort();   // 排序
var joinStr = arr.join();      // 转为字符串

数学对象 (Math)

Math 是一个静态对象，提供数学常数和函数，无需 new 构造直接调用。

第1步：使用常量与方法

目的：获取圆周率或进行数值取整。
入口/动作：访问 Math.PI，或使用 round() 四舍五入。

var num = Math.PI;
var rNum = Math.round(num); // 四舍五入得到3

第2步：生成随机数

目的：获取0到1之间的伪随机浮点数。
入口/动作：使用 Math.random()。

alert(Math.random());

函数对象 (Function)

在JavaScript中，函数也是对象，即 Function 类型的实例。这意味着函数可以作为参数传递，也可以像普通对象一样拥有属性和方法。

第1步：定义函数

目的：创建可执行代码块。
入口/动作：使用函数声明或构造函数方式。

// 标准声明
function add(a, b) { return a + b; }

// Function构造函数（较少用，语法较繁琐）
var addFunc = new Function('a', 'b', 'return a + b');

第2步：控制函数上下文 (this)

目的：在调用函数时指定其内部的 this 指向，而非默认的 window 或调用者。
入口/动作：使用 call() 或 apply() 方法。

• call：逐个传递参数。
  func.call(thisArg, arg1, arg2, ...)
• apply：以数组形式传递参数。
  func.apply(thisArg, [argsArray])

示例：

whatsThis.call(document); // this 指向 document

第3步：了解函数调用链

目的：调试时查看是谁调用了当前函数。
入口/动作：在函数内部访问 arguments.callee.caller 或特定环境下的一些兼容写法（注：现代JS中 caller 在非严格模式下可用，但存在争议，主要用于理解调用关系）。

第4步：处理不定长参数

目的：接收任意数量的参数。
入口/动作：在函数内部使用 arguments 类数组对象。
arguments.length 获取传入参数个数。
arguments[i] 访问第i个参数。

总结

JavaScript的对象体系非常灵活，内置对象如String、Date、Array和Math提供了强大的原生能力，而Function作为一等公民，其 call 和 apply 机制更是实现高阶功能和框架底层逻辑的核心。掌握这些对象的基础属性和方法，是进行前端开发的必经之路。

以上就是JavaScript面向对象入门基础的详细内容，更多关于JavaScript对象用法、API实践的资料请关注本站其它相关文章！