Question

我在Javascript中编写面向对象的问题。我有以下内容：

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

问题是，如果我使用a_needed_method调用this方法，那么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

您可以使用bind：

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

＆＃13;

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();

＆＃13;

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

＆＃13;

来自arrow的

或es6函数：

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

＆＃13;

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();

＆＃13;

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

＆＃13;

Answer 3

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

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

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

3 个答案:

ES6

ES5