【JS】关于this的使用


this

  • 前言
  • 一、this是什么?
  • 二、做什么?
    • 1.全局环境
    • 2.函数环境
    • 3.new实例对象
    • 4.apply、bind、call绑定
      • 4.1 apply()
      • 4.2 call()
      • 4.3 bind()
  • 三、为什么用this?
  • 四、如何改变this?
  • 五、应用场景?
  • 总结


前言

痛点
经常写Vue项目,现在自己问题是只知道如何使用,但是不知道为什么用它。Vue2通过它获取Vue实例上的属性,而Vue3写法基本上抛弃它了。为什么抛弃它呢?
在这里插入图片描述


一、this是什么?

先看几段代码
在这里插入图片描述

可以看出在不同地方调用,this的值是不一样的。简单来说,它就是用来指向某个对象的。

官方术语

在JavaScript中,this是一个特殊的关键字,用于引用当前执行代码的上下文对象,它的具体值取决于代码在何处被调用和如何被调用

二、做什么?

从上面知道,this的值是一个对象,它的值取决于代码在哪里调用。那么调用的环境有哪些?他们的值又会发生什么样的变化?

1.全局环境

当在全局作用域中使用this时,它引用的是全局对象(在浏览器中是window对象)。
在这里插入图片描述

2.函数环境

当在函数中使用this时,它引用的是调用该函数的对象。如果函数是通过一个对象的方法调用的,this将引用该对象。如果函数是独立调用的(即不是作为对象的方法),

最外层调用函数时,this指向window

function testA(){console.log(this)
}
testA()

在这里插入图片描述

通过对象调用函数,指向对象

let obj = {name:'55',testA: function() {console.log(this)}
}
console.log(obj.testA())

在这里插入图片描述

3.new实例对象

function testA() {console.log(this)
}
let test = new testA();
console.log(test)

在这里插入图片描述

4.apply、bind、call绑定

它们的第一个参数就表示改变后的调用这个函数的对象。因此,这时this指的就是这第一个参数

4.1 apply()

var month = 2;
var day = 6;
function testA(month,day) {console.log(this.month,this.day) //3  7
}
let obj = {month:3,day:7
}
testA.apply(obj) 

4.2 call()

var month = 2;
var day = 6;
function testA(month,day) {console.log(this.month,this.day)//3,7
}
let obj = {month:3,day:7
}
testA.call(obj) 

4.3 bind()

var month = 2;
var day = 6;function testA(month, day) {console.log(this.month, this.day) //3 7
}
let obj = {month: 3,day: 7
}
let s = testA.bind(obj)
s(1, 9)

三、为什么用this?

  • 语法简洁
  • 动态改变代码的上下文对象
  • this 没有作用域的限制,嵌套的函数不会从调用它的函数中继承 this

四、如何改变this?

  • 箭头函数(定义时确定,并以后不改变值,即使bind,call也不行)
  • 缓存this
  • apply、call 、 bind
  • new 实例化一个对象

五、应用场景?

  • 普通函数调用
    • 普通调用
    • 对象调用函数
    • 构造函数(new)
    • apply、bind、call
  • 箭头函数调用
  • 箭头函数和普通函数区别
    • 箭头函数不会创建自己的this(定义时捕获外层执行环境的this,并继承这个this值,之后不会改变)
    • 箭头函数继承而来的this指向永远不变
    • apply、bind、call无法改变箭头函数中this的指向(定义时就已经确定且永远不会改变)
    • 箭头函数不能作为构造函数使用 (箭头函数没有自己的this)
      new
      JS内部首先会先生成一个对象;
      再把函数中的this指向该对象;(箭头函数没有自己的this)
      然后执行构造函数中的语句;
      最终返回该对象实例。
    • 箭头函数没有自己的arguments(在箭头函数中访问arguments实际上获得的是外层函数执行环境中的值)
    • 箭头函数没有原型prototype
    • 箭头函数不能用作Generator函数,不能使用yeild关键字

