Question

寻求关于在闭包函数中修改对象的问题的一些指导。我在Angular 5中重写程序。我的程序使用商店来管理表单向导，其中一些问题使用svg元素/按钮来回答。单击后，将设置对象属性。下面的代码是我遇到问题的骨架版本。

我已经阅读了其他关闭帖子，但我没有遇到适合我情景的帖子。

感谢您提供重构的答案和/或建议。

class Builder {
  object:any;

  constructor(){
    this.object = {
       car:'blue'
    }
  }

  init(){
    //Short cutting to click commands.. Using lodash
    _.forEach(database, (o)=>{
      console.log(this.object.car); // 'blue' to console
      ((function(){
         button.click(function(){
            this.object.car = 'red';
            console.log(this.object.car); //Cannot read property 
                                              'object' of undefined
         });

       })(),false)
    }
  }

}

更新至原始帖子

我想我需要为可能遇到此问题的其他人添加更多信息。我提供的代码是我整体代码的骨架。

在测试之前，我使用（）= {}箭头表示法（以不同的组合方式）重构了函数（）调用，这并没有解决问题，因为它进一步破坏了需要（this）.element的方法。 button.click（）。

Answer 1

此处的一种方法是将this作为参数传递，例如

   ((function(that){
     button.click(function(){
        that.object.car = 'red';
        console.log(that.object.car);
     });

   })(this),false)     // <--  pass 'this' here

使用保留this的箭头功能，你可以做类似的事情

    console.log(this.object.car); // 'blue' to console
    button.click(() => {
        this.object.car = 'red';
        console.log(this.object.car);
    });

Answer 2

感谢每个人＆＃39;评论和提交的答案。我想说明@LGson提供的答案是一个可靠的答案并且有效。但是我觉得我需要稍微清理这篇文章并分享我为解决这个问题所做的事情，我使用canvas框架来生成依赖于（this）在button.click（）元素上的UI元素事件以及我无法访问外部对象的地方。

以下是我能够让它发挥作用的方式。

我将外部函数更改为箭头符号格式并向左移动 button.click（）调用如问题中所述。
我为self添加了一个指向我需要的对象的变量访问。

我在对象中添加了一个getter方法来返回值需要内部引用并使用self.car和self.getter进行设置并检索我需要的值。和库方法继续按预期工作。

class Builder {
 object:any;

 constructor(){
  this.object = {
    car:'blue',
    get value():{ return this.car;}
   }
  }

 init(){
  var self = this.object;

  _.forEach(database, (o)=>{
  console.log(this.object.car); // 'blue' to console
  ((()=>{
    button.click(function(){
         self.car = 'red';
         console.log(self.value); // red

    });

   })(),false)

} } }

如何从闭包中访问方法？

2 个答案: