thisキーワードとは？
JavaScriptで、オブジェクトをnewした際に、コンストラクタが呼び出されますが、コンストラクタによって生成されるインスタンスのことです。
thisキーワードの特徴
thisキーワードは下記の特徴を持つので扱いには非常に慎重になる必要があります。
- スクリプトのどこからでも参照できる特別な変数
- 呼び出す場所や、呼び出しの方法によって中身が変わる。
呼び出す場所による「thisキーワードの中身」
| 呼び出す場所 | thisの参照先 |
|---|---|
| classの中 | classのインスタンス |
| オブジェクトの中 | オブジェクトそのもの |
| 関数の外 | グローバルオブジェクト |
| 関数の中 | グローバルオブジェクト(Strictモードでは、undefined) |
| call/applyメソッド | 引数で指定されたオブジェクト |
| イベントリスナー | イベントの発生元 |
| コンストラクター | 生成したインスタンス |
| メソッド | 呼び出しもとのオブジェクト（レシーバーオブジェクト） |
call/applyメソッドについては下記の記事で解説しています。
オブジェクトの中
オブジェクトの中のthisに関しては以下のように使ったりします。
|
1 2 3 4 5 6 7 8 9 10 11 |
const person = { name: "太郎", age: 24, setAge: function (age) { this.age = age; }, }; console.log(person); // age=24 person.setAge(34); console.log(person); // age=34 |
アロー関数の場合
ES6から登場したアロー関数を使った場合は通常の関数宣言と異なりthisは一つ親のスコープの物を使うようになります。
普通の関数を使った場合
|
1 2 3 4 5 6 7 8 9 10 |
let obj = { value: 5, kansu: function () { setTimeout(function () { console.log(this.value); //thisでは親スコープであるobjブロックのvalueを参照できない。 }, 1000) } } obj.kansu(); |
アロー関数を使った場合
|
1 2 3 4 5 6 7 8 9 10 |
let obj = { value: 5, kansu: function () { setTimeout(() => { console.log(this.value); //親スコープのvalueを参照する事ができる。 }, 1000) } } obj.kansu(); |
ただ、以下のようにさらに呼び出し元の関数もアロー関数とするとその下のスコープでthisにより参照できなくなります。これはthisがさらに上のスコープであるグローバルスコープを参照するようになってしまうためです。アロー関数を使ったからと言ってthisの扱い方に関しては万能ではないので注意しましょう。
|
1 2 3 4 5 6 7 8 9 10 |
let obj = { value: 5, kansu: () => { //アロー関数に変更 setTimeout(() => { console.log(this.value); //親スコープのvalueを参照する事ができなくなる。 }, 1000) } } obj.kansu(); |
Vue.jsの場合
Vue.jsでthisを指定した場合は下記のようになります。
| thisの指定場所 | 説明 |
|---|---|
| Vue()の内側のローカルスコープ | Vueインスタンスを指します。 |
| Vue()の外側のグローバルスコープ | ブラウザのwindowオブジェクトを指します。 |
コンストラクタの注意点
JavaScriptでは、コンストラクタも関数として呼び出すことが可能です。
しかし、関数で呼び出したコンストラクタの場合は、thisキーワードを使うと、インスタンス変数ではなく、普通にグローバルオブジェクトに値が格納されてしまいます。
バグの元になるので注意しましょう。
この記事へのコメントはありません。