DOM 方法的短变量答案

【问题标题】：Short variable for DOM methodsDOM 方法的短变量
【发布时间】：2011-06-09 09:29:37
【问题描述】：

document.createElement、document.createTextNode、[element].setSelectionRange等方法不能做“捷径”吗？

var c = document.createElement;
var div = c('div');
div.innerHTML = 'blah';

document.body.appendChild(div);

执行上述代码时Firebug控制台返回错误：

未捕获的异常：[异常...“无法转换 JavaScript 参数”nsresult：“0x80570009 (NS_ERROR_XPC_BAD_CONVERT_JS)”位置：“JS 框架 :: http://fiddle.jshell.net/_display/ :: :: line 20”数据：否]

这发生在 jsfiddle as provided here 上，并且在 jsfiddle 之外完成且没有错误时会静默失败。

下面的代码可以正常工作，那么它是否仅限于 DOM 操作方法？

function long_function_name(prop)
{
   alert(prop);
}

var c = long_function_name;

c('blah');

这有压缩的实际示例：

代替：

if (element.setSelectionRange)
{
    element.setSelectionRange(pos, pos);
}

压缩到：

var s = element.setSelectionRange || 0;
if (s) s(pos, pos);

【问题讨论】：

即使var s = element.setSelectionRange; 也足够了。如果该属性未定义，它将返回undefined，其计算结果为false。
哦，谢谢@Felix，很高兴知道！很遗憾，由于上下文问题，这不起作用，就像下面的答案一样

标签： javascript

【解决方案1】：

在 JavaScript 中，调用 document.createElement 会调用带有 this = document 的 .createElement 方法。当您将其分配给变量时，它会失去这种关联。

您必须编写一个简短的函数才能正确调用该方法。例如：

var c = function(name){ return document.createElement(name); };

在某些浏览器使用的较新版本的 ECMAScript 中，您有更简单的选择

var c = document.createElement.bind(document);

很遗憾，这并未得到普遍支持。

【讨论】：

仅供参考，在 IE 7/8 中这种东西可以工作 var w = document.write;

【解决方案2】：

有两个明显的问题：

调用别名函数不会提供正确的this 值（它将是全局对象而不是document），DOM 方法可能依赖也可能不依赖它；
JavaScript 中的 DOM 节点是 宿主对象，它们不受原生 JavaScript 对象的正常规则约束，本质上可以为所欲为。例如，不能保证主机对象的方法是常规的 Function 对象，因此可能没有 call() 或 apply() 方法，否则您可以使用这些方法来提供正确的 this 值。

既然如此，你最好写一个包装函数，比如

function c(tagName) {
    return document.createElement(tagName);
}

【讨论】：