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

Question

我们正在尝试创建自己的Javascript库，以取代jQuery并减少开销。我们想在全局范围内使用以下方法调用函数 this 关键字，但脚本在我们的 foreach 循环中中断了。我们如何在内部或自定义的 "each "函数中使用我们的 $(this).getAtt('data-src') 函数而不是 a.getAttribute('data-src')

this 是默认为窗口的对象。这里是我们的库的最小化版本。

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'));
    });
}

而我们最小化的HTML.NET，也就是我们的HTML。

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

Answer 1

传递你想要的调用上下文（元素）到 getAttribute 方法，利用 .call().

您还需要 c 构造函数来设置 elems 如果参数是一个元素，则将其属性添加到参数中。

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

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
}

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 if (w instanceof HTMLElement) {
      this.elems = [w];
    } 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.call(this.elems[i], 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'));
  });
}

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