图文详解:箭头函数与常规函数的this指向问题

news2024/11/17 3:45:09

函数中this的指向问题特别容易让人迷糊,这里用示例来指点迷津,走出迷茫。

常规函数下的this指向

1. 纯粹的函数调用

function test(name) { 
    console.log(name) 
    console.log(this) 
} 
test('zjcopy') ; 
test.call('zjcopy', 'cuclife-2') ; 
test.call(false, 'cuclife-3') ; 
test.call(null, 'cuclife-4') ; 
test.call(undefined, 'cuclife-5')  

在这里插入图片描述

说明:
在函数没有调用的时候,this的值是无法确定。 普通的函数调用,this指向的是window窗口。call方法接收的第一个参数就是this,当第一个参数指定为null或者undefined时候,this指向window。

2. 对象中的函数调用

const obj = { 
    name: 'zjcopy.com', 
    greet: function() { 
        console.log(this.name) 
    } 
} 
obj.greet()  //第一种调用方法 
obj.greet.call(obj) //第二种调用方法等同于第一种 
obj.greet.call({name: 'cuclife.com'}) //将this指定为一个对象 

在这里插入图片描述

不同于纯粹的函数,调用的主体是window。这里面指定了用对象来调用自身,所以this指向了name:“zjcopy.com”. 使用call指向name的时候,name值做了更改,所以显示结果为cuclife.com .

3. 构造函数中this

function Test() {     
this.name = 'zjcopy.com'    
 this.age=function() {         console.log(this.name)     }
  } 
 let pp = new Test() 
 console.log(typeof pp) 
  console.log(pp)  
  console.log(pp.age) 
  console.log(pp.age()) 
  console.log(pp.age.call({name : 'cuclife.com'}))
   console.log(pp.name)   

在这里插入图片描述

说明:
构造函数里的this稍微有点特殊,每个构造函数在new之后都会返回一个对象,这个对象就是this

4. window.setTimeout()和window.setInterval()中函数的调用

window.setTimeout()和window.setInterval()的函数中的this有些特殊,里面的this默认是window对象

简单总结一下:函数完整的调用方法是使用call方法,包括test.call(context, name)和obj.greet.call(context,name),这里的context就是函数调用时的上下文,也就是this,只不过这个this是可以通过call方法来修改的;构造函数稍微特殊一点,它的this直接指向new之后返回的对象;window.setTimeout()和window.setInterval()默认的是this是window对象。

箭头函数下的this指向

箭头函数会默认帮我们绑定外层this的值,所以在箭头函数中this的值和外层的this是一样的。

默认绑定外层this, 不能用call方法修改里面的this

const obj = { 
    a: function() { console.log(this) }  , 
                b: () => { 
                     console.log(this) 
                   }   
} 
obj.a(); 
obj.b() 
obj.b.call('zjcopy') 

在这里插入图片描述

在使用箭头函数的例子里,因为箭头函数默认不会使用自己的this,而是会和外层的this保持一致,最外层的this就是window对象。为了减少this的复杂性,箭头函数无法用call方法来指定this。

综合案例

let obj = { 
    name: ' zjcopy.com', 
    age: 3, 
    say1() { 
        setTimeout(function() { 
            console.log("第一个"); 
            console.log( this.name); 
        }, 500) 
    }, 
     say2() { 
        let self = this; 
        setTimeout(function() { 
            console.log("第二个" + self.name); 
        }, 500) 
    }, 
    say3() { 
        setTimeout(() => { 
            console.log("第三个" + this.name); 
        }, 500) 
    } 
} 
obj.say1(); 
obj.say2(); 
obj.say3(); 

在这里插入图片描述

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.coloradmin.cn/o/184495.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

pytesseract 安装错误总结

项目场景: 使用eclipse调用pytesseract接口,进行OCR识别。 在anaconda的python3.6.4版本,安装配置pytesseract 问题描述 pip install pytesseract 报错 错误提醒:pytesseract requires Python >3.7 but the running Python…

【数据结构】顺序栈的原理及实现

【数据结构】顺序栈的原理及实现 1.什么是栈 栈它是一种先进后出的有序列表数据结构。栈是线性表里的元素插入和删除只能在该线性表的同一端进行的一种特殊线性表。该线性表的插入和删除都叫栈顶,也就是变化的一端。另一端是固定不变的成为栈底。根据下图可以看出…

《高性能MySQL》——架构与历史(笔记)

