javascript - document.querySelectorAll赋给其它变量时, 为什么要.bind(document)?
黄舟
黄舟 2017-04-11 12:10:35
[JavaScript讨论组]

http://www.ruanyifeng.com/blo...
阮一峰的博客提到$的替代方法:

 var $ = document.querySelectorAll.bind(document);

让我比较在意的是最后那个bind
按理说querySelectorAll是作为document的方法调用的, 执行上下文已经是document了啊, 为什么还要再bind一次呢?

比如: 执行如下代码:

var select = document.querySelectorAll; 
select('span'); 

会报错

VM2761:1 Uncaught TypeError: Illegal invocation(…)

select.call(document, 'span'); 

就会得出正确结果了.
求解!~

黄舟
黄舟

人生最曼妙的风景,竟是内心的淡定与从容!

全部回复(5)
PHPz

这个问题其实和querySelectorAll没什么关系。
document是类的一个实例,而querySelectorAll是原型链上的方法。
类比到普通的类和原型方法就很好理解了吧。

通过实例来运行原型链上的方法时,解释器会自动将this指向那个实例
但是直接这样var select = document.querySelectorAll;,你的变量仅仅是指向了原型链上的那个函数,而没有绑定this指针,所以你才需要在外面手动绑定一下指针。

PHP中文网

你直接调用函数执行上下文是document,但是你把querySelectorAll方法赋值给一个变量,在调用就不再是document了,调用的时候,再调用这个函数和这个函数原来的所有者没有任何关系。-

$('id')
//不就是
window.$('id')
阿神

因为document.querySelectorAll是通过document这个对象去调用querySelectorAll的时候,函数的环境变量里this会指向document,假设querySelectorAll含有this的操作的话,那么this就会指代document。

而当你执行var select = document.querySelectorAll; 的时候,select所得到的是querySelector这个引用,但是此时如果直接通过select去调用的话,也就是select('span'); ,由于select(querySelectorAll)直接调用的话,this会自动指向window,所以就会出错。

bind的作用是,创建一个新函数,称为绑定函数。当调用这个绑定函数时,绑定函数会以创建它时传入 bind()方法的第一个参数作为 this,传入 bind() 方法的第二个以及以后的参数。
而这句话var $ = document.querySelectorAll.bind(document);的效果相当于下面的代码

var $ = function(document) {
    return function() {
        return document.querySelectorAll.call(document, arguments);
    }
}
怪我咯

我的理解是this的指向问题。
querySelectorAll是document下的一个方法,
附值给select后,select已经是window下的一个属性,此时,this已经不再是document,而window下没有querySelectorAll方法,所以会报错;var select = document.querySelectorAll.bind(document),能保证调用select()时this永远指向document

黄舟
var a = {b: function() {console.log(this);}}
var c = a.b;
c();

你在浏览器上运行下看看 这时候console出来的是a对象还是window对象

热门教程
更多>
最新下载
更多>
网站特效
网站源码
网站素材
前端模板
关于我们 免责申明 举报中心 意见反馈 讲师合作 广告合作 最新更新 English
php中文网:公益在线php培训,帮助PHP学习者快速成长!
关注服务号 技术交流群
PHP中文网订阅号
每天精选资源文章推送
PHP中文网APP
随时随地碎片化学习

Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号