【示例】详解JS里this的上下文对象及用法
作者:admin 时间:2022-5-7 10:53:4 浏览:在 JavaScript 编程中，this 是经常用到的关键字。this 关键字是 JavaScript 中一个非常重要的概念，在 JavaScript 中，this 是对对象的引用。在本文中，我们将通过示例了解this基于上下文的隐式引用。
下面是四个上下文对象，在里面，this的值能被隐式引用。
全局上下文
在全局上下文中，this指的是全局对象。当你在浏览器中工作时，全局上下文是window. 当你在 Node.js 中工作时，全局上下文是global。
对于示例，你将在浏览器的开发者工具控制台中练习代码。如果你不熟悉在浏览器中运行 JavaScript 代码，请阅读如何使用浏览器开发者工具控制台调试JavaScript。
如果你在没有任何其他代码的情况下记录this的值，你将看到对象this指的是什么。
console.log(this)
输出
Window {postMessage: ƒ, blur: ƒ, focus: ƒ, close: ƒ, parent: Window, …}
可以看到this是Window，它是浏览器的全局对象。
你编写一个顶级函数，或者一个不与任何对象关联的函数，如下所示：
function printThis() {
console.log(this)
}
printThis()输出
Window {postMessage: ƒ, blur: ƒ, focus: ƒ, close: ƒ, parent: Window, …}
即使在函数内，this仍然指的是Window，或全局对象。
但是，当使用严格模式（'use strict'）时，全局上下文中函数内的this上下文将为undefined。
'use strict'
function printThis() {
console.log(this)
}
printThis()
输出
undefined
通常，使用严格模式（'use strict'）来降低this出现意外范围的可能性会更安全。
对象方法
方法是对象上的函数，或对象可以执行的任务，函数使用this引用对象的属性。
const webkaka = {
name: '卡卡网',
domainName: 'www.webkaka.com',
describe() {
console.log(`${this.name} 的域名是 ${this.domainName}`)
},
}
webkaka.describe()webkaka是对象，describe()是方法，它是webkaka对象里的一个函数，该函数使用了this引用webkak对象的两个属性：name和domainName。
输出
"卡卡网 的域名是 www.webkaka.com"
在本例中，this 与 webkaka 相同。
函数构造函数
当你使用new关键字时，它会创建构造函数或类的实例。函数构造函数是初始化用户定义对象的标准方法。
function Webkaka(name, domainName) {
this.name = name;
this.domainName= domainName;
this.describe = function () {
console.log(`${this.name} 的域名是 ${this.domainName}`);
}
}
const myweb = new Webkaka('卡卡网', 'www.webkaka.com');
myweb.describe();输出
"卡卡网 的域名是 www.webkaka.com"
在此上下文中，this绑定到Webkaka的实例，该实例包含在myweb常量中。
类构造函数
类的构造函数的作用与函数的构造函数相同。
class Webkaka{
constructor(name, domainName)
{
this.name = name;
this.domainName = domainName;
}
describe = function()
{
console.log(`${this.name} 的域名是 ${this.domainName}`);
}
}
const webkaka = new Webkaka('卡卡网', 'www.webkaka.com');
webkaka.describe();输出
"卡卡网 的域名是 www.webkaka.com"
DOM 事件处理程序
在浏览器中，事件处理程序有一个特殊的this上下文。在由addEventListener调用的事件处理程序中，this将引用event.currentTarget，通常情况下，开发人员会简单地使用event.target或event.currentTarget根据需要访问 DOM 中的元素，但由于this引用在此上下文中会发生变化，因此了解这一点很重要。
在下面的示例中，我们将创建一个按钮，向其添加文本，并将其附加到DOM中。当我们在事件处理程序中记录this的值时，它将打印目标。
const button = document.createElement('button');
button.textContent = '点击我';
document.body.append(button);
button.addEventListener('click', function (event) {
console.log(this);
})输出
<button>点击我</button>
将其粘贴到浏览器中后，你会在页面上看到一个按钮，上面写着“点击我”。如果单击按钮，你将看到<button>点击我</button>出现在控制台中，因为单击按钮会记录元素，即按钮本身。因此，如你所见，this指的是目标元素，也就是我们添加了事件监听器的元素。
注意：此代码要放在<body></body>标签之后，否则会报错：document.body is null。
总结
在前面的所有示例中， this的值是由其上下文决定的——它是全局的、在对象中、在构造函数或类中，还有在 DOM 事件处理程序上。
通过学习该文，你应该了解了JavaScript中this关键字的概念及其具体用法，它是基于上下文的隐式引用。
相关文章
标签: this
