如何在 JavaScript 上访问"this"的父级？

Question

我在JavaScript中具有问题为目标的问题。我有以下内容：

class Foo{
    constructor(){...}
    ...
    a_needed_method(){...}
    ...
    a_method(){
        ...
        jsObject.on("click",function(params){
            this.a_needed_method();
        });
    }  
}

问题是，如果我使用this调用a_needed_method方法，则this正在引用控制onclick事件的匿名函数。我如何从此匿名函数中调用a_needed_method()？

Answer 1

es6

您可以使用箭头函数保留词汇此：

jsObject.on("click", params => {
  this.a_needed_method();
});

ES5

您可以使用良好的旧that = this：

var that = this;
jsObject.on("click", function (params) {
  that.a_needed_method();
});

Answer 2

在您的构造函数中，您可以说：

constructor(){
  this.a_needed_method = this.a_needed_method.bind(this);
}

Answer 3

您可以使用bind：

    jsObject.on("click",function(params){
        this.a_needed_method();
    }.bind(this));

let jsObject = $(this);
class Foo {
  constructor() {
  }
  a_needed_method() {
    console.log('That works !');
  }
  a_method() {
    jsObject.on("click", function(params) {
      this.a_needed_method();
    }.bind(this));
  }
}
let x = new Foo();
x.a_method();

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
Click anywhere

或arrow es6的函数：

    jsObject.on("click",(params) => {
        this.a_needed_method();
    });

let jsObject = $(this);
class Foo {
  constructor() {
  }
  a_needed_method() {
    console.log('That works !');
  }
  a_method() {
    jsObject.on("click", (params) => {
      this.a_needed_method();
    });
  }
}
let x = new Foo();
x.a_method();

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
Click anywhere

Answer 4

假设this是a_method中的类，并且在执行上下文中被调用，并且假设事件处理程序正在使用jQuery，则可以简单地使用event.data来传递任何您想要的内容事件处理程序回调，这就是event.data要做的

a_method(){
    ...
    jsObject.on("click", {klass : this}, function(params){
        params.data.klass.a_needed_method();
    });
}  

let jsObject = $(this);
class Foo{
    constructor(){
    
    }
    a_needed_method(){
    		console.log('That works !');
    }
    a_method(){
        jsObject.on("click", {klass : this}, function(params){
            params.data.klass.a_needed_method();
        });
    }  
}
let x = new Foo();
x.a_method();

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
Click anywhere