javaScript进阶

Master_Azur2026-06-08 17:24

ECMAScript 内置原生对象

Array对象

语法

  • 语法格式：Array对象时用来定义数组的。常用语法格式有如下2种

  • 方式1：

    javascript 复制代码 
    let 变量名 = new Array(元素列表);
    • 例如：
    javascript 复制代码 
    let arr = new Array(1,2,3,4); //1,2,3,4 是存储在数组中的数据（元素）

  • 方式2：

    javascript 复制代码 
    let 变量名 = [ 元素列表 ];
    • 例如：
    javascript 复制代码 
    let arr = [1,2,3,4]; //1,2,3,4 是存储在数组中的数据（元素）

  • 数组定义好了，那么我们该如何获取数组中的值呢？和java中一样，需要通过索引来获取数组中的值。语法如下：

    javascript 复制代码 
    arr[索引] = 值;

  • 接下来，我们在VS Code中创建名为02. JS-对象-Array.html的文件，按照上述的语法定义数组，并且通过索引来获取数组中的值。

    html 复制代码 
    <script>
    //定义数组
     let arr = new Array;
     let arr = [1,2,3,4];
    //获取数组中的值，索引从0开始计数
     console.log(arr[0]);
     console.log(arr[1]);
</script>

  • 浏览器控制台观察的效果如下：输出1和2

特点

  • 与java中不一样的是，JavaScript中数组相当于java中的集合，数组的长度是可以变化的。而且JavaScript是弱数据类型的语言，所以数组中可以存储任意数据类型的值。接下来我们通过代码来演示上述特点。

  • 注释掉之前的代码，添加如下代码：

    javascript 复制代码 
    //特点: 长度可变 类型可变
let arr = [1,2,3,4];
arr[10] = 50;

console.log(arr[10]);
console.log(arr[9]);
console.log(arr[8]);

  • 上述代码定义的arr变量中，数组的长度是4，但是我们直接再索引10的位置直接添加了数据10，并且输出索引为10的位置的元素，浏览器控制台数据结果如下：

  • 因为索引8和9的位置没有值，所以输出内容undefined,当然，我们也可以给数组添加其他类型的值，添加代码如下：注释掉之前控制台输出的代码

    javascript 复制代码 
    //特点: 长度可变 类型可变
let arr = [1,2,3,4];
arr[10] = 50;

// console.log(arr[10]);
// console.log(arr[9]);
// console.log(arr[8]);

arr[9] = "A";
arr[8] = true;

console.log(arr);

  • 浏览器控制台输出结果如下：

属性和方法

  • Array作为一个对象，那么对象是有属性和方法的，所以接下来我们介绍一下Array对象的属性和方法

  • 官方文档中提供了Array的很多属性和方法，但是我们只学习常用的属性和方法，如下图所示：

  • 属性：

    属性 描述
    length 设置或返回数组中元素的数量。

  • 方法：

    方法方法 描述
    forEach() 遍历数组中的每个有值得元素，并调用一次传入的函数
    push() 将新元素添加到数组的末尾，并返回新的长度
    splice() 从数组中删除元素

  • length属性：

    • length属性可以用来获取数组的长度，所以我们可以借助这个属性，来遍历数组中的元素，添加如下代码：

      javascript 复制代码 
      let arr = [1,2,3,4];
arr[10] = 50;
    for (let i = 0; i < arr.length; i++) {
    console.log(arr[i]);
}

    • 浏览器控制台输出结果如图所示：

  • forEach()函数

    • 首先我们学习forEach()方法，顾名思义，这是用来遍历的，那么遍历做什么事呢？所以这个方法的参数，需要传递一个函数，而且这个函数接受一个参数，就是遍历时数组的值。修改之前的遍历代码如下：
    javascript 复制代码 
      //e是形参，接受的是数组遍历时的值
  // 这里直接传匿名函数
  arr.forEach(function(e){
       console.log(e);
  })

String对象

语法格式

  • String对象的创建方式有2种：

  • 方式1：

javascript 复制代码 
let 变量名 = new String("...") ; //方式一
  • 例如：
javascript 复制代码 
let str = new String("Hello String");
  • 方式2：
javascript 复制代码 
let 变量名 = "..." ; //方式二
  • 例如：
javascript 复制代码 
let str = 'Hello String';
  • 代码示例：
html 复制代码 
<script>
    //创建字符串对象
    //let str = new String("Hello String");
    let str = "  Hello String ";
    console.log(str);
</script>
  • 浏览器控制台输出结果如下：

属性和方法

  • String对象也提供了一些常用的属性和方法，如下表格所示：

    • 属性：

      属性 描述
      length 字符串的长度。

    • 方法：

      方法 描述
      charAt() 返回在指定位置的字符。
      indexOf() 检索字符串。
      trim() 去除字符串两边的空格
      substring() 提取字符串中两个指定的索引号之间的字符。

  • length属性：

    • length属性可以用于返回字符串的长度，添加如下代码：
    javascript 复制代码 
    //length
console.log(str.length);

  • charAt()函数：

    • charAt()函数用于返回在指定索引位置的字符，函数的参数就是索引。添加如下代码：
    javascript 复制代码 
    console.log(str.charAt(4));

  • indexOf()函数

    indexOf()函数用于检索指定内容在字符串中的索引位置的，返回值是索引，参数是指定的内容。添加如下代码：

    javascript 复制代码 
    console.log(str.indexOf("lo"));

  • trim()函数

    • trim()函数用于去除字符串两边的空格的。添加如下代码：
    javascript 复制代码 
    let s = str.trim();
console.log(s.length);

  • substring()函数

    • substring()函数用于截取字符 串的，函数有2个参数。
      • 参数1：表示从那个索引位置开始截取。包含
      • 参数2：表示到那个索引位置结束。不包含
    javascript 复制代码 
    console.log(s.substring(0,5));

  • 示例代码如下：

    html 复制代码 
    <!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>JS-对象-String</title>
    </head>
<body>

</body>
    <script>
        //创建字符串对象
        //let str = new String("Hello String");
        let str = "  Hello String    ";

        console.log(str);

        //length
        console.log(str.length);

        //charAt
        console.log(str.charAt(4));

        //indexOf
        console.log(str.indexOf("lo"));

        //trim
        let s = str.trim();
        console.log(s.length);

        //substring(start,end) --- 开始索引, 结束索引 (含头不含尾)
        console.log(s.substring(0,5));
    </script>
</html>

JSON对象

自定义对象

  • 在 JavaScript 中自定义对象特别简单，其语法格式如下：

    javascript 复制代码 
    let 对象名 = {
    属性名1: 属性值1, 
    属性名2: 属性值2,
    属性名3: 属性值3,
    函数名称: function(形参列表){}
};

  • 我们可以通过如下语法调用属性：

    javascript 复制代码 
    对象名.属性名

  • 通过如下语法调用函数：

    javascript 复制代码 
    对象名.函数名()

  • 接下来，我们再VS Code中创建名文件演示自定义对象

    html 复制代码 
    <script>
    //自定义对象
    var user = {
        name: "Tom",
        age: 10,
        gender: "male",
        eat: function(){
             console.log("用膳~");
         }
    }

    console.log(user.name);
    user.eat();
<script>

  • 浏览器控制台结果如下：

    • 其中上述函数定义的语法可以简化成如下格式：
    javascript 复制代码 
    let user = {
    name: "Tom",
    age: 10,
    gender: "male",
    // eat: function(){
    //      console.log("用膳~");
    //  }
    eat(){
        console.log("用膳~");
    }
}

json对象

  • JSON对象：J avaS cript O bject Notation，JavaScript对象标记法。是通过JavaScript标记法书写的文本。其格式如下：

    javascript 复制代码 
    {
    "key":value,
    "key":value,
    "key":value
}
    • 其中，key必须使用引号并且是双引号标记，value可以是任意数据类型。]
    • 例如我们可以直接百度搜索"json在线解析"，随便挑一个进入，然后编写内容如下：
    javascript 复制代码 
    {  
    "name": "李传播"  
}
    • 但是当我们将双引号切换成单引号，再次校验，则报错，如下图所示：

  • 那么json这种数据格式的文本到底应用在企业开发的什么地方呢？-- 经常用来作为前后台交互的数据载体

  • 如下图所示：前后台交互时，我们需要传输数据，但是java中的对象我们该怎么去描述呢？我们可以使用如图所示的xml格式，可以清晰的描述java中需要传递给前端的java对象。

  • 但是xml格式存在如下问题：

    • 标签需要编写双份，占用带宽，浪费资源
    • 解析繁琐

  • 所以我们可以使用json来替代，如下图所示：

  • 接下来我们通过代码来演示json对象：编写代码如下：

    javascript 复制代码 
    let jsonstr = '{"name":"Tom", "age":18, "addr":["北京","上海","西安"]}';  
alert(jsonstr.name);

  • 浏览器输出结果为undefined

  • 为什么呢？因为上述是一个json字符串，不是json对象，所以我们需要借助如下函数来进行json字符串和json对象的转换。 添加代码如下：

    javascript 复制代码 
    var obj = JSON.parse(jsonstr);  
alert(obj.name);

  • 此时浏览器输出结果如下：

  • 当然了，我们也可以通过如下函数将json对象再次转换成json字符串。添加如下代码：

    javascript 复制代码 
    alert(JSON.stringify(obj));

  • 此时浏览器输出结果如下：

  • 整体全部代码如下：

    html 复制代码 
    <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>JS-对象-JSON</title>
</head>
<body>

</body>
<script>
    //定义json
    var jsonstr = '{"name":"Tom", "age":18, "addr":["北京","上海","西安"]}';
    //alert(jsonstr.name);

    //json字符串--js对象
    var obj = JSON.parse(jsonstr);
    //alert(obj.name);

    //js对象--json字符串
    alert(JSON.stringify(obj));
