Aオブジェクト内に定義したBオブジェクトのインスタンスの中身がなくなる

Question

webページを作っていてタイトルの現象が起きているのですが原因がわかりません。
きっかけ程度でもいいので情報がほしいです。

画面起動時とUI操作時に動作していて起動時は動いているのですがUI操作で呼び出すと「Cannot read property 'test' of undefined」が発生します

だいたい以下のような感じの処理なのですが何かご存じの方はおられますでしょうか

(2017/03/24 10:59 修正)

var A = function(objB) {
  this.objB = objB;
}

A.prototype.hoge = function() {
  this.objB.test();
}

var B = function() {}

B.prototype.test= function() {
  //処理
}

var a;
var b;
$(document).ready(function() {
 b = new B();
 a = new A(b);

})

Answer 1

thisが違う物を指すのが原因です。
サンプル
何らかの方法でthisを束縛するか、クロージャを使うのがいいと思います。

参考：
クラスメソッドをthisを使用してイベントハンドらに追加 - hogehoge foobar Blog Style5
ES6 で this が変わらないメソッド - Qiita

Answer 2

元のコードと実証用コードがかなり違うと想像しますが、objB.test(); は this.objB.test(); では？

var A = function(objB) {
  this.objB = objB;
}

A.prototype.hoge = function() {
//  objB.test(); // ここ
// ↓
  this.objB.test();
}

var B = function() {}

B.prototype.test= function() {
  //処理
  console.log( 'B' );
}
var b = new B();
var a = new A(b);
a.hoge();

Comments

[okashi123]

そうですね失礼致しました、修正しておきます。

[kei344]

いや質問文を修正しても･･･。
とりあえず実証用コードに問題は無いので、元のコードを提示されない限りわかりません。
たぶんnew A(c);とかb以外を渡しているだけだと思いますが。

[Lhankor_Mhy]

横からすみません。

> たぶんnew A(c);とかb以外を渡しているだけ
そうだとすると、undefined になるのは this.objB ではなくて this.objB.test なので、エラーメッセージ Cannot read property 'test' of undefined と整合しないと思います。

[kei344]

そうですね、正直そこまで考えていなかったです。
new A(undefined);
か
A.prototype.hoge = function() {
var objB
objB.test();
}
とかのほうが良いですか？

[Lhankor_Mhy]

瑣末な指摘でしたね。失礼いたしました。

[kei344]

いえ、指摘ありがとうございました。
Cannot read property 'test' of undefined になるためには宣言された未定義の変数のtestプロパティにアクセスする、という状況が必要ですね。とりあえず元コードのちょっとした記述ミスだとは思います。

[okashi123]

原因の箇所がわからなかったため簡潔にしたのですが原因の箇所が含まれていなかったようです。
申し訳ありません。

Answer 3

解決しました

ご指摘にあったとおり提示していたのは本来の文章とは異なっておりました。
原因の箇所がわからず全て記述してしまうと膨大になってしまうので簡潔に書いていたのですが問題の箇所が含まれていなかったようです。大変申し訳ありませんでした。

thisの内容を出力してみるとたしかに想定と違うものを指しておりました。
thisは想定通りのものを指すように修正したらうまくいきました

この度はありがとうございました

以下原因のコードと修正内容になります。

var A = function(objB) {
  this.objB = objB;
}

A.prototype.hoge = function() {
  this.objB.test();
}

var B = function() {}

B.prototype.test= function() {
  //処理
}

var a;
var b;
$(document).ready(function() {
 b = new B();
 a = new A(b);
 
// ajax(a.hoge());  //原因
 ajax(a.hoge.bind(a));  //修正
 

})

function ajax(callBack){
  $.ajax({
   /*省略*/
   success: function(){
    callBack()
   }
 })
}