javascript - 函数不识别变量

Question

几天前，当我想用​​ JavaScript 创建一个类时，我发现了prototypejs。 我有一些运行良好的功能，可以绘制如下轮廓: My Race Profile

要使用任何数据创建此配置文件，我想创建一个完整的类。

这是我在 codepen. 上的代码

所以，解释一下我的问题:

我在构造函数中声明了变量。 当我使用var rp = new RaceProfile('data.json', 'markers.json');时，我没有任何问题。我所有的变量都是用好的值创建的。

但是，当我使用“rp.profile(data);”时，之前声明的所有变量都未定义。似乎之前定义的所有值都被删除了。因此我的代码无法工作。

如果有人知道问题出在哪里，也请告诉我:)

Answer 1

当你说“所有变量”时，你指的是“xScale”、“yScale”......？ 由于这些变量在配置文件函数中无法访问，因此“var”变量实际上仅在其当前范围内(在 {} 之间)可见。

要访问类函数中的变量，您必须使用“this”关键字，就像 dataProfile 字段一样:

var RaceProfile = Class.create({
initialize: function (dataProfile, dataCP) {
    this.dataProfile = dataProfile;
    this.dataCP = dataCP;
    this.xScale = d3.scaleLinear();
}

现在您可以在其他函数中访问这些变量。

此外，在 JS 中，默认情况下“this”是上下文关键字，了解更多信息:https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/this

“this”通过所有对象函数共享，但匿名函数有自己的 this(匿名函数不会附加到您的对象)。

所以这是行不通的，你不能直接访问xScale:

profile: function (rawData) {
    d3.json(this.dataProfile, function (error, rawData) {
        // ..
        this.xScale.range([0, width]).domain(d3.extent(data, function (d) {
            return d.distance;
        }));

您必须将对象的“this”保存在变量中:

profile: function (rawData) {
    var self = this;

    d3.json(this.dataProfile, function (error, rawData) {
        // ..
        self.xScale.range([0, width]).domain(d3.extent(data, function (d) {
            return d.distance;
        }));