当前位置: 首页 > news >正文

this,this指向

this的多种用法

  • 全局范围内

  • 函数调用

  • 作为对象方法的调用

  • call/apply/bind 的调用

  • 作为构造函数调用

 在全局范围内使用this ,它将指向全局对象(浏览器中为 window)

纯粹的函数调用,这是函数的最通常用法,属于全局性调用,因此this就代表全局对象Global

 在事件中表示当前元素的时候,可以使用this

在html结构中的this,指向的绑定事件的元素本身

字面量对象中的this:指的就是对象本身

定时器中的this指向window

箭头函数中的this
  • 箭头函数会捕获其所在上下文的 this 值,作为自己的 this 值,自己本身并没有this值;

  • 箭头函数的this永远指向其上下文的this,任何方法都改变不了其指向,如call(), bind(), apply()。

call(),apply(),bind() 方法

所有函数都是对象,都有call(),apply(),bind()方法,都是为了改变this指向

 call和apply相似,不同指出在于传递的方式不同,call的参数需要逐个列举,apply的参数需要通过数组的形式传递

function fun2(a,b){console.log(a+b);console.log(this);
}
box1.onclick = function(){fun2.call(this,10,20)
}
function fun(){console.log(this);
}
function fun2(a,b){console.log(a+b);console.log(this);
}
box1.onclick = function(){fun.apply(this)fun2.apply(this,[10,20])
}

bind有两个特点

  1. 不会调用函数

  2. 可以改变函数内部this指向

function fun2(a, b) {console.log(a + b);console.log(this);
}
box1.onclick = function () {// bind传參的格式和call是一样的,直接用逗号隔开var aa = fun2.bind(this,10,20)aa();
}


http://www.mrgr.cn/news/48013.html

相关文章:

  • uniapp Native.js原生arr插件服务发送广播到uniapp页面中
  • 【Leetcode 每日一题】3159. 查询数组中元素的出现位置
  • flask后端开发(7):加载静态文件
  • 设计模式-创建型-单例模式
  • MySQL和HBase的对比
  • Git基本操作快速入门(30min)
  • 在Stable Diffusion WebUI中安装SadTalker插件时几种错误提示的处理方法
  • 直流有刷电机驱动芯片:【TOSHIBA:TB6612】
  • Linux基础命令groupmod详解
  • 使用LlamaFactory进行模型微调
  • 低功耗
  • 多人播报配音怎么弄?简单4招分享
  • 【C++学习】核心编程之内存分区模型、引用和函数提高(黑马学习笔记)
  • 简单解析由于找不到xinput1_3.dll,无法继续执行代码的详细解决方法
  • 图的深度优先遍历的非递归算法
  • 服务端测试开发必备的技能:Mock测试!
  • 半周期检查-下降沿发上升沿采
  • AI语音助手在线版本
  • 数据结构与算法(八)循环链表
  • onnx代码解读
  • 摩托车一键启动智能钥匙提高了便捷性和安全性
  • 多元线性回归:机器学习中的经典模型探讨
  • HttpPost 类(构建 HTTP POST 请求)
  • 基于Springboot+Vue的网上订餐系统(含源码数据库)
  • 光伏“地图导航”:光照、政策、电价一目了然
  • 【p2p、分布式,区块链笔记 UPNP】: Libupnp test_init.c 02 初始化SDK --- UpnpInitPreamble