</script>
</html>

宿主对象（Host Objects / Web APIs）

BOM对象

  • 接下来我们学习BOM对象，BOM的全称是Browser Object Model,翻译过来是浏览器对象模型。也就是JavaScript将浏览器的各个组成部分封装成了对象。我们要操作浏览器的部分功能，可以通过操作BOM对象的相关属性或者函数来完成。例如：我们想要将浏览器的地址改为http://www.baidu.com,我们就可以通过BOM中提供的location对象的href属性来完成，代码如下：location.href='http://www.baidu.com'

  • BOM中提供了如下5个对象：

    对象名称 描述
    Window 浏览器窗口对象
    Navigator 浏览器对象
    Screen 屏幕对象
    History 历史记录对象
    Location d地址栏对象

  • 上述5个对象与浏览器各组成对应的关系如下图所示：

  • 对于上述5个对象，我们重点学习的是Window对象、Location对象这2个

Window对象

  • window对象指的是浏览器窗口对象，是JavaScript的全部对象，所以对于window对象，我们可以直接使用，并且对于window对象的方法和属性，我们可以省略window.例如：我们之前学习的alert()函数其实是属于window对象的,其完整的代码如下：

    js 复制代码 
    window.alert('hello');

  • 其可以省略window. 所以可以简写成

    js 复制代码 
    alert('hello')

  • 所以对于window对象的属性和方法，我们都是采用简写的方式。window提供了很多属性和方法，下表列出了常用属性和方法

  • window对象提供了获取其他BOM对象的属性：

    属性 描述
    history 用于获取history对象
    location 用于获取location对象
    Navigator 用于获取Navigator对象
    Screen 用于获取Screen对象

  • 也就是说我们要使用location对象，只需要通过代码window.location或者简写location即可使用

  • window也提供了一些常用的函数，如下表格所示：

    函数 描述
    alert() 显示带有一段消息和一个确认按钮的警告框。
    comfirm() 显示带有一段消息以及确认按钮和取消按钮的对话框。
    setInterval() 按照指定的周期（以毫秒计）来调用函数或计算表达式。
    setTimeout() 在指定的毫秒数后调用函数或计算表达式。

  • 代码示例

    • alert()函数：弹出警告框，函数的内容就是警告框的内容
    html 复制代码 
    <script>
    //window对象是全局对象，window对象的属性和方法在调用时可以省略window.
    window.alert("Hello BOM");
    alert("Hello BOM Window");
</script>
    • 浏览器打开，依次弹框
    • confirm()函数：弹出确认框，并且提供用户2个按钮，分别是确认和取消。添加如下代码：
    js 复制代码 
     confirm("您确认删除该记录吗?");
    • 浏览器打开效果如图所示：
    • 但是我们怎么知道用户点击了确认还是取消呢？所以这个函数有一个返回值，当用户点击确认时，返回true，点击取消时，返回false。我们根据返回值来决定是否执行后续操作。修改代码如下：再次运行，可以查看返回值true或者false
    js 复制代码 
    let flag = confirm("您确认删除该记录吗?");
alert(flag);

  • setInterval(fn,毫秒值)：定时器，用于周期性的执行某个功能，并且是循环执行。该函数需要传递2个参数：

    • fn:函数，需要周期性执行的功能代码
    • 毫秒值：间隔时间
    • 注释掉之前的代码，添加代码如下：
    js 复制代码 
    //定时器 - setInterval -- 周期性的执行某一个函数
let i = 0;
setInterval(function(){
     i++;
     console.log("定时器执行了"+i+"次");
},2000);
    • 刷新页面，浏览器每个一段时间都会在控制台输出，结果如下：
    • setTimeout(fn,毫秒值) ：定时器，只会在一段时间后执行一次功能。参数和上述setInterval一致
    • 注释掉之前的代码，添加代码如下：
    js 复制代码 
    //定时器 - setTimeout -- 延迟指定时间执行一次 
setTimeout(function(){
    alert("JS");
},3000);
    • 浏览器打开，3s后弹框，关闭弹框，发现再也不会弹框了。

Location对象

  • location是指代浏览器的地址栏对象，对于这个对象，我们常用的是href属性，用于获取或者设置浏览器的地址信息，添加如下代码：
js 复制代码 
//获取浏览器地址栏信息
alert(location.href);
//设置浏览器地址栏信息
location.href = "https://www.baidu.cn";

  • 浏览器效果如下：首先弹框展示浏览器地址栏信息，然后点击确定后，因为我们设置了地址栏信息，所以浏览器跳转到地址

  • 完整代码如下：

html 复制代码 
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>JS-对象-BOM</title>
</head>
<body>

</body>
<script>
    //获取
    // window.alert("Hello BOM");
    // alert("Hello BOM Window");

    //方法
    //confirm - 对话框 -- 确认: true , 取消: false
    // let flag = confirm("您确认删除该记录吗?");
    // alert(flag);

    //定时器 - setInterval -- 周期性的执行某一个函数
    // let i = 0;
    // setInterval(function(){
    //     i++;
    //     console.log("定时器执行了"+i+"次");
    // },2000);

    //定时器 - setTimeout -- 延迟指定时间执行一次 
    // setTimeout(function(){
    //     alert("JS");
    // },3000);

    //location
    alert(location.href);

    location.href = "https://www.baidu.cn";

</script>
</html>

DOM对象

DOM介绍

  • DOM：Document Object Model 文档对象模型。也就是 JavaScript 将 HTML 文档的各个组成部分封装为对象。

  • DOM 其实我们并不陌生，之前在学习 XML 就接触过，只不过 XML 文档中的标签需要我们写代码解析，而 HTML 文档是浏览器解析。封装的对象分为

    • Document：整个文档对象
    • Element：元素对象
    • Attribute：属性对象
    • Text：文本对象
    • Comment：注释对象

  • 如下图，左边是 HTML 文档内容，右边是 DOM 树

1.5.3.2 获取DOM对象

  • 我们知道DOM的作用是通过修改HTML元素的内容和样式等来实现页面的各种动态效果，但是我们要操作DOM对象的前提是先获取元素对象，然后才能操作。所以学习DOM,主要的核心就是学习如下2点：

    • 如何获取DOM中的元素对象（Element对象 ，也就是标签）
    • 如何操作Element对象的属性,也就是标签的属性。

  • 接下来我们先来学习如何获取DOM中的元素对象。

    • HTML中的Element对象可以通过Document对象获取，而Document对象是通过window对象获取的。document对象提供的用于获取Element元素对象的api如下表所示：

      函数 描述
      document.getElementById() 根据id属性值获取，返回单个Element对象
      document.getElementsByTagName() 根据标签名称获取，返回Element对象数组
      document.getElementsByName() 根据name属性值获取，返回Element对象数组
      document.getElementsByClassName() 根据class属性值获取，返回Element对象数组

  • 准备如下页面代码：

    html 复制代码 
    <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>JS-对象-DOM</title>
</head>

<body>
    <img id="h1" src="img/off.gif">  <br><br>

    <div class="cls">传智教育</div>   <br>
    <div class="cls">黑马程序员</div>  <br>

    <input type="checkbox" name="hobby"> 电影
    <input type="checkbox" name="hobby"> 旅游
    <input type="checkbox" name="hobby"> 游戏
</body>

</html>

  • document.getElementById()： 根据标签的id属性获取标签对象，id是唯一的，所以获取到是单个标签对象。

    • 添加如下代码：
    html 复制代码 
    <script>
//1. 获取Element元素

//1.1 获取元素-根据ID获取
 let img = document.getElementById('h1');
 alert(img);
</script>
    • 浏览器打开，效果如图所示：从弹出的结果能够看出，这是一个图片标签对象
    • document.getElementsByTagName() : 根据标签的名字获取标签对象，同名的标签有很多，所以返回值是数组。
    • 添加如下代码:
    js 复制代码 
    //1.2 获取元素-根据标签获取 - div
let divs = document.getElementsByTagName('div');
for (let i = 0; i < divs.length; i++) {
     alert(divs[i]);
}

  • 浏览器输出2次如下所示的弹框: document.getElementsByTagName() : 根据标签的名字获取标签对象，同名的标签有很多，所以返回值是数组。

    • 添加如下代码:
    ini 复制代码 
    //1.2 获取元素-根据标签获取 - div
let divs = document.getElementsByTagName('div');
for (let i = 0; i < divs.length; i++) {
     alert(divs[i]);
}
    • 浏览器输出2次如下所示的弹框

  • document.getElementsByName() ：根据标签的name的属性值获取标签对象，name属性值可以重复，所以返回值是一个数组。

    添加如下代码：

    js 复制代码 
    //1.3 获取元素-根据name属性获取
let ins = document.getElementsByName('hobby');
for (let i = 0; i < ins.length; i++) {
    alert(ins[i]);
}
    • 浏览器会有3次如下图所示的弹框：

  • document.getElementsByClassName() : 根据标签的class属性值获取标签对象，class属性值也可以重复，返回值是数组。

    • 添加如下图所示的代码：
    js 复制代码 
    //1.4 获取元素-根据class属性获取
let divs = document.getElementsByClassName('cls');
for (let i = 0; i < divs.length; i++) {
     alert(divs[i]);
}
    • 浏览器会弹框2次，都是div标签对象

  • 操作属性

    • 那么获取到标签了，我们如何操作标签的属性呢？通过查询文档资料，如下图所示：

  • 可以通过div标签对象的innerHTML属性来修改标签的内容。此时我们想把页面中的999替换成666，所以要获取2个div中的第一个，所以可以通过下标0获取数组中的第一个div，注释之前的代码，编写如下代码：

