Ionic V2 and Cordova Plugins - Uncaught TypeError: Cannot set property '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

您的代码存在问题，您正试图在扫描方法的结果函数中访问 class 的 '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() 函数时，您给它两个回调。您不能使用 'this' 来完成您想要的，因为在 Javascript 中，'this' 具有函数调用者的上下文。

通常，当您在回调中访问 'this' 时，它具有 'window' 上下文。那是因为当你（定义和）调用一个没有对象上下文的函数时，你实际上是在使用 'window' 上下文。示例：

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

实际情况是：

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

（有关这方面的更多信息，请阅读 javascript 的基于原型的面向对象模型）

在这种情况下，您会遇到 无法设置属性 'test' of undefined 错误。但是，由于您的回调是由 cordova 插件直接调用的，我相信 'this' 根本没有上下文（不过我不确定）。

无论如何，由于没有使用您的 class 实例上下文调用回调，因此 'this' 不代表您的 class 的实例，因此没有 'test' 属性.

最后，由于回调是闭包，闭包会记住创建它的环境，回调知道 'self' 变量的存在。这就是您可以在这种情况下使用它的原因。

Ionic V2 and Cordova Plugins - Uncaught TypeError: Cannot set property 'test' of null

Ionic V2 and Cordova Plugins - Uncaught TypeError: Cannot set property 'test' of null

javascript

ionic-framework

cordova-plugins

ionic2

说明