JavaScript その１
JavaScript
今まで深く考えずに書いてきたが、改めて理解する必要があると感じたので、少しまとめます。
今回はJavaScriptの「this」です。
thisにはいくつかパターンがある
①メソッド呼び出し
メソッドとは、オブジェクト指向プログラミングにおいて、各オブジェクトが持っている自身に対する操作。
var testObject = {
value: 10,
show: function() {
console.log(this.value);
}
}
testObject.show();
②関数呼び出し
関数とは、引数と呼ばれるデータを受け取り、定められた通りの処理を実行して結果を返す一連の命令群。
function show() {
console.log(this);
this.value = 1;
}
show();
まぎらわしい例(メソッド内で関数呼び出しになっている)
var testObject = {
value: 1,
show: function() {
console.log(this.value);
function show() {
console.log(this.value); // グローバルを指す
}
show();
}
};
testObject.show();
解決策
var testObject = {
value: 1,
show: function() {
var self = this;
console.log(self.value);
function show() {
console.log(self.value);
}
show();
}
};
testObject.show();
③コンストラクタ呼び出し
function TestObject(value) {
this.value = value;
this.increment = function() {
this.value++;
};
}
var test = new TestObject(0);
// var test = TestObject(0); // newをつけないと。。
console.log(test.value);
test.increment();
console.log(test.value);
「new」をつけないと関数呼び出しとなり、「this」はグローバルオブジェクトを指す。
④apply,call呼び出し (thisを指定できる)
var testObject = {
add: function(value1, value2) {
console.log(this.value + value1 + value2);
}
};
var fooObject = {
value: 3
};
testObject.add.apply(fooObject, [2, 10]);
testObject.add.call(fooObject, 2, 10);
⑤bind()のthis
bind() メソッドは、呼び出された時に新しい関数を生成します。最初の引数 thisArg は新しい関数の this キーワードにセットされます。2 個目以降の引数は、新しい関数より前に、ターゲット関数の引数として与えられます。
function test() {
console.log(this)
}
var obj = { name: "obj" }
var check = test.bind(obj)
check()
まとめ
thisのパターン
①メソッド呼び出し
②関数呼び出し
③コンストラクタ呼び出し
④apply,call呼び出し (thisを指定できる)
⑤bind()のthis
thisを使う時は呼び出し元を確認する必要がある。
参考
JavaScript中級者への道【2. 4種類のthis】 - Qiita
JavaScriptの「this」は「4種類」？？ - Qiita
