これは、オンラインプログラミング学習サービス「ウェブカツ!!」にて、
javascript・jQuery部中級のオンライン学習で使用しているコードになります。
4. this
thisは呼び出し方によって、変わってくる。呼び出し方での違いは４種類。
//１：メソッド呼び出しパターン
//２：関数呼び出しパターン
//３：コンストラクタ呼び出しパターン
//４：apply,call呼び出しパターン
１：メソッド呼び出しパターン
|
1 2 3 4 5 6 7 8 |
var myObject = { value: 10, show: function() { console.log(this.value); console.log(this); } } myObject.show(); |
２：関数呼び出しパターン
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 |
myObject.show(); // メソッド呼び出し show(); // 関数呼び出し function show() { console.log(this); this.value = 1; // 注１ } show(); // 関数呼び出しの場合のthisはグローバルオブジェクトをさす // ちょっとややこしい例 var myObject = { value: 1, show: function() { console.log(this.value); // 1 console.log(this); // myObject function myFunc() { console.log(this.value); // undefined console.log(this); // window メソッド呼び出しの中で「関数呼び出し」されているので } myFunc(); } }; myObject.show(); |
３：コンストラクタ呼び出しパターン
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 |
function MyObject(value) { this.myValue = value; this.myFunc = function() { this.myValue++; }; } var myObject = new MyObject(0); console.log(myObject.myValue); // 0 myObject.myFunc(); console.log(myObject.myValue); // 1 var myObject2 = new MyObject(3); console.log(myObject2.myValue); // 3 myObject.myFunc(); console.log(myObject2.myValue); // 4 // thisはインスタンスを指す // newつけないと... var myObject = MyObject(0); console.log(window); console.log(window.myValue); console.log(window.myFunc); // ただの関数呼び出しになるので、thisはwindowを指すため、windowに入る |
４：apply,call呼び出しパターン
|
1 2 3 4 5 6 7 8 9 10 11 12 13 |
var myObject = { value: 1, show: function() { console.log(this.value); } }; var yourObject = { value: 3 }; myObject.show(); // 1 myObject.show.apply(yourObject); // 3 myObject.show.call(yourObject); // 3 |
