JavaScript高级使用（对象、BOM、封装）

最新推荐文章于 2025-12-29 10:47:54 发布

原创最新推荐文章于 2025-12-29 10:47:54 发布 · 231 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#javascript #html

本文深入探讨了JavaScript的面向对象编程、内置对象、浏览器对象模型(BOM)、封装技术及JSON数据格式。通过实例讲解了类的定义和使用、内置对象的功能、BOM的组成部分及其操作方法，以及如何通过封装简化代码。

JavaScript高级

今天给大家介绍以下几个内容：

JavaScript 面向对象
JavaScript 内置对象
JavaScript BOM
JavaScript 封装

JavaScript面向对象

其实JavaScript中的面向对象和Java中的万物皆对象很相似。
类的定义和使用

 class Person(){
      constructor(name,age){
         this.name=name;
    };
 };

字面定义类和使用

在这里插入图片描述

<script>


    let person = {
        name:"nihao",
        age:"23",
        eat:function(something){
            document.write("吃"+something);
            document.write(person.age);
        }
    };

    person.eat("香蕉");
</script>

JavaScript 内置对象

Number

在这里插入图片描述

Math
Date
String
RegExp

在这里插入图片描述

Array
Set
Map

在这里插入图片描述

JSON 介绍
JSON(JavaScript Object Notation)：是一种轻量级的数据交换格式。
它是基于 ECMAScript 规范的一个子集，采用完全独立于编程语言的文本格式来存储和表示数据。
简洁和清晰的层次结构使得 JSON 成为理想的数据交换语言。易于人阅读和编写，同时也易于计算机解析和
生成，并有效的提升网络传输效率。

在这里插入图片描述

JavaScript BOM

BOM 介绍

BOM(Browser Object Model)：浏览器对象模型。
将浏览器的各个组成部分封装成不同的对象，方便我们进行操作。

在这里插入图片描述

Window 窗口对象
Location 地址栏对象

JavaScript 封装

封装思想

封装：将复杂的操作进行封装隐藏，对外提供更加简单的操作。
获取元素的方法（复杂）:
document.getElementById(id值)：根据 id 值获取元素
document.getElementsByName(name值)：根据 name 属性值获取元素们
document.getElementsByTagName(标签名)：根据标签名获取元素们

JQuery 是一个前端框架技术，针对 JavaScript 进行了一系列的封装，使得操作变得非常简单！如下（简单）：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <div id="d1">你好</div>
    <div class="d2">不太好</div>
    <div class="d2">真的编辑器</div>
</body>

<script src="js/jquery-3.3.1.min.js"></script>
<script>
	//获取d1的对象
    let d = $("#d1");
	//获取ds2的对象
    let ds2 = $(".d2");
    for (const iterator of d2) {
        document.write(iterator.val+"<br>");
    }
</script>
</html>