javascript - DOM 方法的短变量

Question

document.createElement, document.createTextNode, [element].setSelectionRange 等方法可以不做“快捷方式”吗？

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

document.body.appendChild(div);

当执行上面的代码时Firebug控制台返回错误:

uncaught exception: [Exception... "Could not convert JavaScript argument" nsresult: "0x80570009 (NS_ERROR_XPC_BAD_CONVERT_JS)" location: "JS frame :: http://fiddle.jshell.net/_display/ :: :: line 20" data: no]

这发生在 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);

Answer 1

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

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

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

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

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

不幸的是，这并没有得到普遍支持。