const person = {
firstName: "John",
lastName : "Doe",
id : 5566,
fullName : function() {
return this.firstName + " " + this.lastName;
}
};
自己尝试一下→
<!DOCTYPE html>
<html>
<body>
<h1>The JavaScript <i>this</i> Keyword</h1>
<p>In this example, <b>this</b> refers to the <b>person</b> object.</p>
<p>Because <b>fullName</b> is a method of the person object.</p>
<p id="demo"></p>
<script>
// Create an object:
const person = {
firstName: "John",
lastName: "Doe",
id: 5566,
fullName : function() {
return this.firstName + " " + this.lastName;
}
};
// Display data from the object:
document.getElementById("demo").innerHTML = person.fullName();
</script>
</body>
</html>
在 JavaScript 中,this
关键字指的是一个对象。
哪个对象取决于this
如何被调用(使用或调用)。
this
关键字根据其使用方式引用不同的对象:
在对象方法中,this
引用对象。
单独而言,this
指的是全局对象。
在函数中,this
指的是全局对象。
在函数中,在严格模式下,this
是未定义
。
在事件中,this
指的是接收事件的元素。
call()
、apply()
和 bind 等方法()
可以将 this
引用到任何对象。
this
不是变量。这是一个关键字。您无法更改this
的值。
当在对象方法中使用时,this
指的是对象。
在此页面顶部的示例中,this
引用 person 对象。
因为fullName方法是person对象的方法。
fullName : function() {
return this.firstName + " " + this.lastName;
}
自己尝试一下→
<!DOCTYPE html>
<html>
<body>
<h1>The JavaScript <i>this</i> Keyword</h1>
<p>In this example, <b>this</b> refers to the <b>person</b> object.</p>
<p>Because <b>fullName</b> is a method of the person object.</p>
<p id="demo"></p>
<script>
// Create an object:
const person = {
firstName: "John",
lastName: "Doe",
id: 5566,
fullName : function() {
return this.firstName + " " + this.lastName;
}
};
// Display data from the object:
document.getElementById("demo").innerHTML = person.fullName();
</script>
</body>
</html>
单独使用时,this
指的是全局对象。
因为 this
是在全局范围内运行的。
在浏览器窗口中,全局对象是[object Window]
:
let x = this;
自己尝试一下→
<!DOCTYPE html>
<html>
<body>
<h1>The JavaScript <i>this</i> Keyword</h1>
<p>In this example, <b>this</b> refers to the window object:</p>
<p id="demo"></p>
<script>
let x = this;
document.getElementById("demo").innerHTML = x;
</script>
</body>
</html>
在严格模式下,单独使用时,this
也指全局对象:
"use strict";
let x = this;
自己尝试一下 →
<!DOCTYPE html>
<html>
<body>
<h1>The JavaScript <i>this</i> Keyword</h1>
<p>In this example, <b>this</b> refers to the window object:</p>
<p id="demo"></p>
<script>
"use strict";
let x = this;
document.getElementById("demo").innerHTML = x;
</script>
</body>
</html>
在函数中,全局对象是this
的默认绑定。
在浏览器窗口中,全局对象是[object Window]
:
function myFunction() {
return this;
}
自己尝试一下→
<!DOCTYPE html>
<html>
<body>
<h1>The JavaScript <i>this</i> Keyword</h1>
<p>In this example, <b>this</b> refers to the the window object:</p>
<p id="demo"></p>
<script>
document.getElementById("demo").innerHTML = myFunction();
function myFunction() {
return this;
}
</script>
</body>
</html>
JavaScript 严格模式不允许默认绑定。
因此,当在严格模式下在函数中使用时,this
是未定义
。
"use strict";
function myFunction() {
return this;
}
自己尝试一下 →
<!DOCTYPE html>
<html>
<body>
<h1>The JavaScript <i>this</i> Keyword</h1>
<p>In a function, by default, <b>this</b> refers to the global object.</p>
<p>Strict mode does not allow default binding, so <b>this</b> is:</p>
<p id="demo"></p>
<script>
"use strict";
document.getElementById("demo").innerHTML = myFunction();
function myFunction() {
return this;
}
</script>
</body>
</html>
在 HTML 事件处理程序中,this
指的是接收到事件的 HTML 元素 事件:
<button onclick="this.style.display='none'">
Click to
Remove Me!
</button>
自己尝试一下 →
<!DOCTYPE html>
<html>
<body>
<h1>The JavaScript <i>this</i> Keyword</h1>
<button onclick="this.style.display='none'">Click to Remove Me!</button>
</body>
</html>
在这些示例中,this
是 person 对象:
const person = {
firstName : "John",
lastName : "Doe",
id : 5566,
myFunction : function() {
return this;
}
};
自己尝试一下→
<!DOCTYPE html>
<html>
<body>
<h1>The JavaScript <i>this</i> Keyword</h1>
<p>In this example, <b>this</b> refers to the <b>person object</b>.</p>
<p id="demo"></p>
<script>
// Create an object:
const person = {
firstName : "John",
lastName : "Doe",
id : 5566,
myFunction : function() {
return this;
}
};
// Display data from the object:
document.getElementById("demo").innerHTML = person.myFunction();
</script>
</body>
</html>
const person = {
firstName: "John",
lastName : "Doe",
id : 5566,
fullName : function() {
return this.firstName + " " +
this.lastName;
}
};
自己尝试一下→
<!DOCTYPE html>
<html>
<body>
<h1>The JavaScript <i>this</i> Keyword</h1>
<p>In this example, <b>this</b> refers to the <b>person</b> object.</p>
<p>Because <b>fullName</b> is a method of the person object.</p>
<p id="demo"></p>
<script>
// Create an object:
const person = {
firstName: "John",
lastName: "Doe",
id: 5566,
fullName : function() {
return this.firstName + " " + this.lastName;
}
};
// Display data from the object:
document.getElementById("demo").innerHTML = person.fullName();
</script>
</body>
</html>
即 this.firstName 是 this(person 对象)的 firstName 属性。
call()
和 apply()
方法是预定义的 JavaScript 方法。
它们都可以用于以另一个对象作为参数来调用对象方法。
函数 call() 方法
函数 apply() 方法
函数bind()方法
下面的示例以 person2 作为参数调用 person1.fullName,this 指的是 person2, 即使 fullName 是 person1 的方法:
const person1 = {
fullName: function() {
return this.firstName + " " + this.lastName;
}
}
const person2 = {
firstName:"John",
lastName: "Doe",
}
// Return "John Doe":
person1.fullName.call(person2);
自己尝试一下 →
<!DOCTYPE html>
<html>
<body>
<h1>The JavaScript <i>this</i> Keyword</h1>
<p>In this example <strong>this</strong> refers to person2, even if it is a method of person1:</p>
<p id="demo"></p>
<script>
const person1 = {
fullName: function() {
return this.firstName + " " + this.lastName;
}
}
const person2 = {
firstName:"John",
lastName: "Doe",
}
let x = person1.fullName.call(person2);
document.getElementById("demo").innerHTML = x;
</script>
</body>
</html>
通过 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>
确定 this
引用的是哪个对象;使用以下优先顺序。
目的
绑定()
apply() 和 call()
对象方法
全球范围
this
是否在使用 bind() 调用的函数中?
this
是否在使用 apply() 调用的函数中?
this
是否在使用 call() 调用的函数中?
this
是对象函数(方法)吗? <p>this
是在全局范围内的函数中吗?