我刚刚阅读了这个问题并想尝试alias 方法而不是函数包装器方法,但我似乎无法让它在 Firefox 3 或 3.5beta4 或 Google Chrome 中工作,无论是在调试窗口还是在测试网页中.
萤火虫:
>>>window.myAlias = document.getElementById功能()>>>myAlias('item1')>>>window.myAlias('item1')>>>document.getElementById('item1')<div id="item1">如果我把它放在网页中,调用 myAlias 会给我这个错误:
未捕获的异常:[异常...对WrappedNative原型对象的非法操作"nsresult:0x8057000c(NS_ERROR_XPC_BAD_OP_ON_WN_PROTO)"位置:JS框架:: file:///[...snip...]/test.html :: :: line 7" 数据:无]Chrome(为了清晰起见,插入了 >>>):
>>>window.myAlias = document.getElementById函数 getElementById() { [本机代码] }>>>window.myAlias('item1')类型错误:非法调用>>>document.getElementById('item1')<div id=?"item1">?在测试页面中,我得到了同样的非法调用".
我做错了吗?其他人可以复制这个吗?
另外,奇怪的是,我刚刚尝试过,它在 IE8 中也能运行.
解决方案您必须将该方法绑定到文档对象.看:
>>>$ = document.getElementByIdgetElementById()>>>$('bn_home')[异常...无法修改 WrappedNative 的属性"...匿名 :: 第 72 行数据:否]>>>$.call(文档,'bn_home')<body id="bn_home" onload="init();">当你做一个简单的别名时,这个函数是在全局对象上调用的,而不是在文档对象上.使用一种叫做闭包的技术来解决这个问题:
function makeAlias(object, name) {var fn = 对象?对象[名称]:空;if (typeof fn == 'undefined') 返回函数 () {}返回函数(){返回 fn.apply(对象,参数)}}$ = makeAlias(document, 'getElementById');>>>$('bn_home')<body id="bn_home" onload="init();">这样你就不会丢失对原始对象的引用.
在 2012 年,来自 ES5 的新 bind 方法允许我们以一种更有趣的方式做到这一点:
>>>$ = document.getElementById.bind(document)>>>$('bn_home')<body id="bn_home" onload="init();">I was just reading this question and wanted to try the alias method rather than the function-wrapper method, but I couldn't seem to get it to work in either Firefox 3 or 3.5beta4, or Google Chrome, both in their debug windows and in a test web page.
Firebug:
>>> window.myAlias = document.getElementById function() >>> myAlias('item1') >>> window.myAlias('item1') >>> document.getElementById('item1') <div id="item1">If I put it in a web page, the call to myAlias gives me this error:
uncaught exception: [Exception... "Illegal operation on WrappedNative prototype object" nsresult: "0x8057000c (NS_ERROR_XPC_BAD_OP_ON_WN_PROTO)" location: "JS frame :: file:///[...snip...]/test.html :: <TOP_LEVEL> :: line 7" data: no]Chrome (with >>>'s inserted for clarity):
>>> window.myAlias = document.getElementById function getElementById() { [native code] } >>> window.myAlias('item1') TypeError: Illegal invocation >>> document.getElementById('item1') <div id=?"item1">?And in the test page, I get the same "Illegal invocation".
Am I doing something wrong? Can anyone else reproduce this?
Also, oddly enough, I just tried and it works in IE8.
解决方案You have to bind that method to the document object. Look:
>>> $ = document.getElementById getElementById() >>> $('bn_home') [Exception... "Cannot modify properties of a WrappedNative" ... anonymous :: line 72 data: no] >>> $.call(document, 'bn_home') <body id="bn_home" onload="init();">When you’re doing a simple alias, the function is called on the global object, not on the document object. Use a technique called closures to fix this:
function makeAlias(object, name) { var fn = object ? object[name] : null; if (typeof fn == 'undefined') return function () {} return function () { return fn.apply(object, arguments) } } $ = makeAlias(document, 'getElementById'); >>> $('bn_home') <body id="bn_home" onload="init();">This way you don’t loose the reference to the original object.
In 2012, there is the new bind method from ES5 that allows us to do this in a fancier way:
>>> $ = document.getElementById.bind(document) >>> $('bn_home') <body id="bn_home" onload="init();">
更多推荐
JavaScript 函数别名似乎不起作用
发布评论