JS进阶-this

普通函数this指向

普通函数的调用方式决定了this的值,即谁调用this的值指向谁

普通函数没有明确调用者时this值为window,严格模式下没有调用者时this的值为undefined

箭头函数this指向

箭头函数中的this与普通函数完全不同,也不受调用方式的影响,事实上箭头函数中并不存在this

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

2.箭头函数中的this引用的就是最近作用域中的this

3.向外层作用域中,一层一层查找this,直到有this的定义

情况1:在开发中【使用箭头函数前需要考虑函数中this的值】,事件回调函数使用箭头函数时,this为全局的window,因此DOM事件回调函数如果里面需要DOM对象的this,则不推荐使用箭头函数

情况2:同样由于箭头函数this的原因,基于原型的面向对象也不推荐采用箭头函数

总结:

1.函数内不存在this,沿用上一级的

过程:向外层作用域中,一层一层查找this,直到有this的定义

2.不适用:构造函数,原型函数,字面量对象中函数,dom事件函数等

3.适用:需要使用上层this的地方

4.使用正确的话,它会在很多地方带来方便

改变this

call()--了解

使用call方法调用函数,同时指定被调用函数中this的值

语法:

fun.call(thisArg,arg1,arg2,...)

thisArg:在fun函数运行时指定的this值

arg1,arg2:传递的其他参数

返回值就是函数的返回值,因为它就是调用函数

apply()-理解

使用apply方法调用函数,同时指定被调用函数中this的值

语法:

fun.apply(thisArg,[argsArray])

thisArg:在fun函数运行时指定的this值

argsArray:传递的值,必须包含在数组里面

返回值就是函数的返回值,因为它就是调用函数

因此apply主要跟数组有关系,比如使用Math.max()求数组的最大值

    const obj = {age: 18}function fn(x, y) {console.log(this)console.log(x + y)}fn.apply(obj, [1, 2])

求最大值

    const arr = [100, 44, 77]const max = Math.max.apply(Math, arr)const min = Math.min.apply(Math, arr)console.log(max, min)

bind()-重点

bind()方法不会调用函数,但是能改变函数内部this指向

语法:

fun.bind(thisArg,arg1,arg2,...)

thisArg:在fun函数运行时指定的this值

arg1,arg2:传递的其他参数

返回由指定的this值和初始化参数改造的原函数拷贝(新函数)

因此当我们只是想改变this指向,并且不想调用这个函数的时候,可以使用bind,比如改变定时器内部的this指向。

<!doctype html>
<html><head><meta charset="utf-8"><meta name="Author" content="" /><meta name="Keywords" content="" /><meta name="Description" content="" />
</head><body><button>发送短信</button><script>const btn = document.querySelector('button')btn.addEventListener('click', function () {this.disabled = truewindow.setTimeout(function () {this.disabled = false}.bind(btn), 2000)})</script>
</body></html>

call,apply,bind总结

相同点:都可以改变函数内部的this指向

区别点:

1)call和apply会调用函数,并且改变函数内部this指向。

2)call和apply传递的参数不一样,call传递参数aru1,aru2...形式,apply必须数组形式[arg]

3)bind不会调用函数,可以改变函数内部this指向

主要应用场景:

1)call调用函数并且可以传递参数

2)apply经常跟数组有关系,比如借助于数学对象实现数组最大值最小值

3)bind不调用函数,但是还想改变this指向,比如改变定时器内部的this指向

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

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

相关文章

Vim同时打开多个文件

分屏模式 在 Vim 中&#xff0c;可以同时打开多个文件并使用分屏模式来查看它们。以下是一些常见的方法和命令&#xff1a; 在启动 Vim 时打开多个文件 使用 -o 选项打开文件并水平分屏&#xff1a; vim -o file1.txt file2.txt使用 -O 选项打开文件并垂直分屏&#xff1a; v…

宝塔反代openai官方API接口详细教程,502 Bad Gateway问题解决

一、前言 宝塔反代openai官方API接口详细教程&#xff0c;实现国内使用ChatGPT502 Bad Gateway问题解决&#xff0c; 此方法最简单快捷&#xff0c;没有复杂步骤&#xff0c;不容易出错&#xff0c;即最简单&#xff0c;零代码、零部署的方法。 二、实现前提 一台海外VPS服务…

简单OpenSL ES学习

初识OpenSL ES OpenSL ESObjects和Interfaces 所有的Object在OpenSl里面我们拿到的都是一个SLObjectItf&#xff1a;SLObjectItf_创建引擎创建过程要设计得这么麻烦&#xff1f;&#xff08;object的生命周期&#xff09;这么多参数&#xff0c;参数类型这么多学习障碍太大&…

[补题记录] Atcoder Beginner Contest 297(F)

URL&#xff1a;https://atcoder.jp/contests/abc297 目录 F Problem/题意 Thought/思路 Code/代码 F Problem/题意 给一个 H * W 的矩形&#xff0c;在其中任意放置 K 个点&#xff0c;由这 K 个点构成的最小矩形带来的贡献为该矩形的面积&#xff0c;这 K 个点构成一种…

1.6 IntelliJ IDEA开发工具

前言&#xff1a; ### 1.6 IntelliJ IDEA开发工具笔记 - **背景**&#xff1a; - 使用基础文本编辑器如记事本编写Java代码虽然可行&#xff0c;但存在效率低下且难以调试的问题。 - 集成开发环境 (IDE) 可以有效地提高Java程序的开发效率。 - **常见Java IDE**&#xf…

光伏发电预测(GRU模型,Python代码)

运行效果&#xff1a;光伏发电预测&#xff08;GRU模型&#xff0c;Python代码&#xff09;_哔哩哔哩_bilibili 所有库的版本&#xff1a; 1.数据集&#xff08;连续10年不间断采集三个光伏电站的发电量及天气情况&#xff0c;每隔半个小时采集一次信息&#xff0c;因此&…