js 复制代码 
 var divs = document.getElementsByClassName('cls');
 var div1 = divs[0];

 div1.innerHTML = "传智教育666";
  • 完整代码如下：
html 复制代码 
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>JS-对象-DOM</title>
</head>

<body>
    <img id="h1" src="img/off.gif">  <br><br>

    <div class="cls">999</div>   <br>
    <div class="cls">程序员</div>  <br>

    <input type="checkbox" name="hobby"> 电影
    <input type="checkbox" name="hobby"> 旅游
    <input type="checkbox" name="hobby"> 游戏
</body>

<script>
    //1. 获取Element元素

    //1.1 获取元素-根据ID获取
    // var img = document.getElementById('h1');
    // alert(img);

    //1.2 获取元素-根据标签获取 - div
    // var divs = document.getElementsByTagName('div');
    // for (let i = 0; i < divs.length; i++) {
    //     alert(divs[i]);
    // }


    //1.3 获取元素-根据name属性获取
    // var ins = document.getElementsByName('hobby');
    // for (let i = 0; i < ins.length; i++) {
    //     alert(ins[i]);
    // }


    //1.4 获取元素-根据class属性获取
    // var divs = document.getElementsByClassName('cls');
    // for (let i = 0; i < divs.length; i++) {
    //     alert(divs[i]);
    // }



    //2. 查询参考手册, 属性、方法
    var divs = document.getElementsByClassName('cls');
    var div1 = divs[0];

    div1.innerHTML = "666";

</script>
</html>

JavaScript事件

事件介绍

  • 如下图所示的百度注册页面，当我们用户输入完内容，百度可以自动的提示我们用户名已经存在还是可以使用。那么百度是怎么知道我们用户名输入完了呢？这就需要用到JavaScript中的事件了。

  • 什么是事件呢？HTML事件是发生在HTML元素上的 "事情"，例如：

    • 按钮被点击
    • 鼠标移到元素上
    • 输入框失去焦点
    • ........

  • 而我们可以给这些事件绑定函数，当事件触发时，可以自动的完成对应的功能。这就是事件监听。例如：对于我们所说的百度注册页面，我们给用户名输入框的失去焦点事件绑定函数，当我们用户输入完内容，在标签外点击了鼠标，对于用户名输入框来说，失去焦点，然后执行绑定的函数，函数进行用户名内容的校验等操作。JavaScript事件是js非常重要的一部分，接下来我们进行事件的学习。那么我们对于JavaScript事件需要学习哪些内容呢？我们得知道有哪些常用事件，然后我们得学会如何给事件绑定函数。所以主要围绕2点来学习：

    • 事件绑定
    • 常用事件

1.6.2 事件绑定

  • JavaScript对于事件的绑定提供了2种方式：

    • 方式1：通过html标签中的事件属性进行绑定

      • 例如一个按钮，我们对于按钮可以绑定单机事件，可以借助标签的onclick属性，属性值指向一个函数。

      • 添加如下代码：

      html 复制代码 
      <input type="button" id="btn1" value="事件绑定1" onclick="on()">
      • 很明显没有on函数，所以我们需要创建该函数，代码如下：
      html 复制代码 
      <script>
    function on(){
        alert("按钮1被点击了...");
    }
</script>
      • 浏览器打开，然后点击按钮，弹框如下：

    • 方式2：通过DOM中Element元素的事件属性进行绑定

      • 依据我们学习过得DOM的知识点，我们知道html中的标签被加载成element对象，所以我们也可以通过element对象的属性来操作标签的属性。此时我们再次添加一个按钮，代码如下：
      html 复制代码 
      <input type="button" id="btn2" value="事件绑定2">
      • 我们可以先通过id属性获取按钮对象，然后操作对象的onclick属性来绑定事件，代码如下：
      js 复制代码 
      document.getElementById('btn2').onclick = function(){
    alert("按钮2被点击了...");
}
      • 浏览器刷新页面，点击第二个按钮，弹框如下：

      需要注意的是：事件绑定的函数，只有在事件被触发时，函数才会被调用。

  • 整体代码如下：

    html 复制代码 
    <!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>JS-事件-事件绑定</title>
</head>

<body>
  <input type="button" id="btn1" value="事件绑定1" onclick="on()">
  <input type="button" id="btn2" value="事件绑定2">
</body>

<script>
  function on(){
      alert("按钮1被点击了...");
  }

  document.getElementById('btn2').onclick = function(){
      alert("按钮2被点击了...");
  }

</script>
</html>

1.6.3 常见事件

  • 上面案例中使用到了 onclick 事件属性，那都有哪些事件属性供我们使用呢？下面就给大家列举一些比较常用的事件属性

    事件属性名 说明
    onclick 鼠标单击事件
    onblur 元素失去焦点
    onfocus 元素获得焦点
    onload 某个页面或图像被完成加载
    onsubmit 当表单提交时触发该事件
    onmouseover 鼠标被移到某元素之上
    onmouseout 鼠标从某元素移开

前端框架的由来

