为什么我不能在 Javascript 中使用同一函数范围内的变量？答案

【问题标题】：Why can't I use a variable in same function scope in Javascript?为什么我不能在 Javascript 中使用同一函数范围内的变量？
【发布时间】：2016-04-08 05:01:57
【问题描述】：

我正在尝试在 Chart.js 的选项中使用 legendTemplate。

我有这个：

var item1 = 5;
var item2 = 10;

function handle_chart_data(data) {
                window.item1 = data[0];
                window.item2 = data[1];

                var data = [
                {
                    value : window.item1,
                    color : "#FF0000",
                    label : "Item1"
                },
                {
                    value : window.item2,
                    color : "#5E5E5E",
                    label : "Item2"
                },
                ];

                options = {
                    segmentShowStroke: false,
                    animateRotate: true,
                    animateScale: false,
                    percentageInnerCutout: 50,
                    //legendTemplate: "<% for (var i=0; i<5; i++ ) { data.value } %>"
                }

                var ctx = document.getElementById("dgraph").getContext("2d");
                var myChart = new Chart(ctx).Doughnut(data, options);
                document.getElementById('js-legend').innerHTML = myChart.generateLegend();
                }
}

HTML 是这样的：

<div class="graph">
                            <canvas id="dgraph" width="300" height="200"></canvas>                            
                            <div id="js-legend" class="chart-legend"></div>
                        </div>

CSS如下：

.chart-legend li span{
    display: inline-block;
    width: 12px;
    height: 12px;
    margin-right: 5px;
}

.graph {
    float:left;
    width: 100%; 
    height: 100%;
}

但是，当我取消注释 legendTemplate 的内容时，我收到一个未捕获的数据引用错误。我认为这是某种范围错误。

Javascript 范围让我无所适从，因为我来自 C/C++/Python 背景，而且它非常违反直觉。对我来说，“数据”的范围与“选项”的范围相同，因此“选项”应该能够看到“数据”，但显然情况并非如此。我到底做错了什么？

最终，我真正想要实现的只是删除我的图例上令人讨厌的项目符号（我上面编写的当前代码无法实现这一点）但我想了解我在进程阻止我在同一级别（都在同一函数内）看到选项变量内的数据变量。

在不输入函数的情况下使用括号会改变范围吗？如果是，方括号与波浪括号相比对范围的影响是否不同？

【问题讨论】：

注释掉的部分中的 data 只是 JavaScript 字符串文字的一部分，根本不是变量。它不应该引发参考错误。 <% 是什么？看起来您正在展示使用一些生成一些 JavaScript 的服务器端代码，而不是向我们展示它输出的 JavaScript（并且可能会生成参考错误）。
我注意到您访问的是data.value，而不是data[i].value。既然data 是一个数组，你不应该通过索引来访问它吗？
@Quentin Chart.js 使用 John Resig 的微模板代码。这里的想法是启用基于图表每个部分的数据生成标签。
Chart.js 圆环图代码创建标签，以便元素上有类名。只需添加一些 CSS 规则，将它生成的 <ul> 设置为 list-style: none;，您就可以得到您想要的东西
@Rodent 并没有真正记录在案，但我认为圆环图的模板上下文就是图表对象本身。好吧，不完全是上下文；模板被解释为with 语句中的代码，而with 语句引用图表对象。因此，在默认标签模板中，name 是字符串“Doughnut”，segments 是图表数据数组。 <ul> 是使用类 doughnut-legend 生成的。

标签： javascript scope legend chart.js

【解决方案1】：

在循环中尝试 data[i].value 代替。数据是代码中的一个数组，但您尝试引用它，就好像它有一个属性，它只是没有，因为它是一个对象数组。您还需要 i

实际上比我最初看到的错误要多得多，因为字符串文字很奇怪，尽管这可能是粘贴错误？

【讨论】：

这完全是关于 Chart.js 的一个特性；它与作用域无关（好吧，反正也没多大关系）。
@Pointy 啊，我知道我错了。我对这方面并不熟悉，虽然一开始我觉得它更像是香草代码。