---

博客主页： [小ᶻ☡꙳ᵃⁱᵍᶜ꙳] 本文专栏: 前端

---

---

---

💯前言

• 在 JavaScript 中，forEach 方法是数组比较常用的遍历方法之一。它允许对数组中的每一个元素进行操作，并通过回调函数传递相关参数：元素值、索引和整个数组。但在某些场景中，我们需要自定义一个方法，将它添加到自定义对象上。这些操作对于理解构造函数和回调函数完成很好的学习任务。
  这篇文章主要分析如何自定义一个相似于原生 forEach 的方法，完成一次数组元素的遍历，并通过结合代码完成对其原理的详细分析。同时，这次结合原生方法和自定义方法的比较，培养学生对运算控制和回调函数的精准理解。
  JavaScript

---

💯题目演示与效果

---

演示代码

代码涉及自定义的构造函数 Brray ，实现了一个自定义的 forEach方法。以下是演示代码：

<script>
function Brray(arr) {
    this.arr = arr;
    this.forEach = function (callback) {
        for (var i = 0, len = this.arr.length; i < len; i++) {
            callback(this.arr[i], i, this.arr);
        }
    }
}

var newBrray = new Brray([1, 2, 3, 4, 5]);

newBrray.forEach(function (item, idx, arr) {
    console.log(item, idx, arr);
});
</script>

---

控制台输出结果

代码执行之后，控制台输出以下内容：

1 0 [1, 2, 3, 4, 5]
2 1 [1, 2, 3, 4, 5]
3 2 [1, 2, 3, 4, 5]
4 3 [1, 2, 3, 4, 5]
5 4 [1, 2, 3, 4, 5]

一个整体的控制台结果是：对数组 [1, 2, 3, 4, 5]的每个元素进行遍历，并在控制台中显示作用的每个元素值、所在的索引以及整个数组。

---

💯代码分析与源理解释

---

1. 构造函数 Brray

在代码中，构造函数 Brray 用于创建自定义的数组实例。这个构造函数完成了两件事：

• 保存一个数组：

  this.arr = arr;
  

  它将构造函数的参数 arr保存在实例的 arr 属性中。

• 自定义 forEach 方法：

  this.forEach = function (callback) {
      for (var i = 0, len = this.arr.length; i < len; i++) {
          callback(this.arr[i], i, this.arr);
      }
  }
  

  • callback ：用户传入的回调函数。
  • for 循环 ：用于遍历数组中的每个元素。
  • callback 被调用时传入的参数：
    1. this.arr[i] ：当前元素
    2. i ：当前元素的索引
    3. this.arr ：整个数组

---

2. 实例化 Brray

通过下面代码，创建了 Brray 的实例并传入数组 [1, 2, 3, 4, 5]：

var newBrray = new Brray([1, 2, 3, 4, 5]);

这里，newBrray实际上是一个包含数组的自定义对象，其中包含一个 forEach方法。

---

3. 调用自定义的 forEach

newBrray.forEach(function (item, idx, arr) {
    console.log(item, idx, arr);
});

• 调用 forEach 方法，将一个匿名回调函数传入。回调函数接收三个参数：

  1. item ：当前数组元素的值。
  2. idx ：当前元素的索引。
  3. arr ：整个数组。

• 在每次循环中，调用回调函数并输出元素信息：

  console.log(item, idx, arr);
  

---

💯比较与拓展

---

1. 比较原生的 Array.prototype.forEach

原生 forEach 方法的定义也是通过循环调用回调函数，但是它是构建在原型链上的，属于 JavaScript 数组的默认方法。例如：

[1, 2, 3, 4, 5].forEach(function (item, index, array) {
    console.log(item, index, array);
});

---

2. 为什么自定义很重要？

自定义的 forEach方法应用于不支持原生方法的对象（比如自定义类或其他数据结构），它展示了一种自定义对象的抽象能力。

---

💯小结

• 
  这段代码能让学生深刻地理解：

1. 如何自定义一个方法完成特定功能，比如仿造原生的 forEach。
2. 构造函数与原型链方法之间的区别。
3. 回调函数的演练，包括传入参数的定义与调用模式。

这段代码对于初学者是一段很好的练习，它不仅认识原理，还培养了自定义技能。

---

---