💨
JavaScriptのthisとbindの必要性を学び直す
人のコードを解読するたびにthis、bindについて調べているので、メモ書きです。
アロー関数が登場してから使用するケースは減ったそうですが、、、
thisとは?
JavaScriptで、this
とは「記述場所によって参照先の変わるキーワード」です。。
this
の参照先は、その関数がどのように呼ばれたかによって決まります。
つまりどういうことかを見ていきます。
thisの参照先
thisは「記述場所によって参照先の変わる特別な変数」です。
thisの参照先は、function(関数)をどのオブジェクトのメソッドとして呼び出すか
で変わります。
関数の中でthisを定義する場合
const fn = function() {
console.log(this);
};
fn();
// -> thisの参照先は window (グローバル)にあり、undefinedまたはエラーを返す。
オブジェクトの中のメソッドでthisを定義する場合
const obj = {
fn: function() {
console.log(this);
}
};
obj.fn();
// -> 関数内のthisの参照先は obj (そのオブジェクト自身)
thisの参照元が失われるとき
それでは、オブジェクトの中のthisの参照元が失われるケースを見ていきます。
const person = {
name: 'John',
greet: function() {
console.log('Hello, ' + this.name);
}
};
const greetJohn = person.greet;
greetJohn();
// 'this'の参照先が不明(グローバルオブジェクトまたは'undefined')
なぜ、greetJohn()は、undefinedになるのか?、というと
const greetJohn = person.greet;
は
function() {
console.log('Hello, ' + this.name);
}
の情報しか取得していません。
つまり、
const fn = function() {
console.log(this);
};
fn();
と一緒の扱いになります。
グローバルはnameプロパティを持っていないため、undefined、またはエラーになります。
これを解決するために役立つのが、bindメソッドです。
bindとは?
bind
は、関数のthis
を固定するためのメソッドです。
通常、関数のthis
はその関数がどこで呼ばれたかによって決まります。しかし、bind
を使うと、関数がどこで呼ばれてもthis
を特定のオブジェクトに固定することができるのです!!
例:
const person = {
name: 'John',
greet: function() {
console.log('Hello, ' + this.name);
}
};
const greetJohn = person.greet.bind(person);
bind
を使うことで、関数のthis
が特定のオブジェクトに固定することができます。
こうすることで、
person.greet
で取得した情報の
function() {
console.log('Hello, ' + this.name);
}
のthisの参照先をpersonオブジェクトに固定しています。
こうすることで、this.nameで'John'を取得することができます。
Discussion