3

MonacaクラウドでOnsenUI/AngularJSを使いアプリ制作の勉強中です。

ファイルを扱うAngularJSサービスオブジェクトを作っています。
フォルダのファイル一覧を取得するメソッドの中でFileSystemAPIを使うため
コールバック関数を使わなくてはならないのですが、その中でファイル一覧を格納するプロパティ(this.x)を書き換えようとすると以下のようなエラーが出ます(use strict)。

Error in Success callbackId: FileXXXXXXXXXX : TypeError: Attempted to assign to readonly property.

JavaScriptの仕様のようですが、コールバック関数内でプロパティを変更する
スマートな回避方法があればお教え頂けると幸いです。

再現する簡略化したコードを追記いたします。
実際にはエラー発生箇所でディレクトリの中身をプロパティに設定したいと考えております。

var obj = function() {
    'use strict';

    this.directory = '';

    this.changeDirectory = function(directory, returnFunction){
        this.directory = directory; //問題なし
        pstFileSystem.root.getDirectory(directory, {create: true, exclusive: false},
            function(dirEntry){
                this.directory = directory; //エラー
                returnFunction(dirEntry);
            }
        );
    };
};

window.onload = function() {
    'use strict';

    console.log('pageinit start!');
    var o = new obj;
    o.changeDirectory("/", function(dirEntry){console.log('directory is "' + o.directory + '"');});
};
3
  • コールバックから書き換えようとしているのが問題ではなくて、「読み取り専用の」プロパティを書き換えようとしているのが問題であるように見えます。 これ以上は、実際のコードを見てみないとなんとも言えません。
    – mysticatea
    Commented 2015年4月8日 5:00
  • コメントありがとうございます! コードを追記いたしました。 何かおわかりになりましたら是非宜しくお願いいたします。
    – TRNK
    Commented 2015年4月9日 4:39
  • ありがとうございます! ふむ、調べてみたところ getDirectory のコールバック関数の this はグローバル オブジェクト (ブラウザなら window) ですね。なんで読み取り専用なんてエラーが出たのかわからないです ^^;; とはいえ、今回の質問の回答には関係なさそうなので、それはスルーで....
    – mysticatea
    Commented 2015年4月9日 6:34

2 件の回答 2

5

外側のスコープの this にアクセスする方法は、方法は3つあります。

ひとつめ。ローカル変数に外側のスコープの this を保管して、それを使う。

var self = this;
...
function(dirEntry){
  self.directory = directory;
  returnFunction(dirEntry);
}

ふたつめ。コールバック関数の this に外側のスコープの thisbind する。

function(dirEntry){
  this.directory = directory;
  returnFunction(dirEntry);
}.bind(this)

このようにすると、コールバック関数の this は外側のスコープの this と同じオブジェクトになります。(IE9以降で動作します)

みっつめ。 ES2015 (ES6) で追加された ArrowFunction を使う。

(dirEntry) => {
  this.directory = directory;
  returnFunction(dirEntry);
}

ArrowFunction では、this は外側のスコープのものがそのまま使われます。(Chrome, Edge, Firefox, Opera で動作します)

0
2

this が指すものはその関数が実行されるタイミングで決定するので、コールバック設定時の this と一致することを期待してはいけません。

JavaScript の this キーワードは何を指すのか - コールバック関数内では this を使ってはいけない - vivid memo

この場合 this を他の変数に保存しておいて、コールバック関数内ではそれを使うとよいでしょう。

this.changeDirectory = function(directory, returnFunction){
    var self = this; //この時点でのthisを保存
    pstFileSystem.root.getDirectory(directory, {create: true, exclusive: false},
        function(dirEntry){
            self.directory = directory;
            returnFunction(dirEntry);
        }
    );
};

例:

var Hoge = function() {
  this.prop = "OK";
  this.run = function() {
    var self = this;
    setTimeout(function() {
      $('body').html(
        'this: ' + this.prop + "<br/>" +
        'self: ' + self.prop
      );
    }, 0);
  };
};

var o = new Hoge();
o.run();
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.10.0/jquery.min.js"></script>

なお、 this を保存するタイミングは changeDirectory の外側、 obj の中でも構いません。

0

この質問に回答するには、ログインする必要があります。

求めていた回答ではありませんか? のタグが付いた他の質問を参照する。