var id = 1
this.id = 1
の違いは何ですか?
気になる質問をクリップする
クリップした質問は、後からいつでもMYページで確認できます。
またクリップした質問に回答があった際、通知やメールを受け取ることができます。
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
回答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
にアクセス出来なくなります。
そこで下記のように一度this
をself
に突っ込んで、別スコープにアクセスするテクニックを覚えておくと捗ります。
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総合スコア21158
あなたの回答
tips
太字
斜体
打ち消し線
見出し
引用テキストの挿入
コードの挿入
リンクの挿入
リストの挿入
番号リストの挿入
表の挿入
水平線の挿入
プレビュー
質問の解決につながる回答をしましょう。 サンプルコードなど、より具体的な説明があると質問者の理解の助けになります。 また、読む側のことを考えた、分かりやすい文章を心がけましょう。
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
2016/11/30 12:48