Javascript：使用函数定义对象属性的值

Question

我正在尝试创建一个简单的程序，该程序将根据一个人的经验量 (totalTime) 分配一个数字 (riskLevel)，并将其全部输入 HTML 中的快速表中。

我的 this.riskLevel 值有问题。我试图让它取 totalTime 值并使用 if/else 语句将整数分配给 riskLevel。

当我调用 getCrewmember() 函数（使用提交按钮）时，firstName、lastName 和 totalTime 都正确填充到 HTML 表中。 riskLevel 没有，它只是写出函数的整个代码。

我做错了什么？另外，我希望能够在 html 文本输入字段中输入姓名，并让该人的姓名出现在程序中。如何告诉 getCrewmember() 函数获取输入到文本字段中的值？

代码如下：

function pilot(firstName, lastName, totalTime){
   this.firstName=firstName;
   this.lastName=lastName;
   this.totalTime=totalTime;
   this.riskLevel=function(){  
    if(this.totalTime >= 1000){
        riskLevel = 1;
    }else if(this.totalTime >=500){
    riskLevel = 2;
   }else if(this.totalTime >= 250){
    riskLevel = 3;
   }
}
}

var jdoe = new pilot("Jon", "Doe", 480)
function getCrewmember(){
  document.getElementById("firstName").innerHTML = jdoe.firstName;
  document.getElementById("lastName").innerHTML = jdoe.lastName;
  document.getElementById("totalHours").innerHTML = jdoe.totalTime;
  document.getElementById("riskLevel").innerHTML = jdoe.riskLevel;
}
</script>

<table>
    <thead>
        <th>First</th>
        <th>Last</th>
        <th>Total Hours</th>
        <th>Risk Level</th> 
    </thead>
    <tr>
        <td id="firstName">First Name</td>
        <td id="lastName">Last Name</td>
        <td id="totalHours">Total Hours</td>
        <td id="riskLevel">Risk Level</td>
    </tr>
    <tr>
        <td><input type="text" id="textField"></td>
    </tr>
    <tr>
        <td><input type="submit" value="Get Crewmember" onclick="getCrewmember()"></td>
    </tr>

</table>

Answer 1

您正在将变量分配给函数 试试

自执行函数

riskLevel = (function(){  
    if(this.totalTime >= 1000){
    return  1;
    }else if(this.totalTime >=500){
    return 2;
   }else if(this.totalTime >= 250){
    return 3;
   }
})();

或赋值给函数外的变量

var riskLevel;
function setRisk(){  
    if(this.totalTime >= 1000){
    riskLevel =  1;
    }else if(this.totalTime >=500){
    riskLevel = 2;
   }else if(this.totalTime >= 250){
    riskLevel = 3;
   }
};
setRisk()

或者根本不使用函数，只执行 if else

if(this.totalTime >= 1000){
   riskLevel =  1;
}else if(this.totalTime >=500){
   riskLevel = 2;
}else if(this.totalTime >= 250){
   riskLevel = 3;
}

Answer 2

替换这个：

this.riskLevel=function(){  
    if(this.totalTime >= 1000){
        riskLevel = 1;
    }else if(this.totalTime >=500){
    riskLevel = 2;
   }else if(this.totalTime >= 250){
    riskLevel = 3;
  }
}

通过这个：

  if(this.totalTime >= 1000){
        this.riskLevel = 1;
  }else if(this.totalTime >=500){
        this.riskLevel = 2;
  }else if(this.totalTime >= 250){
        this.riskLevel = 3;
  }

Answer 3

riskLevel是一个函数，可以赋值给不同的变量（包括一个DOM元素的innerHTML）。当你将它分配给一个 DOM 元素时，这个函数会变成一个字符串。您要做的是获取riskLevel 的计算值，这意味着您将需要调用该函数（而不仅仅是分配它）。

首先，您需要返回 riskLevel 的值：

this.riskLevel = function() {
  // Create a local, rather than global
  // variable to hold the return value
  var riskLevel = 4;
  if (this.totalTime >= 1000) {
    riskLevel = 1;
  } else if (this.totalTime >=500) {
    riskLevel = 2;
  } else if (this.totalTime >= 250) {
    riskLevel = 3;
  }
  return riskLevel;
}

那么你需要改变你的调用：

document.getElementById("riskLevel").innerHTML = jdoe.riskLevel(); // Invoke it

现在，每次您拨打somePilot.riskLevel() 时，您都会获得飞行员当前的风险等级。当飞行员的总时间发生变化时，他的风险等级也会发生变化。

ECMAScript 5 解决方案

如果您希望riskLevel 看起来 与totalTime 一样（例如，只是另一个属性），您可以使用Object.defineProperty 在您的pilot 构造函数中创建一个计算getter：

Object.defineProperty(this, 'riskLevel', {
  get: function() {
    var riskLevel = 4;
    // Rest of riskLevel code goes here, along with return
  },
  writable: false
});

然后您将能够获得 riskLevel 的值，就像它是任何其他属性 (in browsers that support ES5) 一样，您将获得计算值。 （也就是说，.innerHTML = jdoe.riskLevel 会正常工作。）

Answer 4

我想这就是你的意思：

this.riskLevel= function(){  
  if(this.totalTime >= 1000){
    return 1;
  }else if(this.totalTime >=500){
    return 2;
  }else if(this.totalTime >= 250){
    return 3;
  }
}

然后你会调用它：

document.getElementById("riskLevel").innerHTML = jdoe.riskLevel()