Ионные V2 и плагины Кордовы - Непринятые TypeError: Не могу установить свойство 'test' of null

Question

Я использую Ionic v2 и Phonegap Barcode Scanner plugin.

При выполнении функции scanBarcode() ниже я получаю сообщение об ошибке:

Uncaught TypeError: Cannot set property 'test' of null 

в

this.test = result.text; 

код:

import {Page} from 'ionic-angular'; 


@Page({ 
    templateUrl: 'build/pages/scanBarcode/scanBarcode.html' 
}) 
export class ScanBarcode { 
    constructor() { 
    this.test = ""; 
    } 

    scanBarcode(){ 
    cordova.plugins.barcodeScanner.scan(
     function (result) { 
     console.log(result.text); 
     this.test = result.text; 
     console.log("SB result" + test); 
     }, 
     function (error) { 
     alert("Scanning failed: " + error); 
     } 
    ) 
    } 
} 

Первый console.log не имеет ошибки и показывает правильную информацию:

console.log(result.text); 

Answer 1

Проблема с вашим кодом заключается в том, что вы пытаетесь получить доступ к указателю «this» вашего класса внутри функции результата метода сканирования.

Для того, чтобы исправить это, выполните следующие действия:

scanBarcode(){ 

    //Create 'self' variable outside the scan function, assigning 'this' to it 
    let self = this; 

    cordova.plugins.barcodeScanner.scan(
    function (result) { 
     console.log(result.text); 
     //Use 'self' instead of 'this' to access 'test' 
     self.test = result.text; 
     console.log("SB result" + test); 
    }, 
    function (error) { 
     alert("Scanning failed: " + error); 
    } 
) 
} 

Объяснение

При вызове функции .scan(), вы даете ему два обратных вызовов. Вы не можете использовать «это», чтобы выполнить то, что хотите, потому что в Javascript «это» имеет контекст вызывающего функции.

Обычно, когда вы получаете доступ к «этому» внутри обратного вызова, он имеет контекст «окна». Это потому что, когда вы (определяете и) вызываете функцию без контекста объекта, вы фактически используете контекст окна. Пример:

function fun(){ console.log('this = window; in here'); 
fun(); 

Что на самом деле происходит это:

window.fun = function() { /* ... */ } 
window.fun(); 

(Для получения дополнительной информации об этом, читайте о модели ориентации объекта-прототипа на основе JavaScript в)

В этом случае вы бы Не можете set property 'test' undefined ошибка. Но, поскольку ваш обратный вызов вызывается непосредственно плагином cordova, я считаю, что «это» вообще не имеет контекста (я не уверен, хотя).

В любом случае, поскольку обратный вызов не вызван с вашим контекстом экземпляра класса, «это» не представляет собой экземпляр вашего класса и, следовательно, не имеет свойства «test».

Наконец, поскольку обратный вызов является закрытием, а замыкание запоминает среду, в которой оно было создано, обратный вызов знает о существовании переменной «я». Вот почему вы можете использовать его в этом случае.