在函数上下文中使用此关键字的Javascript回调

我们正试图创建自己的Javascript库来取代jQuery并减少开销。我们希望使用

this

关键字从全局范围调用函数，但是脚本在我们的foreach循环中中断了。我们如何使用

$（this）.getAtt（'data-src'）

函数而不是

a.getAttribute（'data-src'）

函数回调内部或自定义“each”函数中的对象

此

默认为窗口的对象。这是我们图书馆的最小化版本

var $=(function(){
    'use strict';

    var c = function(w){
        if(!w)return;
        if(w==='document'){this.elems=[document];} 
        else if(w==='window'){this.elems=[window];} 
        else {this.elems=document.querySelectorAll(w);}
    };

    c.prototype.each = function(callback){
        if(!callback || typeof callback !== 'function')return;
        for(var i = 0, length = this.elems.length; i < length; i++){callback(this.elems[i], i);}return this;
    };

    c.prototype.setAtt=function(n,v){this.each(function(item){item.setAttribute(n,v);});return this;};
    c.prototype.getAtt=function(n){return this.elems[0].getAttribute(n);};

    var init=function(w){return new c(w);};return init;
})();

function loadImgs(){
    $("img[data-src]").each(function(a,b){
        console.log(a.getAttribute('data-src'));
        console.log($(this).getAtt('data-src'));
    });
}

var$=（函数（）{
"严格使用",；
var c=函数（w）{
如果（！w）返回；
if（w==='document'）{this.elems=[document]；}
else如果（w==='window'）{this.elems=[window]；}
else{this.elems=document.queryselectoral（w）；}
};
c、 prototype.each=函数（回调）{
如果（！callback | | typeof callback！=“function”）返回；
对于（vari=0，length=this.elems.length；i

我们的最小化HTML：

<a onclick="loadImgs();">lazyload</a><br>
<img src="spacer.gif" alt=""/></div><img class="lazyLoad" data-src="replacer.jpg" alt="">

lazyload

使用

.call（）

将所需的调用上下文（元素）传递给

getAttribute

方法

如果参数是元素，则还需要

c

构造函数将

elems

属性设置为参数：

} else if (w instanceof HTMLElement) {
  this.elems = [w];
}

for（var i=0，length=this.elems.length；i

var$=（函数（）{
"严格使用",；
var c=函数（w）{
如果（！w）返回；
如果（w==‘文件’）{
this.elems=[document]；
}如果（w==‘窗口’）{
this.elems=[window]；
}else if（带HtmleElement实例）{
this.elems=[w]；
}否则{
this.elems=document.queryselectoral（w）；
}
};
c、 prototype.each=函数（回调）{
如果（！callback | | typeof callback！=“function”）返回；
for（var i=0，length=this.elems.length；i

lazyload

非常感谢，非常感谢

for (var i = 0, length = this.elems.length; i < length; i++) {
  callback.call(this.elems[i], this.elems[i], i);
  //            ^^ "this" in callback
  //                           ^^ first argument to callback
  //                                          ^^ second argument to callback
}