javascript - 使用 Underscore.js 检查 undefined variable

Question

我在使用 Underscore.js 模板和 Internet Explorer 时遇到问题。这是导致问题的模板的一部分:

<p>
  <% if ( typeof description !== 'undefined' ) { %>
    <%- description %>
  <% } else { %>
    No description
  <% } %>
</p>

当变量 description 未定义时(这意味着我根本没有将它提供给模板，变量不存在)，这在 Safari、Firefox、Chrome 中工作得很好。

但是，Internet Explorer 无法正常工作。 IE8 和 IE9 不显示 No description，而是显示 [object HTMLMetaElement]，而 IE7 显示 [object]。

检查 typeof description 的结果在 Safari、Firefox、Chrome 中返回 undefined，但显然 Internet Explorer 返回 object。

我已经尝试过 Underscore.js 的 _.isUndefined(value) 函数，但是当变量不存在时那个函数不起作用。

有人知道这个问题的解决方法吗？ (请注意，我无法提供没有值的变量 - 它要么存在，要么不存在)

更新 我在 Underscore.js Github 问题之一中找到了解决方法 https://github.com/documentcloud/underscore/issues/237#issuecomment-1781951

有人可以解释为什么 IE 的行为不同，以及为什么解决方法确实有效吗？

更新 2 @John-DavidDalton 在下面的评论中提供了另一个更好的解决方法(直接链接到它似乎不起作用)

Answer 1

来自fine manual :

By default, template places the values from your data in the local scope via the with statement.

您可以使用已编译模板的 source 查看发生了什么属性:

​var t = _.template('<%= v %>');
console.log(t.source);​​​​​​​​​​​​​​​​​​​

给你(为清楚起见进行了调整):

function(obj) {
    var __t, __p = '';
    with(obj || {}) {
      __p += '' + ((__t = ( v )) == null ? '' : __t) + '';
    }
    return __p;
}

with 是你问题的根源:

JavaScript looks up an unqualified name by searching a scope chain associated with the execution context of the script or function containing that unqualified name. The 'with' statement adds the given object to the head of this scope chain during the evaluation of its statement body. If an unqualified name used in the body matches a property in the scope chain, then the name is bound to the property and the object containing the property. Otherwise a 'ReferenceError' is thrown.

鉴于此:

with(obj) {
    console.log(pancakes)
}

JavaScript 将首先查找 obj.pancakes如果没有 pancakes属性(property) obj , 它会寻找 pancakes在全局范围内。显然 IE 有一个 window.description代表页面的 <meta> 之一的值标签。在模板中使用您自己的 namespace (如在解决方法中)有点否定 with做并阻止你进入全局window属性。