JavaScript 関数 bind()
関数の借用
bind()メソッドを使用すると、オブジェクトは別のオブジェクトからメソッドを借用できます。
以下の例では、2 つのオブジェクト (個人とメンバー) を作成します。
member オブジェクトは person オブジェクトから fullname メソッドを借用します。
例
const person = {
firstName:"John",
lastName: "Doe",
fullName: function () {
return this.firstName + " " + this.lastName;
}
}
const member = {
firstName:"Hege",
lastName: "Nilsen",
}
let fullName = person.fullName.bind(member);
thisを保存する
場合によっては、thisをbind()失わないようにするためにメソッドを使用する必要があります。
次の例では、人物オブジェクトに表示メソッドがあります。表示メソッドでは、これはperson オブジェクトを指します。
例
const person = {
firstName:"John",
lastName: "Doe",
display: function () {
let x = document.getElementById("demo");
x.innerHTML = this.firstName + " " + this.lastName;
}
}
person.display();
関数がコールバックとして使用される場合、thisは失われます。
この例では、3 秒後に人の名前を表示しようとしますが、代わりにunknownが表示されます。
例
const person = {
firstName:"John",
lastName: "Doe",
display: function () {
let x = document.getElementById("demo");
x.innerHTML = this.firstName + " " + this.lastName;
}
}
setTimeout(person.display, 3000);
このbind()方法はこの問題を解決します。
次の例では、bind()メソッドを使用して person.display を person にバインドします。
この例では、3 秒後に人の名前が表示されます。
例
const person = {
firstName:"John",
lastName: "Doe",
display: function () {
let x = document.getElementById("demo");
x.innerHTML = this.firstName + " " + this.lastName;
}
}
let display = person.display.bind(person);
setTimeout(display, 3000);
thisとは?
JavaScript では、キーワードはオブジェクトthisを指します。
どのthisオブジェクトがどのように呼び出されるか (使用または呼び出されるか)によって決まります。
キーワードthisは、使用方法に応じてさまざまなオブジェクトを指します。
オブジェクトメソッドでは、オブジェクトthisを参照します。 |
単独でグローバル オブジェクトthisを参照します。 |
関数では、グローバル オブジェクトthisを参照します。 |
ストリクト・モードの関数では、thisはundefinedです。 |
イベントでは、thisを参照エレメントイベントを受け取ったものです。 |
call()、apply()、
bind()などのメソッドは、任意のオブジェクトを参照できます。 |
プログラミング学習を加速させる
プログラミングをプロの講師に教えてもらいませんか。