NICE-SLAM——论文简析

NICE-SLAM: Neural Implicit Scalable Encoding 现有的神经隐式表征方法会产生过度平滑的场景重建&#xff0c;并且难以扩展到大型场景。这些局限性主要是由于其简单的全连接网络架构没有将局部信息纳入观测。NICE-SLAM通过引入分层场景表示法&#xff0c;纳入了多层次的局部信…

uniapp实现上传文件功能

UniApp是一款跨平台的开发框架&#xff0c;可用于开发微信小程序、H5、Android和iOS等多种平台应用。实现上传文件功能需要以下步骤&#xff1a; 引入uni.uploadFile API&#xff0c;代码如下&#xff1a; uni.uploadFile({url: your upload url,filePath: your file path,na…

【Kotlin精简】第2章 集合

1 简介 在 Kotlin 中集合主要分为可变集合与只读集合&#xff0c;其中可变集合使用 “Mutable” 前缀 集合类名表示&#xff0c;比如 MutableList、MutableSet、MutableMap 等。而对于只读集合就是和 Java 中集合类名是一致。 Java 中的 List 非 Kotlin 中的 List , 因为 Kot…

GPT系列论文解读:GPT-3

GPT系列 GPT&#xff08;Generative Pre-trained Transformer&#xff09;是一系列基于Transformer架构的预训练语言模型&#xff0c;由OpenAI开发。以下是GPT系列的主要模型&#xff1a; GPT&#xff1a;GPT-1是于2018年发布的第一个版本&#xff0c;它使用了12个Transformer…

队列--二叉树层序遍历

/*1/ \2 3/\ /\4 5 6 7利用LinkedListQueue1. 头 [1] 尾12.头 [2 3] 尾1 23.头 [3 4 5] 尾1 24.头 [4 5 6 7] 尾1 2 35.头 [] 尾1 2 3 4 5 6 7*/ 代码&#xff1a; class Solution {public List<List<Integer>> levelOrder(TreeNode root) {List<List&l…

ChatGPT Vision初体验

本周&#xff0c;OpenAI为其广受欢迎的 ChatGPT 平台发布了一项突破性的补充。除了处理文本之外&#xff0c;ChatGPT 现在还可以处理图像并聊天。 很难夸大这件事的重要性。目前多达70% 的内容是视觉内容而不是书面内容。人们每年会生成数千张照片&#xff0c;而当今许多最大的…

了解区块链技术和智能合约开发

了解区块链技术和智能合约开发 区块链技术和智能合约开发是当前科技领域的两大热门话题。它们不仅在金融领域有着广泛的应用&#xff0c;还在供应链管理、医疗保健、投票系统等众多领域崭露头角。本文将带您深入了解区块链技术和智能合约开发的基本概念以及如何开始自己的区块…

若依前端-应用路径发布和使用

官网的路径&#xff1a;前端手册 | RuoYi 应用路径 有些特殊情况需要部署到子路径下&#xff0c;例如&#xff1a;https://www.ruoyi.vip/admin&#xff0c;可以按照下面流程修改。 1、修改vue.config.js中的publicPath属性 publicPath: process.env.NODE_ENV "produ…

VR模拟鸡胚培养接种实验,打造沉浸式的学习环境

在医学教育领域&#xff0c;传统的鸡胚接种实验一直是教学的重要组成部分。然而&#xff0c;这种实验方法存在一定的局限性&#xff0c;如操作难度大、成本高、安全隐患等。为了解决这些问题&#xff0c;越来越多的教育机构开始尝试引入虚拟现实(VR)技术&#xff0c;以模拟鸡胚…

研发质量管理体系

研发质量管理体系的脉络是怎样的&#xff1f;如何建立适合组织发展的研发质量管理体系&#xff1f;质量管理的核心是什么&#xff1f;一些思考&#xff0c;一些线索&#xff0c;欢迎朋友们一起探讨、碰撞。

vscode 乱码解决

windows 10 系统 vs code 编译运行和调试 C/C_vscode windows编译_雪的期许的博客-CSDN博客 VS Code默认文件编码时UTF-8&#xff0c;这对大多数情况是没有问题的&#xff0c;却偏偏对C/C有问题。如果以UTF-8编码保存C/C代码&#xff0c;那么只能输出英文&#xff0c;另外使用…

我在 NPM 发布了新包: con-colors

链接地址&#xff1a;npmjs.com con-colors 安装依赖 yarn add con-colors使用 导入&#xff1a; import { print } from "con-colors";使用&#xff1a; print.succ("成功的消息"); print.err("失败的消息")例子&#xff1a; import { p…

红包雨高并发压测记录(200台机器压测实录)

压测5000线程10秒内循环5次&#xff0c;5台2核心4线程的机器&#xff0c;QPS2500 压测10000线程10秒内循环5次&#xff0c;10台2核心4线程的机器&#xff0c;QPS5000 压测200000线程10秒内循环5次&#xff0c;200台2核心4线程的机器&#xff0c;QPS100000 虽然接口异常率都为零…

【云计算网络安全】DDoS 缓解解析:DDoS 攻击缓解策略、选择最佳提供商和关键考虑因素

文章目录 一、前言二、什么是 DDoS 缓解三、DDoS 缓解阶段四、如何选择 DDoS 缓解提供商4.1 网络容量4.2 处理能力4.3 可扩展性4.4 灵活性4.5 可靠性4.6 其他考虑因素4.6.1 定价4.6.2 所专注的方向 文末送书《数据要素安全流通》本书编撰背景本书亮点本书主要内容 一、前言 云…