文章目录一、MySQL架构与历史1.1.1 连接管理与安全性1.1.2 优化与执行1.2 并发控制1.2.1 读写锁1.2.2 锁粒度(锁模式)表锁(table lock)行级锁(row lock)1.3 事务1.3.1 隔离级别READ UNCOMITTED (读未提交)READ COMMITTED (读提交)REPEATABLE READ (可重复…

初识C++(学习计划)

前言 基于对C语言的学习,我将进一步学习C的相关知识。 我们在使用C语言时创建的是.c文件,使用C使用的是.cpp文件,其中p——plus(加,的意思),所以cpp就是c。 C是为了解决一些C语言不能解决的问题…

SpringBatch使用(一)

一、SpringBatch简介 1、Spring Batch是一个轻量级,全面的批处理框架,旨在开发对企业系统日常运营至关重要的强大批处理应用程序。Spring Batch构建了人们期望的Spring Framework特性(生产力,基于POJO的开发方法和一般易用性&…

docker安装elasticsearch kibana 8.6.0(设置密码+汉化+ik分词器)

安装eskibana安装:拉取镜像并安装设置密码汉化配置ik分词器安装: 记得开放使用的端口,或者关闭防火墙 提示:需要提升虚拟机或者服务器的内存到8G以上 拉取镜像并安装 docker pull elasticsearch:8.6.0 docker pull kibana:8.6.0docker network create es-netdocker run -it…

Itext7在PDF指定位置添加电子公章

目录 1. 电子公章的制作 2. java工具keytool生成p12数字证书文件 3. pom依赖 4. 实体类 5. 工具类及测试示例 6. 效果 1. 电子公章的制作 做章网站:http://seal.biaozhiku.com/ 我们选择圆形印章 然后输入公司名,输入章名输入编码然后点击395生成&…

快速幂及矩阵快速幂分析及代码实现

文章目录前言一、认识快速幂二、快速幂思路及代码三、矩阵快速幂3.1、矩阵乘法代码实现3.2、矩阵快速幂代码实现参考资料前言 在学习Acwing c蓝桥杯辅导课第九讲复杂DP-AcWing 1303. 斐波那契前 n 项和时有使用到矩阵快速幂算法,这里来记录下知识点正好也将快速幂部…

车载以太网 - SomeIP测试专栏 - 详细解析 - 01

对于介绍SomeIP协议,我还是想从最基础的协议解析来,所以今天还是先将SomeIP协议详解给大家列举一下,也方便大家在工作中如果不记得哪些信息随时可以查看学习,也算是留给我自己的笔记吧,毕竟确实容易忘记。 SomeIP数据&…

分布式数据库中间件——Mycat2

一、Mycat2 概述 Mycat是基于java语言编写的数据库中间件,核心功能是分库分表和读写分离,可以将大表水平分割为N个小表。 可以看做为Mysql的数据库服务器,可以用连接Mysql的方式去连接Mycat,端口为8066 二、Mycat的三大作用 2.…

Node 项目中常见的问题及解决方法

1. window和mac下设置NODE_ENV变量的问题 我们都知道在前端项目中会根据不同的环境变量来处理不同的逻辑,在node后端中也一样,我们需要设置本地开发环境、测试环境、 线上环境等,此时有一直设置环境变量的方案是在package.json中的script属性…

Python学习笔记——错误和异常

错误的分类编写程序过程中遇到的错误都分为两类:语法错误与运行时错误。语法错误:当代码不符合Python语法规则时, 在解析过程中会报SyntaxError。运行时错误:即语句或表达式在语法上都是正确的, 但在运行时发生了错误。当程序发生异常时&…

从零搭建完整python自动化测试框架(UI自动化和接口自动化

从零搭建完整python自动化测试框架(UI自动化和接口自动化) 文章目录 总体框架 PO模式、DDT数据驱动、关键字驱动 框架技术选择 框架运行结果 各用例对应的定义方式(PO/DDT) 测试执行结果 从零开始搭建项目 一、开发环境搭…

Vue-Vuex

前言 Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式 库 官网介绍:https://vuex.vuejs.org/zh/ 以下主要讲解的是如何定义与使用,如果还没有对vuex进行了解的话,请先查看官网,了解其功能、用法及用途。 关于vuex&#xff0c…

代码随想录算法训练营第五十二天_第九章_动态规划 | 121. 买卖股票的最佳时机、122.买卖股票的最佳时机II

LeetCdoe 121. 买卖股票的最佳时机给定一个数组 prices ,它的第 i 个元素 prices[i] 表示一支给定股票第 i 天的价格。 你只能选择 某一天 买入这只股票,并选择在 未来的某一个不同的日子 卖出该股票。设计一个算法来计算你所能获取的最大利润。 返回你可…

verilog 数字系统设计读书笔记-------持久更新

Verilog模型可以是实际电路的不同级别的抽象。这些抽象的级别和它们所对应的模型类型共有以下5种:系统级、算法级、RTL级、门级、开关级‘bz :表示高阻态, ’bx表示不定值(0或1均可)include "muxtwo.v" 将文件引进{$ ra…

【Linux】怎么理解进程

✍作者:阿润菜菜 📖专栏:Liunx系统编程 本文通过冯诺依曼体系结构(硬件部分)和操作系统(软件部分)为基础来介绍我们应该如何理解进程,为后续的学习做铺垫。 本文目录一、预备知识1.建…

误差逆传播算法公式理解及推导

前言:公式理解及推导参考自《机器学习》周志华 P101 BP网络 BP网络一般是指由 误差逆传播(error BackPropagation, BP)算法训练的多层前馈神经网络。 给定训练集 D{(x1,y1)D\left\{\left(\boldsymbol{x}_1, \boldsymbol{y}_1\right)\right…

2023年我的Flag已准备完毕

前言: 😄作者简介:小曾同学.com,小伙伴们也可以叫我小曾,一个致力于测试开发的博主⛽️ 如果文章知识点有错误的地方,还请大家指正,让我们一起学习,一起进步。 😊 座右铭&#xff1a…

用力过猛,把服务压挂了?

背景 在刚开始进行压测的时候,我也不知道需要提前分析下压测的QPS目标,也不知道说第一步压测的预估值是多少,结果一下子干上去,就把测试环境的服务给整挂了,然后就迎来了一大波的投诉(好惨呐&#xff09…