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

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

新規登録して質問してみよう
ただいま回答率
85.50%
AngularJS

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

Q&A

解決済

1回答

1428閲覧

angularJS varとthis

whxtna

総合スコア57

AngularJS

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

0グッド

2クリップ

投稿2016/11/29 12:59

編集2016/11/29 13:00

var id = 1

this.id = 1

の違いは何ですか?

気になる質問をクリップする

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

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

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

guest

回答1

0

ベストアンサー

JavaScriptの闇へようこそ!

これは素のJavaScriptの知識も関係してくるので、少し座学をはさみましょう。
JSはプロトタイプベースのオブジェクト指向言語というセリフを聞いたことがありませんか?
これがそのthisとvarの使い分けにモロ影響します。

CoffeeScriptというAltJSはクラスがサポートされており、
それによりクラスっぽく扱えるオブジェクトをJavaScriptで作ってくれます。
下記はthis.nameを定義したCoffeeScriptとコンパイルされたJavaScriptの実装例です。

CoffeeScript

1class Animal 2 constructor: (@name) -> 3 mew: -> 4 console.log @name 5 6cat = new Animal "mike" 7cat.mew() 8console.log cat 9console.log cat.name

JavaScript

1var Animal, cat; 2 3Animal = (function() { 4 function Animal(name) { 5 this.name = name; 6 } 7 Animal.prototype.mew = function() { 8 return console.log(this.name); 9 }; 10 return Animal; 11})(); 12 13cat = new Animal("mike"); 14cat.mew(); // "mike" 15console.log(cat); // Animal {name: "mike"} 16console.log(cat.name); // "mike"

キャットというオブジェクト自身にnameというプロパティが定義され、
自在に呼び出すことができます。


続いてVarを使って同じ事をやってみましょう。
JSを一部書き換えて…下記のように修正しました。

JavaScript

1var Animal, cat; 2 3Animal = (function() { 4 function Animal(item) { 5 var name = item; 6 } 7 Animal.prototype.mew = function() { 8 return console.log(name); 9 }; 10 return Animal; 11})(); 12 13cat = new Animal("mike"); 14cat.mew(); // Uncaught ReferenceError: name is not defined(…) 15console.log(cat); // Animal {} 16console.log(cat.name); // undefined

実行結果は全く違いますね。
コンストラクタメソッドで定義したvar nameは別のメソッドで拾う事はできません。
詳しくはscope等の単語でぐぐって調べてみてください。


AngularJSのバージョン1決め打ちで回答しますが、
この時のScopeは基本的にthisで使う事が前提です。

以下はテンプレートでバインドされたtitleを使う方法です。
リンクをクリックするとAjax通信を行い、コールバック関数の中身からthis.titleを書き換えるテクニックのサンプルを用意しました。
この時無名関数という事でコールバック関数に作ったばかりの使い捨ての関数をあてがいますが、そのときにスコープが変わるのでthis.titleにアクセス出来なくなります。
そこで下記のように一度thisselfに突っ込んで、別スコープにアクセスするテクニックを覚えておくと捗ります。

JavaScript

1app.directive("hoge", function(){ 2 return { 3 restrict: "C", 4 template: '<span>{{title}}</span><a ng-click="get_title()">タイトルを取得</a>', 5 controller: ['$scope', '$http', function($scope, $http){ 6 $scope.initialize = function(){ 7 this.title = "一時的なタイトル"; 8 }; 9 $scope.get_contents = function(){ 10 var self = this; 11 $http.get("/title").success(function(results){ 12 this.title = results.data; // NG、ここに突っ込んでもスコープが違うので上書きできない 13 self.title = results.data; // OK 14 // $scope.title = results.data; // これでもOK 15 }); 16 }; 17 $scope.initialize(); 18 }] 19 }; 20});

投稿2016/11/29 15:00

編集2016/11/30 14:53
miyabi-sun

総合スコア21158

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

whxtna

2016/11/30 12:48

ご丁寧にありがとうございます。 参考にさせてもらいます。
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

ただいまの回答率
85.50%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問