js中改变this指向的操作有哪些

js中改变this指向的操作有哪些?

首先了解的是,从面向对象的角度考虑,我们函数的this正常应该是指向调用者:

js 复制代码
例如:person.say();
say函数中的 this 就是指向 person 

常见的有下面几个:

  • 最常见的 new Object()创建一个对象,即创建一个空对象,并将构造函数中的this指向这个空对象,如果构造函数中没有返回,则默认返回这个 this,这个比较是比较常用的,但是大家对这个知识点不一定常见罢了
  • call、apply、bind 这三个则是比较常见、常听到的函数,能明确控制函数的 this 指向,前两个是通过函数直接传递this给函数内部,bind 则是直接通过返回改变 this 后的函数给外部使用
  • 箭头函数,这个是最常见的了,大家都在使用,但箭头函数是没有自己的this,因此内部的this默认使用的是其上下文的this,这也算是改变this的一种方式了
  • Reflect系列,Reflect实际上有很多都是一些原有实现的,比如 Reflect.call、Reflect.apply、Reflect.bind 这个就不多说了,跟上面的一样,其使用最多的就是 Reflect.set、Reflect.get了,这两个的最后一个参数是 receiver ,这个就是传入的this,他是谁,里面的this就指向谁,这个也是 vue3中的代理中出现的问题的解决方案
    • Reflect.get(target, key, receiver) 获取对象属性值
    • Reflect.set(target, key, value, receiver) 设置对象属性值

最后

这期我们就介绍到这里了

顺便来一句,你能hook组件中能写出使用this的操作么(不推荐)

实际上一般人可能第一时间想不到,但是很快也会有思路,当然之前在一个同事的前同事的离职代码中看到的(有人故意搞事的哈,所以不推荐)

我们能使用this的地方就是就是类和成员函数的声明实现了了,那么我们只需要快速创建一个类,里面设置成员函数,在里面使用this就行了,就是这么简单😂

相关推荐
剪刀石头布啊1 小时前
vue、react 列表中使用 index 作为 key 的话,修改某一个元素后会发生什么
前端
方方洛1 小时前
glowglow:语言无关的语法高亮器是怎么实现的
前端·前端框架
java_nnnn2 小时前
JavaEE进阶-HTML基础认识
前端·java-ee·html
鬼手点金2 小时前
Claude Code示范案例-常用快捷命令
java·服务器·前端·计算机视觉·前向传播
CopyCode2 小时前
我排查了一下午,发现项目打包体积翻倍的元凶是它
前端·性能优化
u0111026752 小时前
Vue 3 实现图片裁剪框:拖动、缩放与固定宽高比
前端·javascript·vue.js
汉堡大王95273 小时前
一张图三句需求,我用 Trae Work 做了一块能看日出日落和月相的天文机械表
前端·后端·github
小小善后师3 小时前
用 Canvas + AI 实现登录页的 Logo 粒子动画
前端·vue.js
Amos_Web3 小时前
Rspack 源码解析(十六):多类型资源如何进入 Compilation.assets
前端·rust·前端框架