Proxy代理对象

  • Proxy 是 JavaScript 在 ES6 版本中加入的内置原生对象 （就像 Array、String、Date 一样，它天然存在于现代浏览器和 Node.js 环境中）。

  • 在现实生活中，你可以把它想象成明星的经纪人 ，或者房东的房屋中介。

    • 没有代理时： 你直接和房东谈租金（直接修改对象属性）。
    • 有代理时： 房东把房子交给中介（Proxy），你只能和中介谈。中介在帮你租房的同时，可以顺便做点别的（比如收中介费、做记录）。

  • Proxy 本质上是一个构造函数，你必须用 new 关键字来实例化它，并且它强制要求传入两个参数：

    javascript 复制代码 
    const proxyObject = new Proxy(target, handler);
    • 参数一：target
      • 它是你要被代理的目标对象。这个对象可以是任何东西：一个普通对象、一个数组、一个函数，甚至另一个 Proxy。
    • 参数二：handler
      • 这就是"中介的工作手册"。它是一个对象 ，里面定义了你想要拦截的各种操作方法（在专业术语里，这些方法被称为 Traps（陷阱） ）

  • 看一段最基础的代码，看看这两个参数是如何配合的：

    javascript 复制代码 
    // 1. target：你的原始数据（明星本人）
const star = { 
  name: '周杰伦', 
  song: '七里香' 
};

// 2. handler：实现方法（经纪人的工作手册）
const handler = {
  // 当有人试图读取数据时，触发 get
  get(target, key) {
    console.log(`🎤 经纪人：有人想打听明星的【${key}】`);
    // 必须返回真实的数据给人家
    return target[key]; 
  },

  // 当有人试图修改数据时，触发 set
  set(target, key, newValue) {
    console.log(`📝 经纪人：记在小本本上，明星的【${key}】变成了【${newValue}】！我要去通知粉丝群更新状态了！`);
    // 执行真正的修改
    target[key] = newValue;
    // set 方法必须返回 true，告诉 JavaScript 引擎"修改成功了"
    return true; 
  }
};

// 3. new Proxy：正式聘请经纪人
const proxyStar = new Proxy(star, handler);


// --- 测试时间 ---

// ❌ 错误做法：直接找明星（拦截不会生效）
// star.name = '林俊杰'; 

// ✅ 正确做法：有事找经纪人（拦截完美生效）
console.log(proxyStar.name);  // 控制台打印: 🎤 经纪人：有人想打听明星的【name】 \n 周杰伦
proxyStar.song = '夜曲';      // 控制台打印: 📝 经纪人：记在小本本上，明星的【song】变成了【夜曲】！

  • 核心秘诀就是：把组件里的初始数据（target）丢给 Proxy，然后把更新 DOM 的代码写在 handler 的 set 方法里。 以后框架一律只操作代理后的那个对象，这样数据只要一变，页面就能自动更新了。

发布-订阅模式 (Publish-Subscribe Pattern)

  • Proxy 是一个安检站，能感知数据的变化。 但是，这里有一个致命的问题：当 Proxy 的 set 方法拦截到数据变化时，它怎么知道该去更新页面上的哪一段 HTML 呢？

    • 如果是简单的单页面，你可以直接写死 document.getElementById('app').innerText = newValue。但在真实的框架里，一个数据可能被十几个地方同时使用（比如导航栏的头像、个人主页的名字、弹窗里的问候语），你不可能在 Proxy 里写死所有的 DOM 操作。

    • 这时候，就需要发布-订阅模式 (Publish-Subscribe Pattern) 登场了。

什么是发布-订阅模式

你可以把它理解为微信公众号的机制：

  1. 公众号（发布者 Publisher / Dep）： 负责维护一个粉丝列表，当有新文章时，群发通知。
  2. 粉丝（订阅者 Subscriber / Watcher）： 关注公众号，等公众号发通知时，自己去阅读文章（执行更新页面的代码）。
  3. 订阅（Subscribe / Depend）： 粉丝点关注的这个动作。

在前端框架中，每一个被 Proxy 代理的数据属性，背后都有一个自己的"公众号" 。

依赖收集 (Dependency Collection)

  • Proxy 与 发布-订阅 如何完美配合？这是整个现代前端框架中最精妙的"魔法"，也就是传说中的"依赖收集 (Dependency Collection)"。依赖收集巧妙地利用了 Proxy 的 get 和 set！

    • 在 get 中"偷偷"收集订阅者
      • 当框架在解析你的 HTML 模板（比如遇到 {{ name }}）时，它必然要去读取 data.name 的值。这一下就会触发 Proxy 的 get 拦截！
      • 框架会在触发 get 的这一瞬间，把当前正在解析的 DOM 更新逻辑（Dom操作），塞进 name 这个数据的"公众号（Dep）"粉丝列表里。这叫依赖收集，（将对应的Dom变成"粉丝"）
    • 在 set 中群发通知
      • 当你修改了 data.name = '新名字'，触发了 Proxy 的 set 拦截。 这时 set 根本不需要知道具体要去改哪个 DOM，它只需要对着 name 的"公众号（Dep）"大喊一声："有更新了！"。然后公众号就会自动遍历粉丝列表，让所有的 Watcher 自己去执行更新 DOM 的逻辑（"粉丝"看到消息自己去更新自己要更新的内容）。叫派发更新。

  • 代码示例，可以到浏览器自己deBug感受一下：

    javascript 复制代码 
    // 1. 定义"公众号"类 (Dep - 依赖收集器)
