javascript - 在空对象 Javascript 中分配属性默认值

Question

我有这个对象TrSet，它从 dom 中获取节点。有时这些 dom 元素可能为 null，而我想处理节点的属性，不幸的是，我不知道如何在 undefined 属性上使用 null 条件赋值。

var TrSet = function(valid,stat,txt,dd){
     this.validateField = valid || "";
     this.statusDropDown = stat || "";
     this.txtValue = txt || "";
     this.ddValue = dd || "";
     this.txtValue.value = txt.value || ""; //Cannot read property value of undefined
     this.ddValue.style.visibility = dd.style.visibility || "hidden"; //same

     this.validate = function () {
         /// Even when attempting to access 
         /// the property with hasOwnProperty throws the error 
         ///"Cannot read property 'hasOwnProperty' of null"!
       if (this.statusDropDown.hasOwnProperty("value") && this.validateField.hasOwnProperty("style")) {

我不明白其中任何一个都失败了。如果它为 null 或未定义，则对于空字符串，它的计算结果应为 true 并将其设置为等于该值。

为了清晰起见进行编辑

In the first example

var TrSet = function(txt) {
    this.txtValue = txt || "";
    this.txtValue.value = txt.value || "";
}

如果txt为空，则将其等于""，如果txt.value为空，则将其等于""。这是怎么失败的？

第二个例子

var TrSet = function(stat) {
    this.statusDropDown = stat || "";

    if (this.statusDropDown.hasOwnProperty("value")) { }

如果 stat 为 null，则设置 statusDropDown 等于 ""。然后我检查它是否hasOwnProperty。为什么会失败？

Answer 1

I don't understand how either of these is failing. If it's null or undefined, it should evaluate to true for the empty string and set it equal to that.

不完全是:语句 txt || "" 将返回 txt 或 "" 的值，以先为真者为准。它不会在任何地方分配该值，尤其是不会分配给txt。您单独分配。

因此，在您的示例中(例如减少到必要的部分):

var TrSet = function(valid,stat,txt,dd){
  this.txtValue = txt || "";
  console.log('txt will still be undefined but txtValue will not be', txt, this.txtValue);
  this.txtValue.value = txt.value || "";
}

要执行您期望的操作，您需要再次默认 txt，如下所示:

var TrSet = function(valid,stat,txt,dd){
  this.txtValue = txt || "";
  console.log('txt will still be undefined but txtValue will not be', txt, this.txtValue);
  this.txtValue.value = (txt || "").value || ""; // <- change here
}

当然，这基本上是不可读的(.value || '' 是如何分组的？你一看就知道吗？)，所以我们可能会缓存它:

var TrSet = function(valid,stat,txt,dd){
  var realTxt = txt || ""
  this.txtValue = realTxt;
  this.txtValue.value = realTxt.value || "";
}

现在，这可行，但不太理想。 ES6 添加了直接在参数列表中提供默认值的功能，这样更加简洁:

var TrSet = function(valid = "", stat = "", txt = "", dd = "") {
  this.txtValue = txt;
  this.txtValue.value = txt.value || "";
}

直接回答您添加的两个简短问题:

var TrSet = function(txt) {
  this.txtValue = txt || "";
  this.txtValue.value = txt.value || "";
}

If txt is null set it equal to "", if txt.value is null set it equal to "". how does this fail?

因为txt || "" 不会分配给txt，它只是返回 txt > 或 "" 并且该返回值被分配给 this.txtValue。

var TrSet = function(stat) {
  this.statusDropDown = stat || "";

if (this.statusDropDown.hasOwnProperty("value")) { }

If stat is null set statusDropDown equal to "". Then I check if if it hasOwnProperty. Why does this fail?

可能是因为 this 未绑定(bind)，所以它实际上没有 statusDropDown 的值。在 JavaScript 中，this 可以根据函数的调用方式而改变。查看this question了解更多详情。