JavaScriptのthis参照について



JavaScriptのthisは、関数の呼ばれ方によって、参照するオブジェクトが異なる。ただし、アロー関数はこの限りではない。


呼び出し方参照
普通の関数呼び出しグローバルオブジェクト
メソッドとして呼び出しレシーバーオブジェクト
明示的に指定指定したオブジェクト
コンストラクターとして呼び出しインスタンス
イベントハンドラー/リスナーとして呼び出しイベントの発火元オブジェクト


普通の関数として呼ばれた場合、メソッドとして呼ばれた場合、明示的に指定した場合



main.js
function test() {
console.log('this === global');
console.log(this === global);
console.log('this === obj');
console.log(this === obj);
console.log('this === obj2');
console.log(this === obj2);
console.log('');
}

var obj = {
test: test
};

var obj2 = {}

console.log('***** test() *****');
test();
console.log('***** obj.test() *****');
obj.test();
console.log('***** (test.bind(obj2))() *****');
(test.bind(obj2))();


$ node main.js 
***** test() *****
this === global
true
this === obj
false
this === obj2
false

***** obj.test() *****
this === global
false
this === obj
true
this === obj2
false

***** (test.bind(obj2))() *****
this === global
false
this === obj
false
this === obj2

true

test()のように普通の関数として呼んだ時は、グローバル変数globalと等しい。obj.test()のようにメソッド呼び出しした時は、レシーバーオブジェクトobj（.の左辺のオブジェクト）と等しい。bindで明示的にthisが参照するオブジェクトを指定した時は、指定したオブジェクト（上の例ではobj2）と等しい。なお、(test.bind(obj2))();は、test.call(obj2);、test.apply(obj2);などとしても同じ。

コンストラクターとして呼ばれた場合

生成されたインスタンスを参照。

main.js
var obj = null;
function Constructor() {
obj = this;
}
var instance = new Constructor();
console.log(obj === instance);

$ node main.js 

true

イベントハンドラー/リスナーとして呼ばれた場合

イベントハンドラー/リスナー内では、thisはイベントソースオブジェクト（イベントの発行元オブジェクト）を参照する。
この動作は、クライアントサイド、サーバーサイドともに共通である。

クライアントサイドの場合

クライアントサイドでは、イベントハンドラー/リスナー内のthisは、設定先の要素自身を参照する。

<button id="test"></button>

(function() {
document.addEventListener('DOMContentLoaded', function() {
var button = document.querySelector('#test');
button.addEventListener('click', function() {
console.log(this.constructor)
});
})
})();


ボタンを押すと、コンソールに下記が出力

ƒ HTMLButtonElement() { [native code] }

HTMLButtonElementは、querySelectorとかの戻り値と同じクラス。

補足だが、継承構造は下記。

https://developer.mozilla.org/en-US/docs/Web/API/HTMLButtonElement


Nodeの場合

下記に例を示す。
下記では、人を表現するPersonクラスを定義した。Personクラスのクラスメソッドであるaddにより、新しい人が作成され、人のリスト_personsに追加される。新しい人が追加されると、addという名前のイベントが発行される。Observerオブジェクトは、addイベントを監視するオブザーバーである。addイベントが通知されると、Observer.handleAddメソッドが呼び出される。Person.addListenerメソッドにより、オブザーバーとして登録される。

main.js
const events = require('events');
const EventEmitter = events.EventEmitter;

class Person {
constructor(name) {
this._name = name;
}
}

// クラス変数
Person._persons = [];
Person._eventEmitter = new EventEmitter();
//　クラスメソッド
Person.add = function(name) {
var person = new this(name);
this._persons.push(person);
this._eventEmitter.emit('add');
}
Person.addListener = function(event, listener) {
this._eventEmitter.on(event, listener);
}

// オブザーバー
const Observer = {
handleAdd: function() {
console.debug(this)
}
}

// イベントハンドラーの登録
Person.addListener('add', Observer.handleAdd)

Person.add('John');

上記コードを実行すると、thisがイベントソースであるEventEmitterを参照していることがわかる。

$ node main.js 
EventEmitter {
  _events: { add: [Function: handleAdd] },
  _eventsCount: 1,

  _maxListeners: undefined }

thisにObserver自身を参照させるには、下記のようにbindを使う。

// イベントハンドラーの登録
// Person.addListener('add', Observer.handleAdd)
Person.addListener('add', Observer.handleAdd.bind(Observer))


$ node main.js 

{ handleAdd: [Function: handleAdd] }

thisがObserverオブジェクトを参照するようになった。



コメント

コメントを投稿

このブログの人気の投稿

PowerShell 6で、Shift_JISのCSVをImport-Csvで読み込んだら文字化けした

