質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

ただいまの
回答率

90.62%

  • JavaScript

    15877questions

    JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

  • AngularJS

    565questions

    AngularJSはオープンソースのJavaScriptフレームワークです。ブラウザ上で動作するウェブアプリケーションの開発にMVCアーキテクチャを取り入れることを目的としています。

[JS] var self = this の意味は?

解決済

回答 2

投稿 編集

  • 評価
  • クリップ 5
  • VIEW 7,025

ygeorge

score 24

JS初心者です。よろしくお願いします。

コードでよく下記のような書き方を見かけますが、これの意味はなんでしょうか?
var self = this;

今AngularJSの習得を目指しているのですが、下記も同じ意味ですか?
var self = $scope.self = this;
  • 気になる質問をクリップする

    クリップした質問は、後からいつでもマイページで確認できます。

    またクリップした質問に回答があった際、通知やメールを受け取ることができます。

    クリップを取り消します

  • 良い質問の評価を上げる

    以下のような質問は評価を上げましょう

    • 質問内容が明確
    • 自分も答えを知りたい
    • 質問者以外のユーザにも役立つ

    評価が高い質問は、TOPページの「注目」タブのフィードに表示されやすくなります。

    質問の評価を上げたことを取り消します

  • 評価を下げられる数の上限に達しました

    評価を下げることができません

    • 1日5回まで評価を下げられます
    • 1日に1ユーザに対して2回まで評価を下げられます

    質問の評価を下げる

    teratailでは下記のような質問を「具体的に困っていることがない質問」、「サイトポリシーに違反する質問」と定義し、推奨していません。

    • プログラミングに関係のない質問
    • やってほしいことだけを記載した丸投げの質問
    • 問題・課題が含まれていない質問
    • 意図的に内容が抹消された質問
    • 広告と受け取られるような投稿

    評価が下がると、TOPページの「アクティブ」「注目」タブのフィードに表示されにくくなります。

    質問の評価を下げたことを取り消します

    この機能は開放されていません

    評価を下げる条件を満たしてません

    評価を下げる理由を選択してください

    詳細な説明はこちら

    上記に当てはまらず、質問内容が明確になっていない質問には「情報の追加・修正依頼」機能からコメントをしてください。

    質問の評価を下げる機能の利用条件

    この機能を利用するためには、以下の事項を行う必要があります。

回答 2

+2

var a = {
    who: function () {
        alert('Im a');
    },
    inner: function () {
        var self = this,
        b = {
            who: function () {
                alert('Im b');
            },
            startTest: function () {
                this.who();
                self.who();
            }
        };
        b.startTest();
    }
};
a.inner();
JSは変数をスコープを辿って探してくれます。
それを利用して、functionなどによってスコープが変わってしまった場合に
外のオブジェクトにアクセスしたい場合に使います。

つまりselfという言葉に意味はなく、文字通り変数にその時のthisを入れているだけ
という意味です。
thisに対してthatを使ったりownだったり人によって様々です。

投稿

編集

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

checkベストアンサー

+1

thisはコンテキストへの参照を持っています。
つまり関数としての階層、そのコンテキストが変わった状態では内容が異なる物に変化しています。

function AAA(){
  this.name="a name";
  this.alert=function (){
    alert(this.name);//this(AAA).name=="a name"
  };
  
  (function (){//即時関数。定義と同時に実行される無名の関数式
    alert(this.name=="a name");//false
    //this.nameは"a name"でない
    //なぜなら this(window).nameになっているから
  }());
}

var xxx=new AAA;
xxx.name;//a name
xxx.alert();//a name

なぜ即時関数内では名前の参照ができないのでしょうか?
それは無名の関数内のコンテキストはwindow(グローバル)オブジェクトになるからです。

このことが同じオブジェクトのメソッドやプロパティを呼び出す際、問題になることがあります。
具体的にはイベントリスナの設定の際、引数を渡す関数を無名関数でラップした場合起こります。
メソッドやプロパティが未定義となりエラーを吐く等の問題が起こります。
これは無名関数がグローバルからそのメソッドやプロパティを探そうとするからです。
仮にグローバルに同名のメソッドが定義されていたならばそちらが実行されてしまいます。

このことを回避するためbind()を使用してthisを束縛するか、使用したいメソッドやプロパティがあるオブジェクトのthis(オブジェクトへの参照)を変数に入れておき、その変数から呼び出すという方法がある訳ですね。

AngularJSのコードも同じで以下のような処理です。
$scope.self = this;
var self = $scope.self;//self=$scope.self(===this)
これは以下をコンソールで確認すると分かりやすいでしょう
(function (){//即時関数内ではthis===window
  var A,B;
  A = B = this;
  console.log("1 : "+(A === this && B === this));//true
  console.log("2 : "+(this === window));//true
  //上記より
  //this === window === A === B
}());

投稿

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

15分調べてもわからないことは、teratailで質問しよう!

  • ただいまの回答率 90.62%
  • 質問をまとめることで、思考を整理して素早く解決
  • テンプレート機能で、簡単に質問をまとめられる

関連した質問

  • 受付中

    javascript のスコープについて

    $(function(){     var self = this;     self.fuga = function(){         return 'aaaaa';    

  • 解決済

    javascript インスタンス化

    初めまして、javascript prototype/インスタンス化に関しての質問です。  使い始めてから日が浅いので不手際ございましたら申し訳ありません。  またコードに不備が

  • 解決済

    WebAudioApiでのクラス化が上手く出来ません

    //Lineクラス var Line = function(length){     this.audioContext     this.wetGainNode;     thi

  • 解決済

    AngularJS コールバック スコープ

    現在AngularJSでAjaxで取得したデータを表示するだけのサンプルを作成しています。 Serviceを使ってコールバックを設定した時にコントローラーの変数へのアクセス方法が

  • 解決済

    bindメソッドの使い方について

    JavaScript本格入門[改訂新版]という本を読みながらJSの勉強をしているのですが、 以下のコードにおいて詰まってしまったので質問致します。 <!DOCTYPE ht

  • 解決済

    JavaScriptの関数内のさらに関数内のthisについて

    以下のように匿名関数の中にさらに匿名関数が入れ子になって入っている場合、どのようにthisをSelectViewのインスタンスに束縛することができるのでしょうか? 一つの匿名

  • 受付中

    jsでclass構文を使用する際に、self=thisを実現する方法を教えて下さい。

    jsでclassを使いたいのですが、 そのときに、self=thisとしたいのですが、varはいらないのでしょうか? varを入れるとエラーになってしまいます。 class S

  • 解決済

    thisの参照位置を変更したい

    前提・実現したいこと javascriptで画像を配置し、アニメーションを行えるような関数を制作しています。複数回インスタンス生成したいので、「this.変数名」を使って様々な値を

同じタグがついた質問を見る

  • JavaScript

    15877questions

    JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

  • AngularJS

    565questions

    AngularJSはオープンソースのJavaScriptフレームワークです。ブラウザ上で動作するウェブアプリケーションの開発にMVCアーキテクチャを取り入れることを目的としています。