【JS重点19】this指向问题总结

2024-06-18 15:28
文章标签 问题 总结 js 重点 指向 19

本文主要是介绍【JS重点19】this指向问题总结,希望对大家解决编程问题提供一定的参考价值,需要的开发者们随着小编来一起学习吧!

目录

一:普通函数this指向

普通函数在严格模式下:

二:箭头函数this指向

this指向说明

不适用this情况

三:改变this指向

1 call()

语法格式:

作用:

2 apply()

语法格式:

作用:

使用场景:

3 bind()方法

作用:

应用场景:

四:如何赚钱


阅读本文章目标:够知道this在不同环境下的默认值,知道动态指定函数this值的方法

一:普通函数this指向

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

 setTimeout(function () {console.log(this);//window}, 1000)
}
//以及setInterval都是指向window,因为其完整的写法是window.setInterval、window.setTimeout

普通函数在严格模式下:

    function fn() {console.log(this);//undefined}fn()

对于在严格模式下,如果没有写清楚普通函数的调用者,this返回undefined

二:箭头函数this指向

this指向说明

箭头函数中本身不存在this,其this是沿着作用域链查找;直到找到外层作用域中有this指向的部分,沿用它的this指向

不适用this情况

构造函数、原型函数(因为在普通函数中,构造函数、原型函数指向实例对象,有其特殊的作用)DOM事件中的函数(指向函数的调用者)

因此要在合适的环境下,合理的使用this0

三:改变this指向

JS中允许指定函数中this的指向,以下3个方法可以动态指定普通函数中this的指向

1 call()

语法格式:

函数名.call(this指向,参数1,参数2....)

作用:

  1. 可以调用函数,并传参
  2. 指定this的指向
const obj = {uname: "郭富城"}function fn(x, y) {console.log(this);//objconsole.log(x + y);//3}fn.call(obj, 1, 2)

2 apply()

语法格式:

fun.apply(this的指向,[传递的值])
//与call()方法的区别:
//应用apply时,向函数内传递参数,必须将传递的值包含在数组当中

作用:

同call()方法

使用场景:

求数组最大最小值

const arr = [1, 3, 4, 5]const max = Math.max.apply(Math, arr)const min = Math.min.apply(Math, arr)console.log(max, min);//5 1
//因为apply可以调用参数,所以用这种方式调用Math对象中的max以及min方法

3 bind()方法

作用:

  • 不会调用函数
  • 其返回值为修改this指向的函数
  • 返回函数中的this指向,已经被指定过了
    const obj = {uname: "郭富城"}function fn(x, y) {console.log(this);//objconsole.log(x + y);//3}const fun = fn.bind(obj, 1, 2)fun()

应用场景:

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

需求:有一个按钮,点击里面就禁用,2秒后开启

 const btn = document.querySelector('button')btn.addEventListener('click', function () {this.disabled = truesetTimeout(function () {this.disabled = false}.bind(btn/this), 2000)})

四:如何赚钱

现在是否厌倦了程序员朝九晚五的生活,想给自己生活寻找另一条路径;在校大学生是否愿意在校进行人生中的第一次创业,获取人生第一桶金;是否正在看此篇文章的你愿意通过五年努力,让自己开上梦想的中的车子;

那就从提升认知开始,加入微木的知识星球:微木的创业思考

专属于创业者的交流集中地,创业、认知提升找微木!

1 创业底层方法论

2 从千万本书书籍中挑选出的,人生必读书目清单。

3 认知提升学习资源(秘密)

4 寻找赚钱项目底层方法论

5 好书精华提炼

6 深度链接微木

每天仅需0.3元/天,欢迎加入专属于创业者的交流集中地,创业、认知提升找微木!

这篇关于【JS重点19】this指向问题总结的文章就介绍到这儿,希望我们推荐的文章对编程师们有所帮助!



http://www.chinasem.cn/article/1072382

相关文章

HarmonyOS学习(七)——UI(五)常用布局总结

自适应布局 1.1、线性布局(LinearLayout) 通过线性容器Row和Column实现线性布局。Column容器内的子组件按照垂直方向排列,Row组件中的子组件按照水平方向排列。 属性说明space通过space参数设置主轴上子组件的间距,达到各子组件在排列上的等间距效果alignItems设置子组件在交叉轴上的对齐方式,且在各类尺寸屏幕上表现一致,其中交叉轴为垂直时,取值为Vert

JS常用组件收集

收集了一些平时遇到的前端比较优秀的组件,方便以后开发的时候查找!!! 函数工具: Lodash 页面固定: stickUp、jQuery.Pin 轮播: unslider、swiper 开关: switch 复选框: icheck 气泡: grumble 隐藏元素: Headroom

学习hash总结

2014/1/29/   最近刚开始学hash,名字很陌生,但是hash的思想却很熟悉,以前早就做过此类的题,但是不知道这就是hash思想而已,说白了hash就是一个映射,往往灵活利用数组的下标来实现算法,hash的作用:1、判重;2、统计次数;

好题——hdu2522(小数问题:求1/n的第一个循环节)

好喜欢这题,第一次做小数问题,一开始真心没思路,然后参考了网上的一些资料。 知识点***********************************无限不循环小数即无理数,不能写作两整数之比*****************************(一开始没想到,小学没学好) 此题1/n肯定是一个有限循环小数,了解这些后就能做此题了。 按照除法的机制,用一个函数表示出来就可以了,代码如下

hdu1043(八数码问题,广搜 + hash(实现状态压缩) )

利用康拓展开将一个排列映射成一个自然数,然后就变成了普通的广搜题。 #include<iostream>#include<algorithm>#include<string>#include<stack>#include<queue>#include<map>#include<stdio.h>#include<stdlib.h>#include<ctype.h>#inclu

在JS中的设计模式的单例模式、策略模式、代理模式、原型模式浅讲

1. 单例模式(Singleton Pattern) 确保一个类只有一个实例,并提供一个全局访问点。 示例代码: class Singleton {constructor() {if (Singleton.instance) {return Singleton.instance;}Singleton.instance = this;this.data = [];}addData(value)

购买磨轮平衡机时应该注意什么问题和技巧

在购买磨轮平衡机时,您应该注意以下几个关键点: 平衡精度 平衡精度是衡量平衡机性能的核心指标,直接影响到不平衡量的检测与校准的准确性,从而决定磨轮的振动和噪声水平。高精度的平衡机能显著减少振动和噪声,提高磨削加工的精度。 转速范围 宽广的转速范围意味着平衡机能够处理更多种类的磨轮,适应不同的工作条件和规格要求。 振动监测能力 振动监测能力是评估平衡机性能的重要因素。通过传感器实时监

缓存雪崩问题

缓存雪崩是缓存中大量key失效后当高并发到来时导致大量请求到数据库,瞬间耗尽数据库资源,导致数据库无法使用。 解决方案: 1、使用锁进行控制 2、对同一类型信息的key设置不同的过期时间 3、缓存预热 1. 什么是缓存雪崩 缓存雪崩是指在短时间内,大量缓存数据同时失效,导致所有请求直接涌向数据库,瞬间增加数据库的负载压力,可能导致数据库性能下降甚至崩溃。这种情况往往发生在缓存中大量 k

git使用的说明总结

Git使用说明 下载安装(下载地址) macOS: Git - Downloading macOS Windows: Git - Downloading Windows Linux/Unix: Git (git-scm.com) 创建新仓库 本地创建新仓库:创建新文件夹,进入文件夹目录,执行指令 git init ,用以创建新的git 克隆仓库 执行指令用以创建一个本地仓库的

6.1.数据结构-c/c++堆详解下篇(堆排序,TopK问题)

上篇:6.1.数据结构-c/c++模拟实现堆上篇(向下,上调整算法,建堆,增删数据)-CSDN博客 本章重点 1.使用堆来完成堆排序 2.使用堆解决TopK问题 目录 一.堆排序 1.1 思路 1.2 代码 1.3 简单测试 二.TopK问题 2.1 思路(求最小): 2.2 C语言代码(手写堆) 2.3 C++代码(使用优先级队列 priority_queue)