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

JS 的 apply 方法

1. 前言


apply() 的作用有两个: 1. 改变 this 指向 2. 将数组入参变为一般入参

刚开始看到 apply() 时,对它的用法非常模糊,而且不易理解,通过查找相关文章,才慢慢的明白它的妙用

2. 改变 this 指向


相信在网上查找 apply() 用法时,都会看到下面这段代码,首次运行,看到输出的结果,我是懵逼的

 
  1. var person = {
  2. fullName: function () {
  3. return this.firstName + " " + this.lastName;
  4. }
  5. }
  6. var person1 = {
  7. firstName: "Bill",
  8. lastName: "Gates",
  9. }
  10. const res = person.fullName.apply(person1)
  11. console.log(res); // Bill Gates

如何理解 apply() 这段代码 ?

person.fullName() 调用 this.firstName 和 this.lastName 这两个属性,this 指向 person,但它没有这两个属性

使用 apply() 方法可以改变 this 的指向,将 this 的指向改为 person1,所以 person.fullName() 方法就可以成功访问到 this.firstName 和 this.lastName 这两个属性的值了

person.fullName.apply(person1) 可以理解为下面代码,但不要这么写,本质不一样

 
  1. person1.fullName = person.fullName
  2. person1.fullName()

3. 将数组入参变为一般入参


以 Math.max() 举例

 
  1. // 正确用法
  2. Math.max(1, 2, 3)
  3. // 错误用法
  4. Math.max([1, 2, 3])

使用 apply() 的第二个参数将数组入参变为一般入参

注意,这里的第一个参数值为 null,也就是没有改变 this 的指向

 
  1. Math.max.apply(null, [1, 2, 3])

 

相关文章:

  • 冯喜运:4.25黄金原油上演过山车走势附操作建议
  • 花粉过敏人群或超2亿?约克VRF中央空调助你健康鲜呼吸
  • Python | Leetcode Python题解之第48题旋转图像
  • Java基础之JVM对象内存分配机制简介
  • c#对控件的操作无效,子线程调用主线程的控件
  • HTTP/1.1,HTTP/2.0和HTTP/3.0 各版本协议的详解(2024-04-24)
  • dcat admin自定义操作按钮
  • 深度学习 精选笔记(5)多层感知机
  • Rocky Linux 运维工具 Systemd
  • Rocky Linux 运维工具yum
  • freemarker模板引擎结合node puppeteer库实现html生成图片
  • 编程笔记 html5cssjs 090 JavaScript 文档对象模型
  • 【前沿技术RPA】 一文了解UiPath Orchestrator的触发器和监听器
  • Java基于springboot+vue的游戏物品销售购物商城系统 前后端分离
  • HTML5期末大作业:美妆网页主题网站设计——清新的手工肥皂网站展示(4页)HTML+CSS+JavaScript
  • [附源码]Python计算机毕业设计Django三星小区车辆登记系统
  • 《MySQL实战45讲》学习笔记
  • 【网关路由测试】——网关状态转换测试
  • Mali GPU“补丁缺口”让 Android 用户容易受到攻击
  • (一)整合管理范围管理
  • ElementUI组件-日期时间控件设置禁用日期
  • Yocto创建自己的分区(基于STM32MP1)
  • 2022年物联卡的发展前景如何
  • Springboot龙龙汽车配件网站88000计算机毕业设计-课程设计-期末作业-毕设程序代做
  • 毕业设计-基于深度学习火灾烟雾检测识别系统-yolo
  • 如何在快节奏的生活下摆脱焦虑?
  • 2022物联卡平台排名前十的公司
  • [附源码]Python计算机毕业设计SSM敬老院信息管理系统(程序+LW)
  • 自定义Repository从Spring Data JPA访问EntityManager
  • Java IO流(详解)
  • Go语言基础面试题
  • G120变频器输入输出端子功能定义配置方法及示例