0

我对 Javascript 有点陌生。我正在做一个工作项目，但在获取返回百分比的方法时遇到了一些麻烦。

function campaignProgress(goal, current){
    this.goal = goal;
    this.current = current; 
    this.percent =  Math.floor(current / goal  * 100);

    this.getGoal = function(){
        return goal;
    }
    this.getCurrent = function(){
        return current;
    }
    this.getPercent = function(){   
        return percent;
    }
}


var totalProgress = new campaignProgress(1.70, 1.064);

当我在 html 文件中调用它时，我在我的标题和我使用的正文中引用了 .js 文件；

<script type="text/javascript">

        document.write(totalProgress.getGoal());

        document.write(totalProgress.getPercent());

</script>

getGoal() 方法工作正常，但 getPercent() 不返回任何内容。我可以像这样引用百分比变量本身；

totalProgress.percent

它会打印得很好。任何关于为什么这不起作用的建议将不胜感激，谢谢。

4

5 回答 5

4

您需要通过实例的范围返回this：

this.getGoal = function(){
    return this.goal;
}
this.getCurrent = function(){
    return this.current;
}
this.getPercent = function(){   
    return this.percent;
}

goal并且current由于构造函数参数的关闭而返回。但是如果它们在构造函数运行后被更改，那么它们将返回错误的值。percent这在变量中很明显。

于 2013-07-22T20:51:07.040 回答
2

你需要使用闭包var that = this;

function campaignProgress(goal, current) {
    this.goal = goal;
    this.current = current; 
    this.percent =  Math.floor(current / goal  * 100);

    var that = this;
    this.getGoal = function() {
        return that.goal;
    }
    this.getCurrent = function(){
        return that.current;
    }
    this.getPercent = function(){   
        return that.percent;
    }
}


var totalProgress = new campaignProgress(1.70, 1.064);
console.log(totalProgress.getGoal());
console.log(totalProgress.getPercent());

this 始终是 function() 中的值，如果您在哪里调用 this.goal（如上所述），这与简单地调用目标相同

于 2013-07-22T20:55:06.700 回答
2

您将变量分配为函数 ( this.goal) 的属性，但是当您检索它们时，您试图获取局部变量。这应该解决它：

function campaignProgress(goal, current){
    this.goal = goal;
    this.current = current; 
    this.percent =  Math.floor(current / goal  * 100);

    this.getGoal = function(){
        return this.goal;
    }
    this.getCurrent = function(){
        return this.current;
    }
    this.getPercent = function(){   
        return this.percent;
    }
}

这里的另一个问题是你是new用来创建这个“函数类”的实例吗？否则分配 this.goal 会将这些变量分配给全局范围。

var c = campaignProgress(1, 3);
console.log(c);//undefined
console.log(window.goal);//1

对比

var c = new campaignProgress(1, 3)
console.log(c);//instance
console.log(window.goal);//undefined
于 2013-07-22T20:51:24.067 回答
2

看起来您正在尝试模仿课程，而这些课程应该是“私人的”。我想你会想要：

function campaignProgress(goal, current){
    var privateGoal = goal,
        privateCurrent = current;

    this.getGoal = function(){
        return privateGoal;
    };
    this.setGoal = function(g){
        privateGoal = g;
    };
    this.getCurrent = function(){
        return privateCurrent;
    };
    this.setCurrent = function(c){
        privateCurrent = c;
    };
    this.getPercent = function(){   
        return Math.floor(privateCurrent / privateGoal  * 100);
    };
}

var tp = new campaignProgress(1.70, 1.064);
console.log(tp.getGoal(), tp.getCurrent(), tp.getPercent());
tp.setCurrent(1.111);
console.log(tp.getGoal(), tp.getCurrent(), tp.getPercent());

演示：http: //jsfiddle.net/twVNN/2/

这导致privateGoalandprivateCurrent 是“私有的”，这意味着它们不能在其范围之外被访问。提供的方法通过调用它们来允许访问。this.goal = goal;如果您要使用类似getGoal. 根据和privatePercent的值动态计算百分比。privateCurrentprivateGoal

于 2013-07-22T20:51:24.457 回答
0

目标有效，因为目标是在每个函数的闭包中定义的（传递给函数的目标参数）。其他的不起作用，因为它们没有被关键字 this 引用（这不像某些语言那样可选）。不幸的是，由于它的工作方式，我们不能简单地将它添加到每个子函数的 return 语句中（因为我们不是在处理原型，this 的值可能会根据我们所处的位置而改变调用这些函数）。因此，使用粗体的更改。

function campaignProgress(goal, current){
    var self = this;
    this.goal = goal;
    this.current = current; 
    this.percent =  Math.floor(current / goal  * 100);

    this.getGoal = function(){
        return self.goal;
    }
    this.getCurrent = function(){
        return self.current;
    }
    this.getPercent = function(){   
        return self.percent;
    }
}

通过使用 self 变量，我们在第一次调用函数时捕获我们希望 this 的值，然后我们对其进行操作。

于 2013-07-22T20:55:11.130 回答