总结

  • 4种绑定(默认,隐式,显式,new) 优先级 低-高
  • 箭头函数没有自己的this,因为箭头函数定义时捕获上下文对象,并将this赋值,此后什么方法都不能改变this的值。不能构造函数(new实例对象的过程中会将函数this赋值给实例对象,但是箭头函数无自己的this)
  • apply、call、bind 第一个参数是this指向
    • apply和call用法一样,apply传参时数组,call是指定参数,它们立即执行
    • bind 需要创建对象接收,并且还可以再次传递参数,但只在第一次生效

在这里插入图片描述

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

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

相关文章

2023 年 3 月青少年软编等考 C 语言一级真题解析

目录 T1. 字符长方形思路分析 T2. 长方形面积思路分析 T3. 成绩等级转换思路分析 T4. 机智的小明思路分析 T5. 寻找特殊年号思路分析 T1. 字符长方形 给定一个字符,用它构造一个长为 4 4 4 个字符,宽为 3 3 3 个字符的长方形,可以参考样例…

C++单例模式、工厂模式

一、单例模式 (一) 什么是单例模式 1. 是什么? 在系统的整个生命周期内,一个类只允许存在一个实例。 2. 为什么? 两个原因: 节省资源。方便控制,在操作公共资源的场景时,避免了多个对象引起的复杂操作…

Unity的相机跟随和第三人称视角二

Unity的相机跟随和第三人称视角二 展示介绍第二种相机模式远离代码总结 展示 我录的视频上可能看不太出来,但是其实今天的这个方法比原来写的那个方法更简便并且死角更少一些。 这里我也做了两个人物偏移的视角,按Q是原来的两个相机模式切换&#xff0c…

论文阅读笔记 | MetaIQA: Deep Meta-learning for No-Reference Image Quality Assessment

文章目录 文章题目发表年限期刊/会议名称论文简要动机主要思想或方法架构实验结果 文章链接:https://doi.org/10.48550/arXiv.2004.05508 文章题目 MetaIQA: Deep Meta-learning for No-Reference Image Quality Assessment 发表年限 2020 期刊/会议名称 Publi…

BSD-3-Clause是一种开源软件许可协议

BSD-3-Clause是一种开源软件许可协议,也称为BSD三条款许可证。它是BSD许可证家族中的一种,是一种宽松的许可证,允许软件自由使用、修改和重新分发,同时也保留了一些版权和责任方面的规定。 BSD-3-Clause许可证的主要特点包括以下…

Marin说PCB之POC电路layout设计仿真案例---01

最近娃哈哈饮料突然爆火,看新闻后才知道春晚的的时候宗老已经病的很严重了,现在也已经离我们而去了,宗老是一个值得我们尊敬爱戴的伟大企业家。于是乎小编我立马去他们的直播间买了一箱娃哈哈AD钙奶支持一下我们的国货。 中午午休的时候&…

vue3中全局变量的定义和获取

在vue项目中,我们知道vue2定义全局变量是在main.js文件将变量挂载到vue.prototype.name"lisi",在页面通过this.name去调用。但是在vue3中,这个定义全局变量有所改变: const app createApp(App) app.config.globalProp…

Excel如何开启VBA进行二次开发

经常使用Excel做数据分析的朋友平时用的比较多的可能只是一些常用的内置函数或功能,比如求和函数、字符串分割函数、分类汇总、IF函数、VLOOKUP函数等。大多数人认为Excel强大是因为内置了大量的函数。其实,作为一名资深程序猿,个人认为&…

testvue-page

1403.vue <template><div class"error-page"><div class"error-code">4<span>0</span>3</div><div class"error-desc">啊哦~ 你没有权限访问该页面哦</div><div class"error-handle&q…

面试中最常问的10大Linux命令

引言 在信息技术领域中&#xff0c;对于Linux操作系统的精通已成为众多职位的基本要求&#xff0c;尤其对于系统管理员、DevOps工程师、后端开发者等角色更是至关重要。在这篇文章中&#xff0c;我们将深入探讨面试环节中频繁出现的10个核心Linux命令&#xff0c;结合其原理、…

kafka消费端消息去重方案

