聚合物this.push无法正常工作

Question

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

运行此代码时

dw

我收到此错误消息： 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

Answer 2

你必须注意protocol-delegate绑定，因为this的范围是函数内部的变化。

this