javascript - polymer this.push 不起作用

Question

在 Polymer 1.x 中，我试图将数据从我的数据库推送到一个数组，但出于某种原因，它突然停止工作。

运行这段代码时

ready: function(){
    var leserbriefRef = firebase.database().ref('leserbriefe');
        leserbriefRef.on('value', function(snap) {
          var n = snap.child('numLeserbriefe').val();
          console.log(n);
          this.lbriefe = [];
          for(var i=0; i<n; i++){
                this.push("lbriefe", snap.child('l'+(n - 1 - i)).val());
            }
        });
  }

我收到此错误消息:firebase.js:283 Uncaught TypeError: this.push 不是函数

我不知道为什么。本周早些时候它仍然有效。

Answer 1

这是js初学者的一个常见问题，主要是this关键字的用法。匿名函数内的 this 变量的上下文不是您想要的(在本例中为元素)。要解决这个问题，您可以使用闭包 [1]、.bind[2] 或更新的 ES2015 箭头函数[3]。

关闭

ready: function() {
  // assign this to self
  var self = this;

  var leserbriefRef = firebase.database().ref('leserbriefe');
  leserbriefRef.on('value', function(snap) {
    var n = snap.child('numLeserbriefe').val();
    console.log(n);
    self.lbriefe = [];
    for(var i = 0; i < n; i++){
      self.push("lbriefe", snap.child('l'+(n - 1 - i)).val());
    }
  });
}

.绑定(bind)

ready: function() {
  var leserbriefRef = firebase.database().ref('leserbriefe');
  leserbriefRef.on('value', function(snap) {
    var n = snap.child('numLeserbriefe').val();
    console.log(n);
    this.lbriefe = [];
    for(var i = 0; i < n; i++){
      this.push("lbriefe", snap.child('l'+(n - 1 - i)).val());
    }
  }.bind(this)); // bind this keyword to element's
}

ES2015 箭头函数(还不如完整的 ES2015)

ready() {
  const leserbriefRef = firebase.database().ref('leserbriefe');
  leserbriefRef.on('value', (snap) => { // arrow functions!
    const n = snap.child('numLeserbriefe').val();
    console.log(n);
    this.lbriefe = [];
    for(let i = 0; i < n; i++){
      this.push("lbriefe", snap.child(`l${n - 1 - i}`).val());
    }
  });
}

来源:

[1] https://developer.mozilla.org/en/docs/Web/JavaScript/Closures

[2] https://developer.mozilla.org/en/docs/Web/JavaScript/Reference/Global_objects/Function/bind

[3] https://developer.mozilla.org/en/docs/Web/JavaScript/Reference/Functions/Arrow_functions