Question

从附加到事件的函数中引用“ this.target”的正确方法是什么。

我知道这是一个简单的问题，我试图在这里寻找答案，但是由于缺乏知识，我无法找到与该问题直接相关的答案。

    function ChangeBgCol(target,color){
        this.target = target;
        this.color = color;
        this.changeCol = function(){ 
            document.getElementById("button").addEventListener("click",function(){
                document.getElementById(this.target).style.backgroundColor = this.color;   
            });
        }
    }

    var change = new ChangeBgCol("tar1","red");
    change.changeCol();

.divStyle{
    width: 50px;
    height: 50px;
    background-color: black;

  <div class="divStyle" id="tar1"></div>
  <div class="divStyle" id="tar2"></div>
  <button id="button">press</button>

Answer 1

由于module.exports = { getDefaultOptions: function(){ return {foo: 'bar', ip: '1.1.1.1'} } };是一个函数，因此您需要将其绑定到构造函数，或者需要使用箭头函数。基本上，一旦您输入该嵌套函数，就会失去所有与父函数的词法绑定。

.changeCol

或

this.changeCol = this.changeCol.bind(this);

Javascript中的

this.changeCol = () => {}有点奇怪，您可以在Moz文档中进行阅读。 https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/this或SO How does the "this" keyword work?上的这个非常受欢迎的问题

Answer 2

此时的上下文与处理程序的上下文有关，而不是与ChangeBgCol的上下文有关。

一种替代方法是直接使用参数target和color。

function ChangeBgCol(target, color) {
  this.target = target;
  this.color = color;
  this.changeCol = function() {
    document.getElementById("button").addEventListener("click", function() {
      document.getElementById(target).style.backgroundColor = color;
    });
  }
}

var change = new ChangeBgCol("tar1", "red");
change.changeCol();

.divStyle {
  width: 50px;
  height: 50px;
  background-color: black;
}

<div class="divStyle" id="tar1"></div>
<div class="divStyle" id="tar2"></div>
<button id="button">press</button>

第二种方法是使用函数bind绑定所需的上下文，但是，您将丢失触发事件的上下文：

function ChangeBgCol(target, color) {
  this.target = target;
  this.color = color;

  this.changeCol = function() {
    document.getElementById("button").addEventListener("click", (function() {
      document.getElementById(this.target).style.backgroundColor = color;
    }).bind(this)/*Here is the binding logic*/);
  };
}

var change = new ChangeBgCol("tar1", "red");
change.changeCol();

.divStyle {
  width: 50px;
  height: 50px;
  background-color: black;
}

<div class="divStyle" id="tar1"></div>
<div class="divStyle" id="tar2"></div>
<button id="button">press</button>

如何从嵌套函数引用对象属性

2 个答案: