关于ES6中箭头函数this和普通函数this指向的问题理解

JS宏进阶:this专讲 this的值是在函数被调用时确定的,而不是在函数被定义时确定的。this的绑定规则取决于函数的调用方式(普通调用、方法调用、构造函数调用、箭头函等)。使用callapply和bind可以显式地设置this的值。箭头函数不绑定自己的this,而是继承外层作用域的this。ES6类中this主要用于引用实例对象,使得你可以在构造函数和方法中访问和操作实例的属性。普通对象中,this是一个强大的工具,允许方法访问和操作对象的属性。然而,this的行为可能会根据上下文(如箭头函数的使用)而变化。 阅读详情

    最近在看ES6,发现对箭头函数的this和普通函数的this理解不是很明确,花了一些时间,将自己理解的思路整理一下,如有错误,欢迎指正:

    先说一下普通函数中的this,普通函数中的this表示调用此函数时的对象,如下例:

var x=11;
var obj={
  x:22,
  say:function(){
    console.log(this.x)
  }
}
obj.say();
//console.log输出的是22

    调用say函数的是对象obj,所以this指代对象obj,输出的就是obj对象里的x值,即22。

    然后是箭头函数中的this,资料上说的箭头函数内部是没有this的,也就是说,箭头函数里面的this会继承自外部的this,下面有个例子,用来详细说明下:    

var x=11;
var obj={
 x:22,
 y:this,//window
 say:()=>{
   console.log(this.x);
 }
}
obj.say();
//输出的值为11
console.log(obj.y);
//输出的值为window对象

    obj对象中的this指代的就是window,也就是全局环境,因为箭头函数中的this就会就近找到上一个对象中this所指代的对象,从以上例子可以看出来,obj内部属性y就为obj内部this指代的对象,输出是window。

    为了加深下印象,我们再从两个例子说明下普通函数和箭头函数 this的指向问题,这是普通函数:

var a=11
function test1(){
  this.a=22;
  let b=function(){
    console.log(this.a);
  };
  b();
}
var x=new test1();
//输出11

    为什么会输出11?因为普通函数中的this指向的是调用它的对象,如果没有直接调用对象,会指向undefined或者window,一般都会指向window,在严格模式下才会指向undefined。上述的例子中,并没有明确的调用对象,而普通函数中的this并不会向上继续找对象,所以直接返回window。

    这是箭头函数:

var a=11;
function test2(){
  this.a=22;
  let b=()=>{console.log(this.a)}
  b();
}
var x=new test2();
//输出22

    箭头函数中会往上寻找this,直到找到所代表的this为止。例子中,构造函数被实例化成为一个对象x,那x中的this指代的就是对象x本身,所以箭头函数this就代表x对象,x对象内部的a值为22,所以输出22。

再进行总结一下,箭头函数中的this是在声明中就定义好了的,而普通函数中的this则是在调用时定义好的。

    

某智能物流无人值守系统 ExportReport SQL注入漏洞复现 某智能物流无人值守系统 ExportReport存在SQL注入漏洞,未经身份验证的远程攻击者除了可以利用 SQL 注入漏洞获取数据库中的信息(例如,管理员后台密码、站点的用户个人信息)之外,甚至在高权限的情况可向服务器中写入木马,进一步获取服务器系统权限。 阅读详情

相关推荐

STM32 RC522串口驱动程序 (简单直接)

rc522作为使用非常多的读写卡芯片,使用SPI芯片读写应用已经非常广了。但有些时候我们只有串口可以使用,或者我们觉得串口使用更加方便,那么就必须要编写串口的驱动程序。不过很难找到可以直接使用的串口程序。所以在此将我这边写好的串口驱动写好如下: 直接上代码 下面是RC522.C的驱动文件。支持读写卡号8位数据。rc522用的是stm32 的串口3,调试显示是串口1; #include "rc522.h" #include "delay.h" /////////////////////////////////

qq_42074368的博客 9001

简单学习Es6中的this指向

前言对于一个前端初学者来说,this的指向是一个必须要掌握的知识点,尤其是es6之后的this指向更加变得飘忽不定,我们今天就来了解一下各种情况下this的指向。什么是this首先,this不是一个函数也不是某个对象,它具体指向什么东西取决于我们在哪里去调用这个this,只有函数调用的时候才会发生this的绑定1.全局作用域console.log(this ===...

博客简介 2438

局域网tcp通信实验

IPv4 地址 . . . . . . . . . . . . : 192.168.92.79。IPv4 地址 . . . . . . . . . . . . : 192.168.92.59。子网掩码 . . . . . . . . . . . . : 255.255.255.0。子网掩码 . . . . . . . . . . . . : 255.255.255.0。使用这篇文章的小工具。

weixin_51883798的博客 433

ES6之this指向详细解析(转)

** 转载地址:this 指向详细解析(箭头函数) ** 前言 this 指向问题是入坑前端必须了解知识点,现在迎来了ES6时代,因为箭头函数的出现,所以感觉有必要对 this 问题梳理一下,遂有此文 在非箭头函数下, this 指向调用其所在函数的对象,而且是离谁近就是指向谁(此对于常规对象,原型链, getter & setter等都适用);构造函数下,this与被创建的新对象绑定;DOM事件,this指向触发事件的元素;内联事件分两种情况,bind绑定, call & apply 方法

m0_47230916的博客 580

整理笔记——二极管

二极管是一种由半导体材料制成的一种具有单向导电性能的电子元器件,二极管的核心是PN结。加在二极管两端的电压和通关的电流被成为,二极管的伏安特性曲线​​​二极管的正向特性:起初正向电压较小时,正向电流几乎没有,称之为死区,此时二极管处于截止状态。当电压差超过截止电压(0.5V或者0.7V),电流随着电压上升,开始增加缓慢,随后急剧增大,二极管的电阻变小进入导通状态,此时电压变化较小。二极管的反向特性:起初反向电流很小,不随电压二变化,此时成为反向饱和电流;当方向电压达到二极管的反向击穿电压。

#include 811

RAG开源框架深度评测:从RAGFlow到Dify的实战选型指南

本文深度评测了主流RAG开源框架(RAGFlow、Dify、WeKnora)的核心能力与实战表现,提供企业级选型指南。重点对比了文档解析、检索性能和生产部署等关键指标,揭示RAGFlow在复杂文档处理、Dify在低代码开发、WeKnora在腾讯生态集成的差异化优势,并给出技术选型决策树与成本优化方案。

weixin_29294597的博客 827

关于箭头函数中的this的指向

普通函数中的this:1. this总是代表它的直接调用者(js的this是执行上下文), 例如 obj.func ,那么func中的this就是obj2.在默认情况(非严格模式下,未使用 'use strict'),没找到直接调用者,则this指的是 window (约定俗成)3.在严格模式下,没有直接调用者的函数中的this是 undefined4.使用call,apply,bind(ES5新...

xu4321083的博客 5万+

Unity3D用c#脚本调用前端javascript函数:H5获取unity - webgl 加载并初始化完成的消息

unity3d发布的Webgl 可以作为静态文件加载到H5页面中,并通过javascript 调用unity内置的C#脚本函数,详见Webgl调用unity api。而往往我们需要知道Webgl ready的消息,本文将给出unity 内部调用javascript函数的方案加以解决。

Bravo 2476

箭头函数与this指向详解

箭头函数以及箭头函数中this的指向问题

web$-小白 4079

matlab电子科技大学数学实验期末模拟35道(1)

【代码】matlab电子科技大学数学实验期末模拟35道。

c_wrj_的博客 2043

大模型系列——Ollama-OCR 简明教程

Llama 3.2-Vision 是一个多模态大型语言模型,有 11B 和 90B 两种大小,能够处理文本和图像输入以生成文本输出。该模型在视觉识别、图像推理、图像描述和回答与图像相关的问题方面表现出色,在多个行业基准测试中优于现有的开源和闭源多模态模型。在本文中,我将介绍如何调用由 Ollama 运行的 Llama 3.2-Vision 11B 建模服务并使用实现图像文本识别 (OCR) 功能。

2401_84052244的博客 1万+

箭头函数与常规函数的this指向问题

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

大剑师兰特的GIS世界 879

嵌入式工程师成长之路(0)----认识元件

在电子设计与维修中,认识元件是成功的关键!面对琳琅满目的电阻、电容、电感与二极管,样子形式千奇百怪,你是否也曾陷入困难? 本文基于行业权威分类标准,结合十年工程师实战经验,深度解析4大类、30+子类电子元件的核心特性、应用场景与避坑指南,助你从“小白”秒变“电子高手”!

云轩阁 11万+

浅谈ES6中箭头函数this和普通函数this指向的问题理解

先说一下普通函数中的this,普通函数中的this表示调用此函数时的对象,如下例: var x=11; var obj={ x:22, say:function(){ console.log(this.x) } } obj.say(); 调用say函数的是对象obj,所以this...

qq_42375089的博客 226

android 蓝牙通讯demo

android 下蓝牙通讯demo,实现了发现蓝牙,使能蓝牙,通过蓝牙发送消息。

jre9下载 jdk9

(Java SE Runtime Environment 9.0) 9.0u175 官方最新版 【x86|x64】

ES6中箭头函数的this指向 与 普通函数的this指向

很多在撸代码的时候,涉及到this总会出现一些问题,无法得到我们想要的值。大多数时候是我们没有弄清楚this的指向到底是什么,所以在某些情况下,this得到的不是我们想要的值。最近学习了一下函数中this指向的问题,在此分享出来也方便自己日后巩固学习。 普通函数与ES6中箭头函数里,this指向的问题 一、普通函数中this (1)总是代表着它的直接调用者,如obj.fn,fn里的最外层this就......

面对疾风吧 1377

锂电池充电器电路设计 里面有电路

锂电池充电器电路设计 里面有电路 3.7V升压到5V电路设计。

ES6箭头函数与this、简单分析this指向问题及解决方式

输出结果: 普通函数中,this指向调用者,this即person对象 输出结果: 说明箭头函数中的this没有找到name属性 箭头函数在哪定义的,函数中的this就指向所在作用域中的this,即箭头函数外的this 输出结果: 因为中的最终会被放到全局执行上下文中执行,此时的this指向window 解决方式2 使用箭头函数 中的function函数体中的this指向的是上层函数体中的this,即中的this,而这里的this取决于谁调用了它,person调用了,那么相当于理解JS

小卡酷谋的博客 461

visio安装包

Microsoft Office Visio 是一款专业的制图软件。利用经过更新的形状、协作工具和数据链接图表,创建专业级图表以简化复杂的信息。

普通函数和箭头函数区别(模板字符串)

一.箭头函数语法:( ) =>{ } ( )中定义参数,如果只有一个参数,可以不写(); { }中写函数体,如果函数体中只有返回值,可以不写return,且{ }也可以不写。 二.案例如下: let obj ={ name:"小明" ...

weixin_66171880的博客 391

day02es6

day2es6 1.let 访问修饰符 1.1声明变量 //声明变量 // let a; // let b,c,d; // let e = 'lbj'; // let f = 'qq',g='ww',h='ee'; 1.2声明的变量不能重复 //变量不能重复声明 // let student = '刘备'; // let student = '诸葛亮'; 1.3不能跨域声明 //不能跨域声明

m0_61333559的博客 155

【js】理解普通函数和箭头函数的区别点

普通函数在es5中就有了,箭头函数是es6中出现的函数形式,当然也可以继续用普通函数。 普通函数大家知道: 形式基本一致 来看看箭头函数: 开发时根据实际情况可以省略一些东西 单条处理可以省略return和{大括号} 单个参数可以省略(小括号) 箭头函数不能作为构造函数 不能new。会报错 箭头函数不绑定arguments,但是可使用…rest参数 这是普通函数arguments,可以使用...

web前端Talk的博客 1万+

JS-箭头函数中的this的指向

一直对于ES6中箭头函数在使用的时候有些疑虑,其中一项就是this的指向问题。跟之前我所熟悉掌握的函数内部this的指向是有些地方不同的,但是在箭头函数中this到底指向谁,我模模糊糊的。所以为了搞清楚这个问题,就特意查阅了相关的资料,现总结下来。在JavaScript语言里面,this的用途很广泛。在这里,对this的含义以及原理就不做解释和说明,因为本文的目的是阐明this的指向问题。一般的,t

BigKongfuPanda的博客 9740

箭头函数及this指向修改

简单的说,箭头函数就是对匿名函数的简化 作为ES6的一种新规范,箭头函数的优点不仅在于写法上的简化,更多的是能够根据情况,与匿名函数之前切换使用,快速达到this指向切换的效果。 那么,箭头函数如何使用呢? 用法及格式 this指向 与普通函数区别 用法及格式 一般形式上的箭头函数长这样 () => { } ...

flynn_ 7002

ES6中箭头函数的this指向

一直以来对于ES6中箭头函数有些疑虑,其中一项就是this的指向问题,所以不敢放手去使用。因为跟之前我所熟悉掌握的函数内部this的指向是有些地方不同的,但是在箭头函数中this到底指向谁,这块儿模模糊糊的。所以为了搞清楚这个问题,就特意查阅了相关的资料,现总结下来。 在JavaScript语言里面,this的用途很广泛。在这里,对this的含义以及原理就不做解释和说明,因为本文的目的是阐明箭头函...

weixin_43739375的博客 3024

【ES6】箭头函数this指向问题【看这一篇就够啦!】

箭头函数this指向 箭头函数有4个使用注意点。 (1)函数体内的this对象,就是定义时所在的对象,而不是使用时所在的对象。 (2)不可以当作构造函数,也就是说,不可以使用new命令,否则会抛出一个错误。 (3)不可以使用arguments对象,该对象在函数体内不存在。如果要用,可以用 rest 参数代替。 (4)不可以使用yield命令,因此箭头函数不能用作 Generator 函数。 上面四点中,第一点尤其值得注意。this对象的指向是可变的,但是在箭头函数中,它是固定的。 function fo

Milk~每天分享一点点,技术进步一点点 3254

箭头函数及其this的指向

目录一、箭头函数1、 基础语法 2、箭头函数简写 二、箭头函数的 this1、全局函数下的 this2、对象方法里面的 this3、构造函数的this4、 call()、apply()、bind()调用时的 thisES6中引入了箭头函数。箭头函数允许我们编写更短的函数。 语法:() =>{} // ():函数 =>:必须的语法,指向代码块 {}:代码块 2、箭头函数简写 代码块只有一句话,省略 { } 和 return只有一个参数时,小括号 ( ) 可省略 普通函数 this 跟调用者有关 箭头

qq_53841687的博客 4041
上一篇: 关于AJAX POST方法返回字符串长度过长的问题
下一篇: 关于对CSS position:absolute 和relative的理解
cataclysm2012
博客等级 码龄15年 11粉丝 5原创
评论 3
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付:10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值