javascript のスコープについて

Question

$(function(){
    var self = this;
    self.fuga = function(){
        return 'aaaaa';
    };
    var hoge = {
        func : function(){
            alert(self.fuga());
        }
    };
}

このようなコードで8行目で
Uncaught TypeError: undefined is not a function
になってしまうのですがhoge.funcの中でfugaを使うにはどうしたらよいですか？？

Answer 1

前提としてjQueryを使用しているということでいいですよね？

$(function(){
    var self = this;
    self.fuga = function(){
        return 'aaaaa';
    };
    var hoge = {
        func : function(){
            alert(self.fuga());
        }
    };
    hoge.func()//aaaaa
})//←この閉じ括弧が質問のコードにないので追加しています

が動作することを確認しました。

undefiend(未定義)が出ていることから考えますと単純なミスではスペルミスが考えられます。
質問にあるスコープについてということですが質問にあるコードがそのままであるならば括弧を足し、呼び出せば動作するはずです。
もし質問のコードが実行したコードとは別の物であるならば考えられるのはスコープ外での呼び出しか、スペルミスです。
以下スコープについて(jQueryではなく通常のJavaScriptを例にして)説明します。

まずグローバル

var _name="A.B";
console.log(_name);//A.B

これは問題ないでしょう。次にこれはどうでしょうか。

var _name="A.B";
console.log(window._name);//A.B

javascriptでグローバルな変数、関数を定義したとき、それはwindowオブジェクトのプロパティになります。次は関数スコープについて確認してみましょう。

var _name="A.B";
function outputName(){
    console.log(_name)
}
outputName()//A.B

これも問題ないでしょう。グローバルな変数は関数内から呼び出すことができます。これは関数内にその変数が見つからない場合、外のスコープにその変数を探しにいくためです(スコープチェーン)
では逆ならどうでしょう。

function outputName(){
    var _name="A.B";
    console.log(_name);
}
outputName()//A.B

console.log(_name)//ReferenceError: _name is not defined

呼び出せませんね。これはスコープの中には探しにいかないことを示しています。
(今回の質問で問題を起こしているのはこれではないでしょうか。
"$(function (){})"の外から中の変数を呼び出せません)
またこれには例外があるので、この文章の最後に書かせていただきました。

更にthisの内容について考えてみましょう。

function A(){
    console.log(this);
}
A()//Window Object

Window Objectを出力しましたね。以下のコードではどうでしょう。

function testConstructor(){
  var _name="A.B";
  this.Number=150;
  this.outputThis=function (){
     console.log(this);
  };
  return this;
}

var b=new testConstructor();

//変数は呼び出せない
console.log(b._name);//undefiend

//プロパティは呼び出せる
console.log(b.Number);//150

b.outputThis()//testObject

thisとしてtestObjectが返ってきましたね。このようにthisはスコープによって内容が変動します。
きりがないのでそろそろ最後に。

function testConstructor(){
  var _name="A.B";
  this.Number=150;
  this.outputThis=function (){
     console.log(this);
  }.bind(window);
  return this;
};

var b=new testConstructor();

//変数は呼び出せない
console.log(b._name);//undefiend

//プロパティは呼び出せる
console.log(b.Number);//150

b.outputThis()//Window Object

bindメソッドはthisを特定の物に拘束する機能を持っています。最後に特殊な挙動について。

function testClosure(_Number){
  var _Num=_Number;
  
  function Add(_n){
      _Num+=_n;
  }
  
  return function (_n){
    Add(_n);
    console.log(_Num);
    return "";
  };
};

var b=testClosure(10);

b(5);//15

b(1);//16

クロージャ(Closure)と呼ばれる物です。この例では関数内の変数が実行する度に引数と足されて出力する処理となっています。
Objectやprototype(プロトタイプチェーン)についても書きたいですがここまでで。
問題が解決するといいですね。

Answer 2

JavascriptConsoleにこれを入力しても動作しますよ

var self = this;
self.fuga = function(){
    return 'aaaaa';
};
var hoge = {
    func : function(){
        alert(self.fuga());
    }
};
hoge.func();

Comments

[Cf_cwd]

var self=this;//Window
self.fuga = function(){//==window.fuga()==fuga()
return 'aaaaa';
};
var hoge = {
func : function(){
alert(fuga());//self==グローバルですので省略しても動作しますね
}
};

hoge.func();//aaaaa

質問者の方は以下のような感じで処理を書いていて困っているのではないかと考えているのですが

(function a(){
var self = this;
self.fuga = function(){
return 'aaaaa';
};
var hoge = {
func : function(){
alert(self.fuga());
}
};
}());

hoge.func()//ReferenceError: hoge is not defined