首页 > 其他分享 >setTimeout中的this指向问题和箭头函数结合的区别

setTimeout中的this指向问题和箭头函数结合的区别

时间:2023-03-06 15:24:13浏览次数:34  
标签:上下文 函数 指向 箭头 window let setTimeout fn

1、首先

  1. 首先要解释下,函数体内变量的作用域是在函数定义的时候就确定的,而不是运行时;
  2. 函数的上下文是在调用时确定的,函数体内的this指向其上下文;
  3. 箭头函数没有自己的this,它的this指向的是它上级的this,而它上级的this指向的是上级的上下文。

2、普通函数的this,指向其调用者,箭头函数this,指向其上级this

	let app = {
            a: 1,
            fn: function () {
                console.log('app.fn:', this, this.a); 
		// this指向需要函数被调用时才能确定,当app.fn()执行,
		// 确定其上下文为app,所以this指向app对象
		// this.a = app.a = 1
            }
        }

        window.a = 0
        let app2 = {
            a: 2,
            fn: () => {
                console.log('app2.fn:', this, this.a); 
		// app2.fn()执行,上下文为app2,this本应指向app2对象,
		// 但是fn是箭头函数,所以this指向它上级的this,也就是
		// 指向app2的this,由于app2的this指向的是其上下文,所以这里就是window,
		// this.a = window.a = 0
            }
        }

拓展:var、let和const声明的数据,作用域不同,var声明的对象可以在global全局作用域下查找,也就是赋值给了window对象;而let和const声明的对象只能在script作用域下查找,所以window对象上不会显示声明的app等对象和函数。var声明的对象和function函数都可以在global全局作用域下找到。
说到了script,多个script在浏览器中一般是分块编译的,不是同时编译。但是作用域只有一个,就是script作用域。

3、seiTimeout中的this,指向window,箭头函数this,指向其上级this

	let app3 = {
            a: 3,
            fn: function () {
                setTimeout(() => {
                    console.log('app3.fn:', this, this.a);
		    // app3.fn()执行,但输出语句在setTimeout中,
		    // this本应指向window,但箭头函数的this指向其上级的this,
		    // 所以this指向fn的this,也就是fn的上下文,this指向app3对象
		    // this.a = app3.a = 3
                }, 1000);
            }
        }

        let app4 = {
            a: 4,
            fn: ()=> {
                setTimeout(() => {
                    console.log('app4.fn:', this, this.a); 
		    // app4.fn()执行,this本应指向window,
		    // 但箭头函数的this指向fn的this,fn的this指向app4的this,
		    // app4的this指向app4的上下文
		    // 所以this指向app4的上下文,this指向window
		    // this.a = window.a = 0
                }, 1000);
            }
        }

        let app5 = {
            a:5,
            fn:function(){
                setTimeout(() => {
                    console.log('app5.fn:', this, this.a); 
		    // app5.fn()执行,this指向fn的this,
		    // fn的this指向fn的上下文,也就是this指向app5
		    // this.a = app5.a = 5
                }, 1000);
            }
        }

4、数组中的函数,调用后的this,指向该数组

	function app6() {
            console.log('app6.fn:', this, this.a);
        }
        let arr = [0, 1, 2, app6]
        arr[3]() // 函数执行,上下文是arr数组,this指向arr,
	         // this.a = undefined, this[0] = 0

5、事件处理函数的this,指向触发事件的对象

6、可用call、apply和bind改变this指向

标签:上下文,函数,指向,箭头,window,let,setTimeout,fn
From: https://www.cnblogs.com/fangcunjian/p/17182455.html

相关文章

  • 箭头函数
    箭头函数箭头函数是传统函数表达式的简写方式,它简化了函数的编写,也带来了一些限制导致在一些场景下它无法使用。特点:箭头函数没有自己的this,无法通过call、apply、bind......
  • why is the setInterval task executed slower than the setTimeout task in the brow
    whyisthesetIntervaltaskexecutedslowerthanthesetTimeouttaskinthebrowserjavascriptenvironment?为什么在浏览器javascript环境下setInterval任务......
  • 我终于搞懂了async/await、promise和setTimeout的执行顺序
    从一道题目出发今天看到一道面试题,是关于async/await、promise和setTimeout的执行顺序,题目如下:asyncfunctionasync1(){console.log('async1start');awaitasync2(......
  • linux-history没内容-上下箭头用不了
    history命令是被保存在内存中的,当退出或者登录shell时,会自动保存或读取。在内存中,历史命令仅能够存储1000条历史命令,该数量是由环境变量HISTSIZE进行控制。默认是不显示命......
  • ES6-ES11 箭头函数的实践与应用
    视频<!DOCTYPEhtml><htmllang="en"><head><metacharset="UTF-8"><metaname="viewport"content="width=device-width,initial-scale=1.0"><title>......
  • ES6-ES11 箭头函数以及声明特点
    视频<!DOCTYPEhtml><htmllang="en"><head><metacharset="UTF-8"><metaname="viewport"content="width=device-width,initial-scale=1.0"><title>......
  • 各种情况的箭头函数 es6 230222
    无参无返回varfn=()=>{console.log(666)}fn()无参有返回varfn=()=>{return123}varres=fn()alert(res)有参无返回varfn=(num1,num2)=>{cons......
  • el-select 远程输入情况下 下拉箭头icon失效
    1.watch监听当前对话框的显示与否(这里的选择框的显示与否根据此字段,若一直存在则可在mounted)isCondition:{//添加icon箭头handler(val){......
  • vue $bus 和 settimeout 实现setinterval
    main.js实现用settimeout实现setintervalwindow.$bus=newVue()window.setTimeToInterval=function(delay){if(window.intervalTimeout){clearTime......
  • JS中的this指向
    this的概念:在js中,this是一个指针型变量,它动态指向当前函数的运行环境。在不同的场景中调用同一个函数,this的指向也可能会发生变化,但是它永远指向其所在函数的真实调......