js中使用箭头函数以及setTimeout时this的指向问题

1.函数this指向

直接创建一个函数和new一个函数,this的指向问题

    // 创建一个函数
    function test() {
      console.log(this, "this");
    }

    // 1.通过new的方式调用 this指向的是函数本身
    let t = new test()

    // 2.直接使用 this指向的是全局
    test()

2.函数内部使用箭头函数this的指向问题 

在函数内部使用箭头函数this的指向是当前环境this,setTimeout内部使用普通函数this的指向是全局

来看第一种情况 我们通过new一个函数来观察内部this指向问题,我们可以看到new一个函数this指向的是函数本身所以此时t.a的值是1,再来区分setTimeout内部this问题,箭头函数内部this是指向当前作用域的this,普通函数setTimeout 指向的是全局作用域,所以打印为 undefined 和 1

    // 函数内部setTimeout一个是箭头函数一个是普通函数调用this的区别
    function test() {
      this.a = 1
      setTimeout(function () {
        console.log(this.a, "---a"); // undefined 
      }, 0)

      setTimeout(() => {
        console.log(this.a, "---a"); // 1
      }, 0)
    }

    // 1.通过new的方式调用 this指向的是函数本身
    let t = new test()

2. 我们通过直接调用函数来看this的指向

来看第二种情况 我们直接调用函数来观察内部this指向问题,直接调用函数this指向的是全局,所以此时全局中的a为1,所以此时内部setTimeout指向的都是全局作用域,所以打印为 1 和 1

    // 函数内部setTimeout一个是箭头函数一个是普通函数调用this的区别
    function test() {
      this.a = 1;
      setTimeout(function () {
        console.log(this.a, "---a"); // 1
      }, 0)

      setTimeout(() => {
        console.log(this.a, "---a"); //1
      }, 0)
    }

    // 2.直接使用 this指向的是全局
    test()

 

相关推荐

  1. js使用箭头函数以及setTimeoutthis指向问题

    2024-07-18 12:54:01       20 阅读
  2. 箭头函数this指向问题

    2024-07-18 12:54:01       80 阅读
  3. 箭头函数 this

    2024-07-18 12:54:01       24 阅读
  4. this使用js问题

    2024-07-18 12:54:01       59 阅读
  5. js箭头函数简单介绍

    2024-07-18 12:54:01       55 阅读

最近更新

  1. docker php8.1+nginx base 镜像 dockerfile 配置

    2024-07-18 12:54:01       66 阅读
  2. Could not load dynamic library ‘cudart64_100.dll‘

    2024-07-18 12:54:01       70 阅读
  3. 在Django里面运行非项目文件

    2024-07-18 12:54:01       57 阅读
  4. Python语言-面向对象

    2024-07-18 12:54:01       68 阅读

热门阅读

  1. 快速排序算法的基本思想以及Python实现

    2024-07-18 12:54:01       23 阅读
  2. 【Go系列】Go语言的网络服务

    2024-07-18 12:54:01       26 阅读
  3. 处理UI卡死的技巧

    2024-07-18 12:54:01       21 阅读
  4. 在 Debian 12 上安装 budgie-extras-common 包

    2024-07-18 12:54:01       22 阅读
  5. 边缘计算与图像识别:打造无缝的智能体验

    2024-07-18 12:54:01       24 阅读
  6. APScheduler的调度模式

    2024-07-18 12:54:01       18 阅读
  7. Electron 应用关闭突出程序坞

    2024-07-18 12:54:01       19 阅读
  8. 数据可视化入门

    2024-07-18 12:54:01       25 阅读
  9. 用mybatis-plus-generator快速构建简单代码

    2024-07-18 12:54:01       22 阅读
  10. LinearLayout实现原理分析

    2024-07-18 12:54:01       20 阅读