无法读取“未定义”的属性推送

debugcn 发表于 Dev

克里斯里（Krisalay）

app.controller('ctrl', function($scope){
    var socket = io.connect();

    this.messages = [];

    this.sendMessage = function(){
        socket.emit('new message', this.input_message);
        this.input_message = '';
    }

    socket.on('new message', function(data){
        this.messages.push(data);
    });
});

我正在获取套接字发出的数据，但是当我尝试将该数据推入messages数组时，它显示了错误cannot read the property push of undefined。我在做什么错？

鲈鱼

这是行不通的，因为您要this在套接字范围（this.messages.push(data)）中进行调用，该范围与控制器范围不同。这就是为什么this.messages是undefined，因为它是在控制器的功能范围内声明的，但不是在插座回调函数范围。在javascript中，每个函数都有其自己的作用域（箭头函数除外）。

建议

app.controller('ctrl', function($scope){
   var ctrlContext = this;
   var socket = io.connect();

   //using the this keyword here means that
   //it's in the controller function scope.
   this.messages = [];

   this.sendMessage = function(){
      socket.emit('new message', this.input_message);
      this.input_message = '';
   }

   socket.on('new message', function(data){
      //inside the callback function we have a different
      //scope, which means that this.messages will be undefined.
      //but by referencing the controller function scope, you
      //are now able to use the messages property set the
      //outer (controller function) scope.
      ctrlContext.messages.push(data);

      //as you stated, you will also have to call $scope.$apply
      //or else the digest cycle will not be triggered.
   });
});

但是，如果您想this在套接字回调函数中使用关键字，则可以通过使用function.prototype.bind方法来实现，该方法允许您设置执行函数的上下文。

例子

var person = {
   name: 'John Doe';
}

//Create function and bind to context person    
var changeName = function() {
   this.name = 'Peter Smith';
}.bind(person);

console.log(person); // {name: 'John Doe'}

changeName(person);

console.log(person); // {name: 'Peter Smith'}

对于您的解决方案，它将类似于：

app.controller('ctrl', function($scope){
   var socket = io.connect();

   this.messages = [];

   var callback = function(data){
      this.messages.push(data);
   }.bind(this);

   socket.on('new message', callback);
});

本文收集自互联网，转载请注明来源。

如有侵权，请联系[email protected] 删除。