当我运行这个脚本时，NaN

NaN when I run this script

本文关键字：NaN 脚本 运行      更新时间：2023-09-26

为什么当我单击"enregistrer resultat"按钮时，我会得到MOYENNE的NaN。其他一切都很好，但我得到了莫的NaN。

很抱歉它是用法语写的，但我的学校是法语的，所以我使用了法语变量名、函数名和对象名。这个程序是一个简单的HTML显示，带有一些非常基本的JavaScript。

函数Etudiant是一个对象fyi。除了函数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;
    }

问题是，当您调用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 值的原因

问题是如何分配this.moyenne。

在你的Etudiant课上，你有这样一行：

this.moyenne = afficherMoyenne();

当您调用afficherMoyenne()时，afficherMoyenne中this的context不是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:

  • 第一个是你现有的代码（不起作用）

  • 第二种是使用CCD_ 28并将CCD_ 29作为CCD_。

  • 最后，第三种方法是调用bind并传递this（返回绑定函数），然后立即调用该函数。

以下是通过MDN:获得的有关this和context的更多信息

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

相关文章：