背景 我们在日常工作中&#xff0c;消费kafka消息是一个最常见的操作&#xff0c;不过由于kafka队列中经常包含重复的消息&#xff0c;并且消息量巨大&#xff0c;所以我们消费端总是需要先把消息进行去重后在消费&#xff0c;以减少消费端的压力&#xff0c;那么日常中我们一…

全量知识系统问题及SmartChat给出的答复 之21 语义关联+词扇+叙词库 之2

Q74. 我们是否可以把语义表征理解为所有语义因子分析的输出结果&#xff0c;换句话说就是是否可以把语义表征作为语义分析的结果的结构来存储分析结果呢 &#xff1f; 是的&#xff0c;语义表征可以被理解为语义分析的结果的结构化表示。语义表征是对语义信息的抽象和总结&…

redis 性能优化一

目录 前言 尾延迟 前言 说到redis 性能优化&#xff0c;优化的目的是什么&#xff1f;提高响应&#xff0c;减少延迟。就要关注两点&#xff0c;一是尾延迟&#xff0c;二是Redis 的基线性能。只有指标&#xff0c;我们的优化&#xff0c;才有意义&#xff0c;才能做监控以及…

玩一会小乌龟

滚滚长江东逝水&#xff0c;浪花淘尽英雄。 是非成败转头空。青山依旧在&#xff0c;几度夕阳红。 白发渔樵江渚上&#xff0c;惯看秋月春风。 一壶浊酒喜相逢。古今多少事&#xff0c;都付笑谈中。 画一个正方形 import turtle# 创建一个Turtle对象 t turtle.Turtle()# 循环…

Spotify8.9.18.512

​ ​【应用名称】&#xff1a;Spotify-声破天 ​【适用平台】&#xff1a;#Android ​【软件标签】&#xff1a;#Spotify ​【应用版本】&#xff1a;8.9.18 ​【应用大小】&#xff1a;67MB ​【软件说明】&#xff1a;软件升级更新。iOS可配合qx小火箭类的工具对该软…

人机环境系统与媒体

人机环境系统是指人与计算机系统或其他数字设备之间的交互环境。它包括硬件设备、软件系统、用户界面和交互设计等组成部分。人机环境系统的目标是提供一个用户友好、高效、安全、可靠的交互环境&#xff0c;使人们能够方便地使用计算机系统或其他数字设备进行工作、学习和娱乐…

scss for循环,$变量,全局样式

$fonWeight: 这段代码是一个 SCSS&#xff08;Sassy CSS&#xff09;代码片段&#xff0c;用于生成一系列字体加粗的类。让我解释一下其中的含义&#xff1a; $fonWeight&#xff1a;这是一个变量&#xff0c;包含了一系列字体加粗的值。它包括数字&#xff08;100 到 900&…

【开发工具】Git模拟多人开发场景理解分支管理和远程仓库操作

我们来模拟一个多人多分支的开发场景。假设你有一个新的空白远程仓库,假设地址是 https://github.com/user/repo.git。 克隆远程仓库到本地 $ git clone https://github.com/user/repo.git这会在本地创建一个 repo 目录,并自动设置远程主机为 origin。 创建本地开发分支并推送…

学术论文GPT的源码解读与二次开发:从ChatPaper到gpt_academic

前言 本文的前两个部分最早是属于此旧文的《学术论文GPT的源码解读与微调&#xff1a;从ChatPaper到七月论文审稿GPT第1版》&#xff0c;但为了每一篇文章各自的内容更好的呈现&#xff0c;于是我今天做了以下三个改动 原来属于mamba第五部分的「Mamba近似工作之线性Transfor…

开源模型应用落地-工具使用篇-Spring AI(七)

一、前言 在AI大模型百花齐放的时代&#xff0c;很多人都对新兴技术充满了热情&#xff0c;都想尝试一下。但是&#xff0c;实际上要入门AI技术的门槛非常高。除了需要高端设备&#xff0c;还需要面临复杂的部署和安装过程&#xff0c;这让很多人望而却步。不过&#xff0c;随着…