Follow @venividivici830 PowerShell 4で作ったShift_JIS（シフトJIS）のCSVを読み込むスクリプトを、PowerShell 6で動かしたら文字化けした話。 結論としては、下記のようにすればOK。 > Import-Csv -Encoding ([System.Text.Encoding]::GetEncoding(932)) path_to_csv_file 現象 PowerShell 4では、 このページ にあるように、Import-Csvコマンドレットのオプションとして、-Encoding defaultを付ければよかった。 ところが、PowerShell 6では上手くいかない。 例えば、下記のようなshift-jisのCSVがある。 名前,年齢 田中,20 山田,10 これを、-Encoding defaultオプションで読み込むと、 > Import-Csv -Encoding default ./test.csv                        O N ---- ---- c 20   Rc 10   このように文字化けする具合だ。 原因 まず、「default」がutf-8に変わったのが原因のようだ。 .NET Framework クラスライブラリーの、System.Text名前空間の、Encodingクラスの、Defaultプロパティーを確認した。 > [ System.Text.Encoding ]:: Default BodyName           : utf-8 EncodingName       : Unicode (UTF-8) HeaderName         : utf-8 WebName           : utf-8 WindowsCodePage   : 1200 IsBrowserDisplay   : True IsBrowserSave     : True IsMailNewsDisplay : True IsMailNewsSave     : Tru
続きを読む

Windowsで、特定のユーザーに特定のサービスの再起動を許可する

Follow @venividivici830 Windowsで、ユーザーごとに、サービスレベルで操作権限（サービスの開始、停止など）を与える話です。 流れとしては、 scコマンドで、サービスの随意アクセス制御リスト (DACL) に対し、セキュリティ記述子定義言語 (SDDL) 構文で、アクセス制御情報を追加する ことになります。 これにより、あるユーザーはOracleの再起動だけ許可、あるユーザーはTomcatの再起動だけ許可、など、細かい権限設定が可能です。 サーバーのマシン自体の再起動権限は与えられないけど、アプリケーションサーバープログラムや、DBサーバープログラムの再起動だけは許可したい、などのシチュエーションに使えます。 サービスのDACLは、名の通り、サービス単位で権限を制御するためのACLです。 SDDLは、ACLを文字列で記述するための構文です。 「;」で各フィールドを区切る形です。詳細については、 こちら 。に公式ドキュメントｇ サービスの操作権限をユーザーレベルで制御するには、最低限、下記のように3つのフィールドを設定すれば良いようです。 (許可 (A)/拒否 (D);;アクセス許可の文字列;;; SID ) ;;や;;;って何だよ、と最初見た時思いましたが、フィールドが空で、デリミター（;）だけが並んでいるだけですね。 許可 (A)/拒否 (D) には、サービスに対する特定の操作を 許可する場合はA、拒否する場合はD を設定します。 （許可または拒否する）サービスに対する特定の操作は、 アクセス許可の文字列 で設定します。 このページ に、 アクセス許可の文字列 に設定できる値が一覧されています。 再起動の場合は、RP(Start)とWP(Stop)の操作を許可すれば良いので、RPWP を指定すれば良いです。 SID は、ユーザーオブジェクトに固有のIDで、要はユーザーのIDです。権限を付与したいユーザーのSIDを指定します。 権限を付与したいユーザーで、 コマンドプロンプトからwhoamiコマンドをuserオプション付きで実行することにより、SIDを取得できます。 > whoami /user WIndowsにもwhoamiコマンドがあったんですね。知らなかった。 まと
続きを読む

PowerShellでイベントログを取得する時、「指定した選択条件に一致するイベントが見つかりませんでした。」が煩わしいのでcatchする

Follow @venividivici830 Windowsサーバーを点検する時など、イベントログをPowerShellで操作すると便利です。 Get-WinEventコマンドレットでイベントログを取得できますが、指定した条件に当てはまるイベントログがない場合、下記のエラーがスローされます。 Get-WinEvent : 指定した選択条件に一致するイベントが見つかりませんでした。 〜 NoMatchingEventsFound, 〜 NoMatchingEventsFoundが示すように、ただ指定した条件にマッチするイベントがなかっただけなので、条件としてエラーのレベルを「重大」や「エラー」にした場合は、特に問題ないことが多い。 エラーとして赤文字でコンソールに出力されるのは煩わしいので、catchする。 下記は、スクリプトの例。 $ErrorActionPreference = "Stop" $today = Get-Date $from = $today.AddMonths(-1) $filter = @{LogName="system"; Level=1; StartTime=$from} try { Get-WinEvent -FilterHashtable $filter } catch { $category = $Global:Error[0].CategoryInfo.Category.ToString() if ($category -eq "ObjectNotFound") { # 問題ない } else { # Error Handling } } 上の例では、過去1ヶ月分の、WIndowsログ→システムの、エラーレベルが「重大」のログを取得している。 下記の部分のsystemを「application」に変えれば、アプリケーションのログを取得できる。 また、Level=2、3とすることで、それぞれエラーレベルが「エラー」、「警告」のログを取得できる。 $filter = @{LogName="system"; Level=1; StartTime
続きを読む