JavaScript Function bind()
函數借用
透過 bind() 方法，一個物件可以借用另一個物件的方法。
下面的示例建立了兩個物件（person 和 member）。
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
有時必須使用 bind() 方法來防止丟失 this。
在下面的示例中，person 物件有一個 display 方法。在 display 方法中，this 指的是 person 物件
示例
const person = {
firstName:"John",
lastName: "Doe",
display: function () {
let x = document.getElementById("demo");
x.innerHTML = this.firstName + " " + this.lastName;
}
}
person.display();
自己動手試一試 »
當函式用作回撥函式時，this 會丟失。
此示例將在 3 秒後嘗試顯示 person 名稱，但會顯示 undefined 而不是
示例
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 秒後顯示 person 名稱
示例
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 是 undefined。 |
在事件中，this 指向接收事件的元素。 |
諸如 call()、apply() 和 bind() 等方法可以將 this 指向任何物件。 |
