Question

 ngOnInit() {
    console.log('this1: ', this);
    this.dbService.chats$.on('value', function(snapshot) {
        console.log('this2: ', this);
    });
}

第一个console.log具有组件的所有字段，而第二个控制台日志具有 null

Answer 1

使用以下代码：-

extension ViewController: UITableViewDataSource, UITableViewDelegate, SwipeTableViewCellDelegate {

这是由于ngOnInit() { console.log('this1: ', this); this.dbService.chats$.on('value',(snapshot) => { console.log('this2: ', this); }); }现在引用了this中的上下文。但是，当您使用粗箭头function =>时，是指外部环境。

Answer 2

在匿名功能或回调函数中，这是指当前上下文。

因此在您的示例中，它是指回调函数下的上下文。

所以问题是如何访问外部this。

有两种方法可以访问外部this。

1。箭头功能：

ngOnInit() {
    console.log('this1: ', this);
    this.dbService.chats$.on('value', (snapshot) => {
        console.log('this2: ', this);
    });
}

2。使用绑定：

ngOnInit() {
    console.log('this1: ', this);
    this.dbService.chats$.on('value', function(snapshot) {
        console.log('this2: ', this);
    }.bind(this));
}

Answer 3

调用匿名函数时，要维护this的实例，请使用箭头函数

代替

 ngOnInit() {
    console.log('this1: ', this);
    this.dbService.chats$.on('value', function(snapshot) {
        console.log('this2: ', this);
    });
}

使用

 ngOnInit() {
    console.log('this1: ', this);
    this.dbService.chats$.on('value', (snapshot) => {
        console.log('this2: ', this);
    });
}

Answer 4

有时，此的上下文功能不可用。请参阅此是一个特殊的关键字，其用法完全取决于您与功能一起使用的方式/位置和时间。

尝试以下更改，希望它可以解决您的问题。

 ngOnInit() {
    console.log('this1: ', this);
    let that = this;       // you can give any name to variable.
    that.dbService.chats$.on('value', function(snapshot) {
        console.log('this2: ', that);
    });
}

为什么“ this”在回调函数中变为空？

4 个答案: