Question

我不确定如何标题这个问题，但这是我的两难选择。我有一个JS对象，我已经封装和继承了方法。其中一个方法插入一个锚标记，其中onclick事件指向同一对象的一个固有方法。在第二种方法中，我遇到麻烦，因为当用户触发锚标记的click事件时，＆＃34; this＆＃34;关键字现在是锚元素。所以这阻止我通过＆＃34;这个＆＃34;来访问对象中的属性。关键词。这是我的简化代码，所以你可以看到我在说什么。

＆＃13;

<!DOCTYPE html>
<html>

<head>
  <title>Working out an issue</title>

  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css">

  <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script>

  <script>
    function ListContainerViewer(name, readOnly) {
      this.name = name;
      this.readOnly = readOnly;
    }

    ListContainerViewer.prototype = {
      constructor: ListContainerViewer,
      addListItem: function(itemId, content) {

        var removeBtn = $('<a href="#"><span class="glyphicon glyphicon-remove pull-right" aria-hidden="true"></span> </a>')
          .clone()
          .click(this.removeListItem); // Here, "this" points to ListContainerViewer
        removeBtn.appendTo($("#selectedItemList"));
      },
      removeListItem: function() {

        if (this.readOnly == true) { // how do I point to ListContainerViewer.readOnly if this points to <a>?
          event.preventDefault();
          return;
        } else {
          this.remove(); // this should point to <a> that has the click event
        }
      }
    }
    var listContainer;
    $(document).ready(function() {
      listContainer = new ListContainerViewer('test', true);
      $('#button').click(function() {
        listContainer.addListItem('12345', 'test content');
      });

    });
  </script>
</head>

<body>

  <h1>Testing OO JS</h1>
  <a id='button' href='#'>Click to add</a>
  <div id="selectedItemList" style="{width: 800px; height: 400px; background-color: #dddddd}"></div>

</body>

</html>

＆＃13;

因此，如果您运行此代码段，请单击添加链接以添加锚标记，您会注意到当您单击X按钮锚点时，它会触发removeListItem函数，因此无法访问this.readOnly，因为这指的是锚标记。

Answer 1

您可以使用Function.prototype.bind或jQuery $.proxy方法设置函数的this值：

.click(this.removeListItem.bind(this));

现在你的函数this引用实例而不是被点击的元素。要获取单击的元素，您可以使用currentTarget对象的event属性：

removeListItem: function(event) {
    var element = event.currentTarget;
    // ...    
}

请注意，您使用的是DOM HTMLElement.remove方法，而不是jQuery对象的remove方法。较旧的浏览器不支持该方法。建议使用jQuery构造函数包装元素并使用remove方法：$(element).remove();

如何从对象的原型方法访问JavaScript对象属性

1 个答案: