通过 bind()
方法,一个对象可以借用另一个对象的方法。
下面的示例创建 2 个对象(人员和成员)。
成员对象借用了 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);
自己尝试一下 →
<!DOCTYPE html>
<html>
<body>
<h1>JavaScript Function bind()</h1>
<p>This example creates 2 objects (person and member).</p>
<p>The member object borrows the fullname method from person:</p>
<p id="demo"></p>
<script>
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);
document.getElementById("demo").innerHTML = fullName();
</script>
</body>
</html>
有时必须使用 bind()
方法来防止丢失this。
在下面的示例中,person 对象具有显示方法。在显示方法中,this指的是person对象:
const person = {
firstName:"John",
lastName: "Doe",
display: function () {
let x = document.getElementById("demo");
x.innerHTML = this.firstName + " " + this.lastName;
}
}
person.display();
自己尝试一下 →
<!DOCTYPE html>
<html>
<body>
<h1>JavaScript Function bind()</h1>
<p>In this example, the person object has a display method:</p>
<p id="demo"></p>
<script>
const person = {
firstName:"John",
lastName: "Doe",
display: function() {
let x = document.getElementById("demo");
x.innerHTML = this.firstName + " " + this.lastName;
}
}
person.display();
</script>
</body>
</html>
当函数用作回调时,this 会丢失。
此示例将尝试在 3 秒后显示人名,但会显示 undefined:
const person = {
firstName:"John",
lastName: "Doe",
display: function () {
let x = document.getElementById("demo");
x.innerHTML = this.firstName + " " + this.lastName;
}
}
setTimeout(person.display, 3000);
自己尝试一下 →
<!DOCTYPE html>
<html>
<body>
<h1>JavaScript Function bind()</h1>
<p>This example will try to display a person name after 3 seconds.</p>
<p id="demo"></p>
<script>
const person = {
firstName:"John",
lastName: "Doe",
display: function() {
let x = document.getElementById("demo");
x.innerHTML = this.firstName + " " + this.lastName;
}
}
setTimeout(person.display, 3000);
</script>
</body>
</html>
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);
自己尝试一下 →
<!DOCTYPE html>
<html>
<body>
<h1>JavaScript Function bind()</h1>
<p>This example will display a person name after 3 seconds:</p>
<p id="demo"></p>
<script>
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);
</script>
</body>
</html>
在 JavaScript 中,this
关键字指的是一个对象。
哪个对象取决于this
如何被调用(使用或调用)。
this
关键字根据其使用方式引用不同的对象:
在对象方法中,this
引用对象。
单独而言,this
指的是全局对象。
在函数中,this
指的是全局对象。
在函数中,在严格模式下,this
是未定义
。
在事件中,this
指的是接收事件的元素。
call()
、apply()
和 bind 等方法()
可以将 this
引用到任何对象。
this
不是变量。这是一个关键字。您无法更改this
的值。
JavaScript this 教程