class Dep {
  constructor() {
    this.subscribers = new Set(); // 用 Set 存储粉丝，防止重复订阅
  }
  // 关注：添加订阅者
  depend() {
    if (activeWatcher) { // 如果当前有正在干活的 Watcher，就把他加进来
      this.subscribers.add(activeWatcher);
    }
  }
  // 群发：通知所有订阅者更新
  notify() {
    this.subscribers.forEach(watcher => watcher()); // 让所有粉丝执行自己的代码
  }
}

// 2. 一个全局变量，用来临时存放当前正在干活的 Watcher（闭包思想的变体运用）
let activeWatcher = null;

// 3. 把普通数据变成"响应式"数据（Proxy 魔法）
function reactive(data) {
  // 每个对象属性都需要一个自己的公众号，我们用一个闭包里的对象来存
  const deps = {}; 

  return new Proxy(data, {
    get(target, key) {
      // 1. 如果这个属性还没有公众号，就给它建一个
      if (!deps[key]) deps[key] = new Dep();

      // 2. 【核心魔法】：有人读取这个属性，赶紧看看有没有 activeWatcher 需要订阅！
      deps[key].depend(); 

      return target[key];
    },
    set(target, key, newValue) {
      target[key] = newValue;

      // 【核心魔法】：数据变了，通知这个属性对应的公众号去群发消息！
      if (deps[key]) deps[key].notify(); 

      return true;
    }
  });
}

// ================= 测试环节 =================

// 初始化数据
const state = reactive({ count: 1 });

// 定义一个专门用来"观察"并执行代码的函数 (相当于 Vue 的 watcher 机制)
function watch(updateFunction) {
  activeWatcher = updateFunction; // 把自己挂在全局
  updateFunction();               // 执行一次！这会读取 state.count，从而触发 get 去收集依赖！
  activeWatcher = null;           // 收集完就卸下
}

console.log("---初始化运行，进行依赖收集------ ------收集DOM更新操作的方法---")
// 模拟页面有两个地方用到了 count（这里并不是更新操作，这是为了触发依赖收集）
console.log("--初始化导致的运行--")
watch(() => {
  console.log(`DOM节点A 更新了：当前数值是 ${state.count}`);
});

watch(() => {
  console.log(`DOM节点B 更新了：我也收到了 ${state.count}`);
});
console.log("---初始化完毕，开始正式运行---")
// 你会看到：
// 一旦你修改数据，你不需要手动调用 watch，上面两个函数会自动再次执行！
console.log('--- 准备修改数据 ---');
state.count = 100; 
// 控制台自动打印：
// DOM节点A 更新了：当前数值是 100
// DOM节点B 更新了：我也收到了 100
state.count = 500;

  • 进行组件化

html 复制代码 
<!DOCTYPE html>
    <html>

    <body>
        <div id="app">
            <h1>{{ title }}</h1>

            <section>
                <p>修改数据：<input type="text" v-model="title"></p>
                <p>实时预览：{{ title }}</p>
            </section>

            <hr>

            <section>
                <h3>下方是独立组件：</h3>
                <my-counter></my-counter>
            </section>
        </div>

        <script>
            // --- 1. 响应式核心 (还是之前的逻辑) ---
            class Dep {
                constructor() {
                    this.subs = new Set();
                }
                depend() {
                    if (activeWatcher) {
                        // 如果当前有正在干活的 Watcher，就把他加进来
                        this.subs.add(activeWatcher);
                    }
                }
                // 群发：通知所有订阅者更新
                notify() {
                    this.subs.forEach(watcher => watcher());
                }
            }
            // 一个全局变量，用来临时存放当前正在干活的 Watcher（闭包思想的变体运用）
            let activeWatcher = null;
            function watch(updateFunction) {
                activeWatcher = updateFunction; // 把自己挂在全局
                updateFunction(); // 执行一次！这会读取 state.count，从而触发 get 去收集依赖！
                activeWatcher = null;// 收集完就卸下
            }
            // 把普通数据变成"响应式"数据（Proxy 魔法）
            function reactive(data) {
                const deps = {};
                return new Proxy(data, {
                    get(target, key) {
                        // 如果这个属性还没有"公众号"，就给它建一个
                        if (!deps[key]) deps[key] = new Dep();
                        // 2. 【核心魔法】：有人读取这个属性，赶紧看看有没有 activeWatcher 需要订阅！
                        deps[key].depend();
                        // 返回读到的值
                        return target[key];
                    },
                    set(target, key, val) {
                        target[key] = val;
                        // 【核心魔法】：数据变了，通知这个属性对应的公众号去群发消息！
                        if (deps[key]) deps[key].notify();
                        return true;
                    }
                });
            }

            // --- 类似于Vue 2.0 框架 ---
            class Vue {
                constructor(options) {
                    // 1. 保存配置项，留给后续组件渲染或生命周期使用
                    this.$options = options;

                    // 2. 数据源代理：将普通对象变成响应式，数据变，页面动
                    this.$data = reactive(options.data || {});

                    // 3. 挂载入口：确定要扫描和托管哪一部分的 DOM
                    this.$el = document.querySelector(options.el);

                    // 4. 组件中心：存放所有可复用的子组件定义
                    this.$components = options.components || {};

                    // 编译入口：开始递归扫描 $el 内部的所有子节点
                    this.compile(this.$el);

                    // 编译入口
                    this.compile(this.$el);
                }

                compile(el) {
                    const childNodes = el.childNodes;
                    childNodes.forEach(node => {
                        if (node.nodeType === 1) { // 元素节点
                            const tagName = node.tagName.toLowerCase();

                            // 【组件识别逻辑】
                            if (this.$components[tagName]) {
                                const comp = this.$components[tagName];
                                new Vue({
                                    el: node,
                                    data: comp.data(),
                                    template: comp.template
                                });
                            } else {
                                // 【指令识别逻辑 v-model】
                                const attrs = node.attributes;
                                Array.from(attrs).forEach(attr => {
                                    if (attr.name === 'v-model') {
                                        const key = attr.value;
                                        node.addEventListener('input', e => { this.$data[key] = e.target.value; });
                                        watch(() => { node.value = this.$data[key]; });
                                    }
                                });
                                this.compile(node); // 递归向下
                            }
                        } else if (node.nodeType === 3) { // 文本节点 {{}}
                            const text = node.textContent;
                            const reg = /\{\{(.+?)\}\}/g;
                            if (reg.test(text)) {
                                watch(() => {
                                    node.textContent = text.replace(reg, (m, key) => this.$data[key.trim()]);
                                });
                            }
                        }
                    });

                    // 如果有传入 template 字符串（用于组件），替换掉内容
                    if (this.$options.template) {
                        el.innerHTML = this.$options.template;
                        this.compile(el); // 重新编译 template 里的内容
                    }
                }
            }

            // --- 3. 业务开造 ---
            new Vue({
                el: '#app',
                data: {
                    title: 'Hello vue!'
                },
                components: {
                    // 定义一个计数器组件
                    'my-counter': {
                        template: `
                            <div style="border:1px solid #ccc; padding:10px">
                                <p>我是组件内的计数器: {{ count }}</p>
                                <button onclick="add()">内部逻辑增加</button>
                            </div>
                            `,
                        data() { return { count: 0 }; }
                    }
                }
            });

            // 临时 hack 给组件按钮加个方法
            window.add = function () {
                // 实际框架会处理作用域，这里简单演示原理
                alert('组件内部数据逻辑改变...');
            };
        </script>
    </body>
</html>
相关推荐
markfeng81 小时前
React入门教学
前端·react.js
ze_juejin1 小时前
Object.defineProperty vs Proxy 对比总结
前端
wing981 小时前
我的AI编程体验：从白嫖到付费，我为什么最终留下了Codex
前端·人工智能·程序员
京东云开发者2 小时前
京东Taro Native框架静态布局直渲提速
前端
程序员小羊！2 小时前
03JavaScript预备知识
前端
前端的阶梯2 小时前
Cursor 开发 Python 项目完全指南
前端·人工智能·后端
艾伦野鸽ggg2 小时前
JavaScript 基础语法速通
前端·javascript
不懂的浪漫2 小时前
AI 时代还需要买课吗？我用 Skills + Markdown + HTML 搭了一套自学系统
前端·人工智能·html·skill
前端的阶梯2 小时前
Conda 开发 Python 程序完全指南
前端·人工智能·后端
热门推荐
01【AI】2026 年具身智能模型和世界模型总结02GitHub 镜像站点032026 年 AI 编程工具终极横评：Cursor vs Claude Code vs Copilot vs Windsurf04Codex 下载安装指南：Windows 和 macOS 官方版下载05CC-Switch & Claude 基于 Linux 服务器安装使用指南06Codex 桌面端更新后 Chrome 插件和 Computer Use 不可用，怎么排查和修复07【踩坑记录 | 第一篇】微软商店无法使用时，如何手动安装 OpenAI Codex？附`.msix`文件系统错误解决方法08CC-Switch 下载、安装与使用配置指南【2026.5.29】09Agnes AI 全模态 API 免费实测报告：文生图 + 文生视频完整测试102026 AI 编程工具终极实战指南：Cursor vs Claude Code vs Copilot，开发者该怎么选？