javascriptのthis
javascriptのthisはどこが呼び出しているかよりも、どいつが呼び出しているか
によって値が左右されるため、呼び出し方によっては期待した動作をしないことがあります。
※単純にコントローラー(どこが)に作成したメソッドが呼ばれるわけではありません
以下のサンプルですとwindowオブジェクトがthisになっています。
ですので単純にthisを使おうとすると呼び出し側の事を考えなければなら無い為
「var self = this;」等としてthisの値を別の変数に置き換えるとわかりやすいと思います。
補足
call,apply,bind,アロー関数等を使うとその限りではありません
動作サンプル
リンク
コード
html
1<html>
2 <head>
3 <script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.4.3/angular.min.js"></script>
4 <script>
5
6 // グローバルな呼び出し
7 window.a = function(){
8 alert('windowオブジェクトのa()が呼び出されました')
9 }
10
11 // angularjsの定義
12 var app = angular.module('myApp', []);
13
14 // コントローラー
15 app.controller('LoginController', function($scope, LoginService) {
16
17 var self = this;
18
19 $scope.login = function(){
20 LoginService.login().then(function(){
21
22 if(this.a){
23 this.a();
24 }else{
25 alert('this.a()が呼び出されませんでした');
26 }
27
28 if(self.a){
29 self.a();
30 }else{
31 alert('self.a()が呼び出されませんでした');
32 }
33
34 if($scope.a){
35 $scope.a();
36 }else{
37 alert('$scope.a()が呼び出されませんでした');
38 }
39 });
40 }
41
42 // thisの呼び出し
43 this.a = function(){
44 alert('LoginController(this)のa()が呼び出されました');
45 }
46
47 // selfの呼び出し
48 self.a = function(){
49 alert('LoginController(self)のa()が呼び出されました');
50 }
51
52 // $scopeの呼び出し
53 $scope.a = function(){
54 alert('LoginController($scope)のa()が呼び出されました');
55 }
56
57 });
58
59 // サービス
60 app.factory('LoginService', function($q, $timeout){
61 var self = {};
62
63 // 非同期ログイン処理
64 self.login = function(){
65 var d = $q.defer();
66 $timeout(function() {
67 alert('ログイン完了!');
68 d.resolve();
69 }, 1000);
70 return d.promise;
71 }
72
73 // サービスのthis呼び出し
74 this.a = function(){
75 alert('LoginService(this)のa()が呼び出されました');
76 }
77
78 // サービスのself呼び出し
79 self.a = function(){
80 alert('LoginService(self)のa()が呼び出されました');
81 }
82
83 return self;
84 });
85 </script>
86 </head>
87 <body>
88 <div ng-app="myApp">
89 <div ng-controller="LoginController">
90 <button ng-click="login()">ログイン</button>
91 </div>
92 </div>
93 </body>
94</html>
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
2016/11/28 08:51
2016/11/29 00:44