【示例】详解JS里this的上下文对象及用法

技术频道 - js技术

【示例】详解JS里this的上下文对象及用法

作者:admin 时间:2022-5-7 10:53:4 浏览:641

在 JavaScript 编程中，this 是经常用到的关键字。this 关键字是 JavaScript 中一个非常重要的概念，在 JavaScript 中，this 是对对象的引用。在本文中，我们将通过示例了解this基于上下文的隐式引用。

下面是四个上下文对象，在里面，this的值能被隐式引用。

全局上下文
作为对象内的方法
作为函数或类的构造函数
作为 DOM 事件处理程序

全局上下文

在全局上下文中，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);
})