JavaScript中检查属性是否存在

Question

我是JavaScript的新手，对于鸭子类型概念有些困惑。就我所知，我已经理解了这个概念。但这导致了我的思考中出现了奇怪的后果。我将通过以下示例进行解释：

我目前正在使用jQuery Mobile开发移动Web应用程序。在某一点上，我捕获了画布的vmousedown事件。我对触摸压力感兴趣。我发现了Touch.webkitForce属性。

$('#canvas').live('vmousedown', function(e){
    console.log(e.originalEvent.originalEvent.touches[0].webkitForce);
}

这在使用Chrome的远程调试时可以正常工作。但在Opera Firefly中测试时会抛出异常，因为originalEvent属性不是触摸事件，而是点击事件。

所以，每次访问不受我的控制的对象的属性时，我都需要检查其存在性和类型吗？

if( e.originalEvent &&
    e.originalEvent.originalEvent &&
    e.originalEvent.originalEvent.touches && 
    e.originalEvent.originalEvent.touches[0] && 
    e.originalEvent.originalEvent.touches[0].webkitForce) {

    console.log(e.originalEvent.originalEvent.touches[0].webkitForce);
}

请问有人能为我澄清一下吗？

- Angelo.Hannes

Answer 1

每次访问不属于我权限的对象属性时，我是否需要检查其存在性和类型？

是的，你需要逐级检查整个路径，或者可以自动化处理：

function deepObject(o, s) {
    var ss = s.split(".");

    while( o && ss.length ) {
        o = o[ss.shift()];
    }

    return o;
}

var isOk = deepObject(e, "originalEvent.originalEvent.touches.0.webkitForce");

if ( isOk ) {
    // isOk is e.originalEvent.originalEvent.touches.0.webkitForce;
}

---

测试用例：

var o = {
  a: {
    b: {
      c: {
        d: {
          e: {
          }
        }
      }
    }
  }
}

var a = deepObject(o, "a.b.c");
var b = deepObject(a, "d");

console.log(a); // {"d": {"e": {}}}
console.log(b); // {"e": {}}
console.log(deepObject(o, "1.2.3.3")); // undefined

- Andreas Louv

---

我喜欢你的答案，但是有没有一种方法，不使用字符串而是简单的 object.property 表示法？ - Angelo.Hannes

@Angelo.Hannes 然后你需要像[at]Prodigy的回答中一样使用try, catch: https://dev59.com/7WrWa4cB1Zd3GeqP_oGz#13248964 - Andreas Louv

Answer 2

使用 try catch

$('#canvas').live('vmousedown', function(e) {
   try {
       console.log(e.originalEvent.originalEvent.touches[0].webkitForce);
   } catch(e) {
       console.error('error ...');
   }
}

- Damask

Answer 3

由于您正在使用特定的框架来捕获事件，我认为您应该假设originalEvent始终被定义。

如果没有定义，那么抛出一个错误可能是一个好主意，因为在事件捕获过程中显然出了问题。

然而，事件可能是MouseEvent或TouchEvent，同时webkitForce属性可能不受支持。这些都是您可能想要检测的情况：

// assume that originalEvent is always be defined by jQuery
var originalEvent = e.originalEvent.originalEvent;
if (originalEvent instanceof TouchEvent) {  // if touch events are supported
  // the 'touches' property should always be present in a TouchEvent
  var touch = originalEvent.touches[0];
  if (touch) {
      if (touch.webkitForce) {
        // ...
      } else {
        // webkitForce not supported
      }
  }  // else no finger touching the screen for this event
} else {
   // probably a MouseEvent
}

- Louis