个人中心
gpt4 book ai didi

一篇文章带你了解JavaScript this关键字

转载 作者：qq735679552 更新时间：2022-09-27 22:32:09 25 4
gpt4 key购买 nike

CFSDN坚持开源创造价值，我们致力于搭建一个资源共享平台，让每一个IT人在这里找到属于你的精彩世界.

这篇CFSDN的博客文章一篇文章带你了解JavaScript this关键字由作者收集整理，如果你对这篇文章有兴趣，记得点赞哟.

一篇文章带你了解JavaScript this关键字

与其他语言相比，this关键字在JavaScript中的行为略有不同。JavaScript中，this关键字引用其所属的对象。根据使用位置，它具有不同的值.

1、前言 。

方法中，this关键字引用其所属的对象.

this指的是全局对象在函数中.

this引用全局对象在函数中.

在严格模式下，this是未定义的在事件中.

this指的是接收事件的元素像call()和apply()这样的方法，可以将其引用到任何对象.

2、方法上下文 。

在对象方法中，this指代方法的user.

当调用user.getName()时，函数内部将this绑定到user对象:

例:

  1. <!DOCTYPE html> 
  2. <html> 
  3. <title>项目</title> 
  4.  
  5. <body style="background-color: aqua;"> 
  6.  
  7. <p>在此示例中，<b> user </b>对象是<b> getName </b>方法的所有者：</p> 
  8.  
  9. <script> 
  10. // 创建一个对象 
  11. var user = { 
  12. firstName: "基础教程", 
  13. lastName: "baidu.com", 
  14. age: 5, 
  15. getName: function() { 
  16. return this.firstName + " " + this.lastName; 
  17. } 
  18. }; 
  19.  
  20. document.write(user.getName()); 
  21. </script> 
  22.  
  23. </body> 
  24. </html> 

这里user对象是所有者getName的方法.

1. 全局上下文 。

在全局执行上下文中(在任何函数之外)，this无论是否处于严格模式下，都引用全局对象.

示例 。

  1. <!DOCTYPE html> 
  2. <html> 
  3. <title>项目</title> 
  4.  
  5. <body style="background-color: aqua;">  
  6.  
  7. <p>在全局执行上下文中(在任何函数之外)，这指的是全局对象:</p> 
  8.  
  9. <p>访问调试在您的浏览器按F12，并选择"控制台"在调试器菜单:</p> 
  10.  
  11. <script> 
  12. //在Web浏览器中，窗口对象也是全局对象： 
  13. console.log(this === window); // true 
  14.  
  15. a = 50; 
  16. console.log(window.a); // 50 
  17.  
  18. this.b = "baidu.com"; 
  19. console.log(window.b) // "nhooo.com" 
  20. console.log(b) // "nhooo.com" 
  21. </script> 
  22.  
  23. </body> 
  24. </html> 

一篇文章带你了解JavaScript this关键字

在浏览器窗口中，全局对象是[object Window].

2. 函数上下文 。

在函数内部，this值取决于函数的调用方式。由于以下代码不在严格模式下，this因此默认为全局对象，即浏览器中的[object Window].

  1. function myFunc() { 
  2. return this; 
  3. } 

在严格模式，然而this的值是undefined.

  1. function myFunc() { 
  2. "use strict"; 
  3. return this; 
  4. } 

因此，在严格模式下，如果执行上下文未定义它，则它将保持未定义状态.

3、this在DOM事件处理程序中 。

当一个函数用作事件处理程序时，this将被设置为触发事件的元素:

示例 。

  1. let btn = document.querySelector("button"); 
  2.  
  3. btn.onclick = function() { 
  4. this.style.display = "none"; 
  5. }; 

从内联事件处理程序调用代码时，会将this设置为放置监听器的元素:

  1. <button onclick="this.style.display='none'">点击删除我</button> 

一篇文章带你了解JavaScript this关键字

一篇文章带你了解JavaScript this关键字

4、显式函数绑定 。

call()和apply()方法是预定义的JavaScript方法.

它们都可以用于调用以另一个对象作为参数的对象方法.

  1. <script> 
  2. function add(c, d) { 
  3. return this.a + this.b + c + d; 
  4. } 
  5.  
  6. var obj = { 
  7. a: 5, 
  8. b: 10 
  9. }; 
  10.  
  11. //第一个参数是用作 
  12. //'this'，后续参数作为 
  13. //函数调用中的参数 
  14. document.writeln(add.call(obj, 5, 7)); // 27 
  15.  
  16. //第一个参数是要使用的对象 
  17. // 'this'，第二个是一个数组 
  18. //成员用作函数调用中的参数 
  19. document.writeln(add.apply(obj, [10, 20])); // 45 
  20. </script> 

一篇文章带你了解JavaScript this关键字

箭头函数(=>) 。

在箭头函数(=>)中，this始终指向它被创建时所处的词法作用域中的this。全局代码中，它将被设置为全局对象:

  1. <script> 
  2. var globalObj = this; 
  3. var myFunc = (() => this); 
  4.  
  5. document.write(myFunc() === globalObj);// true 
  6. </script> 

5、总结 。

本文基于JavaScript 基础，介绍了this 关键字，与其他语言相比，this关键字在JavaScript中的行为略有不同，对this ，包括(全局，函数，函数绑定)常见的用法进行了详细的讲解。希望能够通过文章的学习，让读者更好的认识，学习JavaScript。

原文地址：https://mp.weixin.qq.com/s/tjTu4nM33-mooHJhZ4-h2w 。

最后此篇关于一篇文章带你了解JavaScript this关键字的文章就讲到这里了,如果你想了解更多关于一篇文章带你了解JavaScript this关键字的内容请搜索CFSDN的文章或继续浏览相关文章，希望大家以后支持我的博客！ 。

25 4 0
文章推荐： 构建Vue CLI插件的基本流程
文章推荐： Java实现迅雷地址转成普通地址实例代码
文章推荐： 这还是我最熟悉的package.json吗？
文章推荐： java 中使用匿名类直接new接口详解及实例代码
qq735679552
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
全站热门文章
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com