技术频道导航
HTML/CSS
.NET技术
IIS技术
PHP技术
Js/JQuery
Photoshop
Fireworks
服务器技术
操作系统
网站运营

赞助商

分类目录

赞助商

最新文章

搜索

【示例】详解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, …}

可以看到thisWindow,它是浏览器的全局对象。

你编写一个顶级函数,或者一个不与任何对象关联的函数,如下所示:

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对象的两个属性:namedomainName

输出

"卡卡网 的域名是 www.webkaka.com"

在本例中,thiswebkaka 相同。

函数构造函数

当你使用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.targetevent.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  
相关文章
    x
    x
    • 站长推荐