当我运行这个脚本时 NaN

Question

当我单击“注册结果”按钮时，为什么我会得到 MOYENNE 的 NaN。其他一切正常，但我收到了 NaN 的 MOYENNE。

对不起，它是法语，但我的学校是法语，所以我使用法语变量名以及函数和对象名称。这个程序是一个简单的 HTML 显示，带有一些非常基础的 JavaScript。

函数Etudiant 是一个对象，仅供参考。除了函数Etudiant、函数enregistrer()、函数afficherMembre()之外，不要关注任何函数，这是获取信息并将它们组合成想要的结果并将它们存储到lesInfos的函数多变的。函数afficherMoyenne() 是我计算 5 个等级的平均值的地方。

代码如下：

var nbEtudiants = 0;        // nombre d'étudiants
var MAX_ETUDIANTS = 5;  // nombre maximum d'étudiants
var NOTE_MIN = 0, NOTE_MAX = 100;
var etudiant1, etudiant2, etudiant3, etudiant4, etudiant5;

function Etudiant (nomFourni, prenomFourni, note1, note2, note3, note4, note5){
    this.noEtudiant = 2014000 + nbEtudiants;
        this.nom = nomFourni.toUpperCase();
        this.prenom = prenomFourni.charAt(0).toUpperCase() +
                    prenomFourni.substring(1).toLowerCase();
        this.note1 = document.monFormulaire.txtNote1.value;
        this.note2 = document.monFormulaire.txtNote2.value;
        this.note3 = document.monFormulaire.txtNote3.value;
        this.note4 = document.monFormulaire.txtNote4.value;
        this.note5 = document.monFormulaire.txtNote5.value;
        this.listerInfos = afficherMembre;
        this.moyenne = afficherMoyenne();
    }
}

function enregistrer (){
    if (nbEtudiants == MAX_ETUDIANTS){
        window.alert("DÉSOLÉ... le club n'accepte plus de nouveaux membres...");
        return;
    }
    nbEtudiants ++;
    switch(nbEtudiants){
        case  1 : etudiant1 = new Etudiant(document.monFormulaire.txtNom.value,
                      document.monFormulaire.txtPrenom.value,
                      document.monFormulaire.txtNote1.value,
                      document.monFormulaire.txtNote2.value,
                      document.monFormulaire.txtNote3.value,
                      document.monFormulaire.txtNote4.value,
                      document.monFormulaire.txtNote5.value);
                  window.alert(etudiant1.listerInfos());
                  break;
        case  2 : etudiant2 = new Etudiant(document.monFormulaire.txtNom.value,
                      document.monFormulaire.txtPrenom.value,
                      document.monFormulaire.txtNote1.value,
                      document.monFormulaire.txtNote2.value,
                      document.monFormulaire.txtNote3.value,
                      document.monFormulaire.txtNote4.value,
                      document.monFormulaire.txtNote5.value);                                   
                  window.alert(etudiant2.listerInfos());
                  break;
    }

    function afficherMembre () {
        var lesInfos = this.noEtudiant + " " + this.prenom + " " +  this.nom + " " +" MOYENNE: "   + " " + this.moyenne;
        return lesInfos;
    }

    function afficherMoyenne () {
        var moyenne;
        moyenne = parseInt(((parseInt(this.note1) + (parseInt(this.note2)) + (parseInt(this.note3)) + (parseInt(this.note4)) + (parseInt(this.note5))) / 5))
        return moyenne;
    }

Answer 1

问题是当你调用afficherMoyenne时，你并没有绑定到你的对象Etudiant。 this 成为对window 类的引用。

你可以让方法成为你的类的成员

Etudiant.prototype.afficherMoyenne = function () {... the code for your moyenne }

调用绑定到你的类的方法

afficherMoyenne.call(this);

将值传递给方法

function Etudiant (nomFourni, prenomFourni, note1, note2, note3, note4, note5) {
    ...
    this.note1 = document.monFormulaire.txtNote1.value;
    this.note2 = document.monFormulaire.txtNote2.value;
    this.note3 = document.monFormulaire.txtNote3.value;
    this.note4 = document.monFormulaire.txtNote4.value;
    this.note5 = document.monFormulaire.txtNote5.value;
    afficherMoyenne(this.note1, ...)

专业提示

您也可以尝试查看document.monFormulaire.txtNote1.value 的值并在控制台中查看。

console.log(document.monFormulaire.txtNote1.value)

它可以帮助你找出为什么值是 NaN

Answer 2

问题在于您如何分配this.moyenne。

在你的班级Etudiant 中，你有这行：

this.moyenne = afficherMoyenne();

当您调用afficherMoyenne() 时，this 中的context afficherMoyenne 不是Etudian 的实例，而是window。

所以这个逻辑：

    var moyenne;

    moyenne = parseInt(((parseInt(this.note1) + (parseInt(this.note2)) + (parseInt(this.note3)) + (parseInt(this.note4)) + (parseInt(this.note5))) / 5))

    return moyenne;

特别是像 this.note1 这样的东西不是引用实例属性 (document.monFormulaire.txtNote1.value;)，而是在寻找 window.note1 等等。

要解决此问题，您可以使用 .bind 绑定 this 或使用 call 或 apply 调用函数并传入正确的上下文。像这样的：

this.moyenne = afficherMoyenne.call(this);

这里有三个 JS Fiddles：

• The first is your existing code (which doesn't work)

• The second is an update using .call and passing this as the context.

• Finally, the third is calling bind and passing this (which returns the bound function) and then immediately invoking that function.

这里有更多关于 this 和 context 的信息来自 MDN：

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/this