使用hasOwnProperty()引用对象

Question

我想用JavaScript编写一个函数，它将对html元素应用样式对象，但前提是该对象存在。

示例，如果我有以下对象：

objMyObject {
    "idstring": {
        "style" : {
            "opacity": "0.50"
        }
    }
};

因此，在尝试应用hasOwnProperty()之前，我首先使用"style"来检查它是否存在--这很好。

但是，让我们假设我的对象有多个样式：

objMyObject {
    "idstring1": {
        "style" : {
            "opacity": "0.50"
        }
    },

    "idstring2": {
        "style": {
            "opacity": "0.99"
        }
    },

    "idstring3": {
        "style": {
            "opacity": "0.50"
        }
    }

};

现在，有时这些单独的样式对象可以是相同的。上面的示例很短，但是对象可能要大得多，并且包含多个样式的属性，所以如果我可以这样做会更好：

objMyObject {
    "idstring1": {
        "style" : {
            "opacity": "0.50"
        }
    },

    "idstring2": {
        "style": {
            "opacity": "0.99"
        }
    },

    "idstring3": {
        // This particular style object has the same properties as
        // idstring1
        "apply": "idstring1"
    }

};

这样我就可以做这样的事情：

if (objMyObject.hasOwnProperty("idstring3")) {
    if (objMyObject.idString3.hasOwnProperty("apply"))
        // Apply an existing, alternative style object.
        //
        $("#el").css(objMyObject.idstring3.apply)
    else if (objMyObject.idstring3.hasOwnProperty("style"))
        $("#el").css(objMyObject.idString3.style)
}

问题是第一次调用hasOwnProperty()

if (objMyObject.hasOwnProperty("idstring3"))

计算结果为true，这很好。但是，即使对象包含“样式”或“应用”对象，随后的调用也会失败。

下面是我正在使用的完整代码：

// JavaScript object - the "mouseout" object should apply the
// "init" object.
//
var objHeader = {
    "targetID": "header",

    "init": {
        "style": {
            "backgroundColor": "#FF0000",
            "opacity": "0.00"
        }
    },

    "load": {
        "style": {
            "opacity": "0.50"
        }
    },

    "mouseover": {
        "style": {
            "opacity": "0.99"
        }
    },

    // Here, the elApply() function should apply the "style" defined
    // in "init".
    //
    "mouseout": {
        "apply": "init"
    }
};

下面是我使用的两个函数：

// Apply a style to an object - will return false on error or true
// on success.
//
// State is the object to be applied, for example:
//
//    elApply(objHeader, "mouseout");
//
// To apply the style attached to "mouseout".
//
function elApply(
    objElement,
    objState
) {
    // Example - if elInit calls elApply(objHeader, "mouseout");
    // then will first look for objHeader.mouseout.apply, if that
    // exists then it should point to another object with a style
    // to be applied - if this is the case true is returned here
    // and all is well.
    //
    if (elApply(objElement.objState, "apply")) {
        alert("Applied 'apply' to " + objState);
        return true;
    }

    // No "apply" exists, so attempt to apply a "style"
    // object.
    //  
    if (objElement.objState.hasOwnProperty("style")) {
        $("#" + objElement.targetID).css(objElement.objState.style);
        return true;
    }

    alert("Neither '" + objState + "' nor 'apply' exist in this object!");
    return false;
}

function elInit(
    objElement
) {
    $(document).ready(function() {
        var targetID = objElement.targetID;         
        elApply(objElement, "mouseout");
    });
}

所以它是这样工作的：

1. elInit()函数调用elApply(objElement，"mouseout");
2. 存在"mouseout"属性，elApply()函数计算elApply()为true
3. 检查objElement.mouseout.apply是否存在，但显然objElement.mouseout是未定义的，尽管早期的hasOwnProperty()调用表明存在"mouseout“。

希望这是清楚的，有什么想法吗？这没什么大不了的，只是如果对象不是重复的，我就可以重新使用已经定义的对象。

也许在我对hasOwnProperty()的逻辑/实现或理解中存在一个根本缺陷？如果是这样的话，是否有一种方法可以让父对象中的同级对象以这种方式相互引用？

非常感激。

Answer 1

我建议预先填充对象中所有缺失的样式。然后，您的elStyle()函数变得简单得多，因为它不再关心apply属性了。

从技术上讲，将样式从一个元素复制到另一个元素只是对对象的引用的副本。所以，这是个廉价的行动。

这段代码中使用do{} while()循环的原因是为了支持应用‘链’(就像我的例子中的mouseout0 > mouseout > init )。如果从未遇到这种情况，您可以安全地删除它。

​

var objHeader = {
    "targetID": "header",

    "init": {
        "style": { "backgroundColor": "#FF0000", "opacity": "0.75" }
    },
    "load": {
        "style": { "opacity": "0.50" }
    },
    "mouseover": {
        "style": { "opacity": "0.99" }
    },
    "mouseout0": {
        "apply": "mouseout"
    },
    "mouseout": {
        "apply": "init"
    }
};

function populateStyle(o) {
  var success;
  
  do {
    success = false;

    Object.keys(o).filter(
      function(k) {
        return o[k].hasOwnProperty('apply');
      }
    ).forEach(
      function(k) {
        if(o.hasOwnProperty(o[k].apply) && o[o[k].apply].hasOwnProperty('style')) {
          o[k].style = o[o[k].apply].style;
          delete o[k].apply;
          success = true;
        }
      }
    );
  } while(success);
}

function elStyle(objElement, state) {
  if(objElement.hasOwnProperty(state) && objElement[state].hasOwnProperty('style')) {
    $('#' + objElement.targetID).css(objElement[state].style);
  }
  else {
    // error: style undefined
  }
}

populateStyle(objHeader);
elStyle(objHeader, 'mouseout0');

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="header">Hello World</div>

​

Answer 2

请删除大写“S”，并在下面的代码中做小的“s”。

(objMyObject.idString3.hasOwnProperty("apply"))替换为

(objMyObject.idstring3.hasOwnProperty("apply"))

因为JavaScript区分大小写。

我想这会有帮助的。