Javascript数组过滤器：正确获取上下文

时间：2012-07-24 14:12:53

标签： javascript functional-programming

在尝试编写一些非常棒的JS时，我遇到了一些奇怪的JS行为。我已经创建了一段代码来演示我的问题：

http://jsfiddle.net/CeyCy/ 

<html>
  <head>
    <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
    <script type="text/javascript">
    $(function() {
      var images = $('.images').children();
      var filtered = images.filter(function(i, image) {
        console.log(this);
      }, "abc");
    });
    </script>
  </head>
  <body>
    <div class="options">
      <div class="filters">
      </div>
      <ol class="pagination">
      </ol>
    </div>
    <div class="results">
      <ul class="images">
        <li data-category="Zakelijk">Result 1</li>
        <li data-category="Speels">Result 2</li>
        <li data-category="Blogging">Result 3</li>
        <li data-category="Zakelijk">Result 4</li>
        <li data-category="Speels">Result 5</li>
        <li data-category="Blogging">Result 6</li>
        <li data-category="Zakelijk">Result 7</li>
        <li data-category="Speels">Result 8</li>
        <li data-category="Blogging">Result 9</li>
        <li data-category="Zakelijk">Result 10</li>
        <li data-category="Speels">Result 11</li>
        <li data-category="Blogging">Result 12</li>
        <li data-category="Zakelijk">Result 13</li>
        <li data-category="Speels">Result 14</li>
        <li data-category="Blogging">Result 15</li>
      </ul>
    </div>
  </body>
</html>

好的，现在我的问题。使用Array.filter方法时，您将回调函数作为第一个参数传递，将可选上下文作为第二个参数传递。正如你所看到的，我通过＆＃34; abc＆＃34;作为背景（这是荒谬的，当然）。我希望我的控制台会抛出很多＆＃34; abc＆＃34;，而是打印出jQuery元素！

有人可以对此有所启发吗？

谢谢，

马亭

1 个答案:

答案 0 :(得分：6)

  

正如你所看到的，我正在传递“abc”作为背景（这是荒谬的，当然）。我希望我的控制台会抛出很多“abc”，而是打印出jQuery元素！

你正在使用jQuery's filter，它没有上下文参数，而不是ES5的Array#filter，因为你在jQuery对象上调用filter，而jQuery对象是不是数组（尽管它们提供了许多类似于数组的功能，以及一些名称相似的“方法” - 包括filter）。

为您提供三种选择：

makeArray

您可以使用jQuery的makeArray将jQuery对象转换为数组，例如：

$(function() {
  var images = $.makeArray($('.images').children());
  var filtered = images.filter(function(i, image) {
    console.log(this);
  }, "abc");
});

Updated fiddle

proxy / bind

或者，您可以使用jQuery的proxy函数（或ES5的Function#bind）来绑定您传递给jQuery的filter的迭代器函数，以便它忽略this jQuery供应：

$(function() {
  var images = $('.images').children();
  var filtered = images.filter($.proxy(function(i, image) {
    console.log(this);
  }, "abc"));
});

将Array#filter应用于jQuery对象

或您可以将Array#filter直接应用于jQuery对象：

$(function() {
  var images = $('.images').children();
  var filtered = Array.prototype.filter.call(images, function(i, image) {
    console.log(this);
  }, "abc");
});

...因为Array#filter 明确定义以处理类似数组的任何内容，而不仅仅是Array s。最后可能实际上是最有效的方法。 Fiddle

相关问题
最新问题