如何在 JavaScript 中访问“this”的父级？答案

【问题标题】：How to acces to parent of "this" on JavaScript?如何在 JavaScript 中访问“this”的父级？
【发布时间】：2017-05-07 15:34:11
【问题描述】：

我在使用 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()？

【问题讨论】：

这取决于。事件处理程序是否使用 jQuery？ a_method 如何调用 （this 取决于执行上下文） ？

标签： javascript class oop this

【解决方案1】：

ES6

您可以使用箭头函数来保留词法this：

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

ES5

你可以用好旧的that = this：

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

【讨论】：

感谢您的回复，我已经使用了更新版本：箭头函数，并且工作正常。我不知道这存在，因为我只是一个初学者，所以......你能解释一下什么是箭头函数，我应该什么时候使用它？再次感谢您！
不客气！ :) 如果你想了解更多关于箭头函数，我建议你在这里阅读我的深入回答：stackoverflow.com/questions/43588722/…

【解决方案2】：

在你的构造函数中你可以说：

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

【讨论】：

我认为这不能解决问题，因为在匿名函数内部，this.a_needed_method 仍将是 undefined。

【解决方案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

或来自es6的arrow函数：

    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

【讨论】：

您需要将this绑定到作为参数传递给on的函数，而不是绑定到on函数的返回值。
@Titus 谢谢你提醒我，我已经更新了两次绑定。 :)
为什么你认为最后一次绑定是必要的？实际上，最后一个是已弃用的 jQuery .bind() 方法，而不是 Function.prototype.bind，将 this 传递给它不会有任何用处。

【解决方案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

【讨论】：