Question

我试图理解使用svg在这里制作的径向进度条的代码，但是我无法理解下面部分中使用的var forEach。它是一些特定定义的变量，因为如果我们将其替换为其他变量（如temp等），它就不起作用，并且请解释传递给函数的参数的来源。

var forEach = function (array, callback, scope) {
     for (var i = 0; i < array.length; i++) {
     callback.call(scope, i, array[i]);
     }}

这是完整的代码：将不胜感激：）

<script type="text/javascript" src="js/jquery.min.js"></script>
    <script type="text/javascript">
      $(document).ready(function(){

        var con = "<div class='center'></div>";
        $("body").prepend(con);
           var svg = document.createElementNS("http://www.w3.org/2000/svg", "svg");

             svg.setAttributeNS(null, 'width', '200px');
             svg.setAttributeNS(null, 'height', '280px');
             svg.setAttributeNS(null, 'class', 'progress');
             svg.setAttributeNS(null, 'data-progress', '65');
             $('.center').prepend(svg);

             var path = document.createElementNS("http://www.w3.org/2000/svg", "path");
             path.setAttributeNS(null, 'class', 'fill');
             path.setAttributeNS(null, 'd', 'M5,40a35,35 0 1,0 70,0a35,35 0 1,0 -70,0');
             $("svg").prepend(path);

             var spath = document.createElementNS("http://www.w3.org/2000/svg", "path");
             spath.setAttributeNS(null, 'class', 'track');
             spath.setAttributeNS(null, 'd', 'M5,40a35,35 0 1,0 70,0a35,35 0 1,0 -70,0');
             $("svg").prepend(spath);

             var forEach = function (array, callback, scope) {
                  for (var i = 0; i < array.length; i++) {
                    callback.call(scope, i, array[i]);
                 }}
     window.onload = function(){
       var max = -219.99078369140625;
       forEach(document.querySelectorAll('.progress'), function (index,value){
       percent = value.getAttribute('data-progress');
       value.querySelector('.fill').setAttribute('style',
       'stroke-dashoffset: ' + ((100 - percent) / 100) * max);});}})
 </script>

Answer 1

记住两件事：

在JavaScript中，函数是数据。这意味着它们可以被指定为变量的值，就像任何其他数据一样。但是，因为它们是函数，所以有两种方法可以与这些数据进行交互：

1a上。作为数据：
```
 var x = function(){alert("test");};
 var y = x;
```
1b中。作为可调用的代码：
```
 x(); // runs the function stored in x
```
属性名称可以隐藏在较小的范围内。 forEach是Array.prototype对象具有的属性的名称，但可以覆盖属性名称，从而使标识符（属性名称）对给定范围具有不同的含义。在您的情况下，forEach实际上并未隐藏forEach Array.prototype，因为它未被指定为该对象的属性名称，但它只是一个保存函数数据并使其可调用的常规变量。

Answer 2

var forEach

这里我们定义一个包含对函数的引用的变量。

function(array, callback, scope)

该函数接受三个参数：

array：我们可以迭代的数组。
callback：对函数的引用。
范围：用于运行回调的范围（这定义了＆＃39;此内部回调）。

for (var i = 0; i < array.length; i++)

只是一个for循环。

callback.call(scope, i, array[i])

call（）是一个Function类型的方法，它只是调用函数，就像执行callback（）一样，但是还有一个额外的好处，就是让你在特定的范围内运行函数。即：

var f = function(){
    console.log("Hi, " + this.name);
};
var scope1 = {name: "John"};
var scope2 = {name: "Peter"};
f.call(scope1);// logs Hi, John
f.call(scope2);// logs Hi, Peter

另外两个call（）参数作为参数传递给函数。

希望澄清源参数的工作原理。

Javascript forEach作为特殊变量

2 个答案: