【JavaScript】Function的祖传方法call与apply

在这里插入图片描述

引言

内容速递

看了本文您能了解到的知识！

在本篇文章中，将带你了解什么是call和apply，call和apply的用途、如何手写call和apply以及call和apply的使用场景。

1、什么是call和apply

call()和apply()是JavaScript中的两个内置方法，用于调用函数并指定函数中的this值。

两者的区别是：call()方法的语法和作用与apply()方法类似，只有一个区别，就是call()方法接受的是一个参数列表，而apply()方法接受的是一个包含多个参数的数组。

1.1、call

MDN给的解释：Function.prototype.call()

**call()**方法使用一个指定的this 值和单独给出的一个或多个参数来调用一个函数。

1.2、apply

MDN给的解释：Function.prototype.apply()

apply() 方法调用一个具有给定 this 值的函数，以及以一个数组（或一个类数组对象）的形式提供的参数。

需要注意的是，使用call和apply方法改变函数的this指向后，函数会立即执行，并返回执行结果。

2、call和apply的语法介绍

2.1、call语法

语法：

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

参数：

  • thisArg：可选的。在 function 函数运行时使用的 this 值。请注意，this可能不是该方法看到的实际值：如果这个函数处于非严格模式下，则指定为 null 或 undefined 时会自动替换为指向全局对象，原始值会被包装。

  • arg1, arg2, …：指定的参数列表。

返回值：

使用调用者提供的 this 值和参数调用该函数的返回值。若该方法没有返回值，则返回 undefined。

2.1、apply语法

语法：

function.apply(thisArg, [argsArray])

参数：

  • thisArg：在 func 函数运行时使用的 this 值。请注意，this 可能不是该方法看到的实际值：如果这个函数处于非严格模式下，则指定为 null 或 undefined 时会自动替换为指向全局对象，原始值会被包装。

  • argsArray： 可选。一个数组或者类数组对象，其中的数组元素将作为单独的参数传给 func 函数。如果该参数的值为 null 或 undefined，则表示不需要传入任何参数。从 ECMAScript 5 开始可以使用类数组对象。

返回值：

调用有指定 this 值和参数的函数的结果。

3、call与apply的用法

3.1、call的用法

一个函数继承另外一个函数的属性

代码：

function Guizimo(name, age) {this.name = namethis.age = age
}function Zimo(name, age) {Guizimo.call(this, name, age)this.sex = 'man'
}console.log(new Zimo('guizimo', '24'))
// Zimo{name: 'guizimo', age: '24', sex: 'man'}

代码解析：

  1. 在Guizimo中定义了name和age两个属性。

  2. 在Zimo中使用call，让Zimo继承了Guizimo的属性

  3. new一个Zimo，拥有Guizimo中定义的属性。

3.2、apply的用法

合并两个数组

代码：

const array = ['a', 'b'];
const elements = [0, 1, 2];array.push.apply(array, elements);console.log(array);
// ["a", "b", 0, 1, 2]

代码解析：

  1. 定义了两个数组array和elements。

  2. 在array的push上使用apply，将elements数组传入。

  3. array拥有elements的元素。

4、手写call与apply

4.1、手写call

思路：

  1. 处理好传入的this和参数。

  2. 创建一个临时属性接收当前this。

  3. 将参数作为属性置入创建的的临时属性中，并执行得到结果。

  4. 清理掉刚创建的临时属性。

  5. 返回结果

普通版

/*** 自定义实现call* @returns {*|void}*/
Function.prototype.myCall = function () {// 判断this的指向if (typeof this !== 'function') {throw new Error('type error')}// 处理参数，拿到传入的this与参数const args = Array.from(arguments)// 如果传入的this为null时，指向全局的window对象const newThis = args.shift() || window// 创建一个临时属性接受this，注意唯一性，可能会覆盖原有的属性newThis.fn = this// 将参数作为属性置入const res = newThis.fn(...args)// 删除属性，防止污染delete newThis.fn// 返回return res
}

进阶

想了一下这个还是可以改进的。在使用newThis.fn = this的时候，这个fn需要保持唯一性，不覆盖外部传入的属性，因此可以使用Symbol，注意使用Symbol之后就不再使用newThis.fn，而是newThis[fn]

进阶版

/*** 自定义实现call，优化版* @returns {*}*/
Function.prototype.myCallPlus = function () {// 判断this的指向if (typeof this !== 'function') {throw new Error('type error')}// 处理参数，拿到传入的this与参数const args = Array.from(arguments)// 如果传入的this为null时，指向全局的window对象const newThis = args.shift() || window// 创建一个唯一的keylet fn = Symbol()// 接收临时thisnewThis[fn] = this// 将参数作为属性置入const res = newThis[fn](...args)// 删除属性，防止污染delete newThis[fn]// 返回return res
}

4.2、手写apply

思路：

和call几乎一样，区别是在参数的处理

  1. 处理好传入的this和参数。
  2. 创建一个临时属性接收当前this。
  3. 将参数作为属性置入创建的的临时属性中，并执行得到结果。
  4. 清理掉刚创建的临时属性。
  5. 返回结果。

普通版

/*** 自定义实现apply* @param thisArg* @param args* @returns {*|void}*/
Function.prototype.myApply = function (thisArg, args) {// 判断this的指向if (typeof this !== 'function') {throw new Error('type error')}// 处理外部传递过来的this，如果this为null时，指向全局的window对象const newThis = thisArg || window// 创建一个Null对象，用作返回的载体let res = null// 创建一个临时属性接受this，注意唯一性，可能会覆盖原有的属性newThis.fn = this// 将参数作为属性置入res = newThis.fn(...args)// 删除属性，防止污染delete newThis.fn// 返回return res
}

进阶版

/*** 自定义实现apply，进阶版* @param thisArg* @param args* @returns {*}*/
Function.prototype.myApplyPlus = function (thisArg, args) {// 判断this的指向if (typeof this !== 'function') {throw new Error('type error')}// 处理外部传递过来的this，如果this为null时，指向全局的window对象const newThis = thisArg || window// 创建一个唯一的keyconst fn = Symbol()// 接收临时thisnewThis[fn] = this// 传入参数，调用新属性const res = newThis[fn](...args)// 删除属性，防止污染delete newThis[fn]// 返回return res
}

5、使用场景

5.1 call的使用场景

1、调用父构造函数

在子构造函数中可以使用call调用父构造函数，这种方式可以实现继承，这种使用子构造方法之后，都会拥有父构造函数的属性。

// 父构造方法
function Father (name, age) {this.name = namethis.age = age
}// 子构造方法
function Child(name, age) {Father.call(this, name, age)this.sex = 'man'
}console.log(new Child('guizimo', '24'))
// Child {name: 'guizimo', age: '24', sex: 'man'}

2、调用匿名函数

创建了一个匿名函数，通过call将obj作为属性给到匿名函数使用。

const obj = {name: 'guizimo',age: '24'
};  // 此处;不可省略(function (id) {this.print = function () {console.log(`id : ${id} ${this.name} : ${this.age}`);};this.print();
}).call(obj, 1);// id : 1 guizimo : 24

这里我遇到了一个小插曲：

有一个报错：Uncaught TypeError: {(intermediate value)(intermediate value)} is not a function

原因是在匿名函数使用之前，需要加上;

3、设置指定的上下文this

给某个函数指定上下文this，这是call比较通常的用法

const obj = {name: 'guizimo',description: 'a good boy'
};function fn() {let reply = [this.name, 'is', this.description].join(' ');console.log(reply);
}fn.call(obj);
// guizimo is a good boy

4、使用call不携带this参数

在使用call的时候不给到指定的this参数，这时this的值为全局对象

var name = 'guizimo'  // 注意这里使用 var 来声明function fn() {console.log(`${this.name} is a good boy`)
}fn.call()
// guizimo is a good boy

注意：

在严格模式下，this的值将会是undefined。在调用call的时候，会给到报错。

5.2、apply的使用场景

1合并数组

使用apply可以将push改造为类似concat的效果，但是不会创建一个新的数组，而是在原数组上直接合并。

const array = ['a', 'b'];
const elements = [0, 1, 2];array.push.myApply(array, elements);console.log(array);
// ["a", "b", 0, 1, 2]

2、兼容max和min的限制

apply有一个好处就是可以避免循环。

const numbers = [5, 6, 2, 3, 7];let max = Math.max.apply(null, numbers); // 等同与 Math.max(5, 6, 2, 3, 7)
let min = Math.min.apply(null, numbers); // 等同与 Math.min(5, 6, 2, 3, 7)

看起来使用了apply的收益还是不大，当我们使用Math.max和Math.min是会出现一个问题

JavaScript引擎参数长度上限： 65536）。

为了避免这个问题，可以将数组切块后循环传入目标方法。

function minOfArray(arr) {let min = Infinity;let QUANTUM = 32768;for (let i = 0, len = arr.length; i < len; i += QUANTUM) {const submin = Math.min.apply(null, arr.slice(i, Math.min(i + QUANTUM, len)));min = Math.min(submin, min);}return min;
}let min = minOfArray([5, 6, 2, 3, 7]);

博客说明与致谢

文章所涉及的部分资料来自互联网整理，其中包含自己个人的总结和看法，分享的目的在于共建社区和巩固自己。

引用的资料如有侵权，请联系本人删除！

感谢勤劳的自己，个人博客，GitHub，公众号【归子莫】，小程序【子莫说】

如果你感觉对你有帮助的话，不妨给我点赞鼓励一下，好文记得收藏哟！

幸好我在，感谢你来！

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

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

相关文章

数据可视化揭示人口趋势：从数字到图像的转变

数据可视化揭示人口趋势：从数字到图像的转变

人口是一个关乎我们生活的重要话题&#xff0c;而数据可视化技术为我们提供了一种全新的方式来理解和解读人口变化的趋势。通过将大量的人口数据转化为直观的图表和图像&#xff0c;数据可视化帮助我们更好地观察、分析和解释人类发展的重要特征。 数据可视化揭示人口趋势的第一…
阅读更多...
【Docker】利用Dockerfile制作个人的镜像文件详细讲解

【Docker】利用Dockerfile制作个人的镜像文件详细讲解

前言 Docker 是一个开源的应用容器引擎&#xff0c;让开发者可以打包他们的应用以及依赖包到一个可移植的容器中,然后发布到任何流行的Linux或Windows操作系统的机器上,也可以实现虚拟化,容器是完全使用沙箱机制,相互之间不会有任何接口。 &#x1f4d5;作者简介&#xff1a;热…
阅读更多...
transformer Position Embedding

transformer Position Embedding

这是最近一段很棒的 Youtube 视频&#xff0c;它深入介绍了位置嵌入&#xff0c;并带有精美的动画&#xff1a; Transformer 神经网络视觉指南 -&#xff08;第 1 部分&#xff09;位置嵌入 让我们尝试理解计算位置嵌入的公式的“sin”部分&#xff1a; 这里“pos”指的是“单词…
阅读更多...
面试官：为什么RPC框架历经数十年还在造轮子？同时期的EJB骨灰都快找不到了！

面试官：为什么RPC框架历经数十年还在造轮子？同时期的EJB骨灰都快找不到了！

文章目录 再谈谈RPC的理解RPC的发展史RPC历经数十年而不衰的原因?1、分布式系统的需求2、RPC相关技术的演进3、多语言的支持 本文源自一次面试官的提问&#xff1a;说说你对于RPC框架的了解&#xff0c;你知道哪些RPC框架&#xff0c;以及为什么RPC历经几十年还能不断推出新的…
阅读更多...
Unity URP 2D光照导入与配置

Unity URP 2D光照导入与配置

上面随时间变化的火烧云和晚霞&#xff0c;篝火的呼吸光照&#xff0c;都是URP的功劳。 1.什么是URP&#xff1f; URP 全称为 Universal Render Pipeline(通用渲染管线)。 它的特点是在手游和端游均能在保持性能的同时有良好的效果 也就说在多数情况下&#xff0c;在下面的平台…
阅读更多...
百度卫星地图切换个性化地图

百度卫星地图切换个性化地图

1.切换 if (mapType.value 1) {mapInstance.setMapType(BMAP_SATELLITE_MAP);//卫星地图} else if (mapType.value 2) {mapInstance.setMapType(BMAP_NORMAL_MAP);//标准地图mapInstance.setMapStyleV2({ styleJson: darkJson });//个性化样式}2.不带路况的卫星地图 mapIn…
阅读更多...
Android手写占位式插件化框架之apk解析原理系统源码分析

Android手写占位式插件化框架之apk解析原理系统源码分析

前些天发现了一个蛮有意思的人工智能学习网站,8个字形容一下"通俗易懂&#xff0c;风趣幽默"&#xff0c;感觉非常有意思,忍不住分享一下给大家。 &#x1f449;点击跳转到教程 前言&#xff1a; 上一篇文章 Android手写占位式插件化框架之Activity通信、Service通…
阅读更多...
硬件设计 之 M.2接口常用知识

硬件设计 之 M.2接口常用知识

M.2接口 也被称为NGFF&#xff08;Next Generation Form Factor&#xff09;&#xff0c;是一种用于固态硬盘&#xff08;SSD&#xff09;和无线网络适配器等设备的高速接口标准。它是一种小型、高密度、高速度的接口&#xff0c;可用于替代传统的SATA接口和PCI Express Mini卡…
阅读更多...
浪涌保护器行业应用防雷选型方案

浪涌保护器行业应用防雷选型方案

当今社会中&#xff0c;电气设备的使用范围越来越广泛&#xff0c;也越来越普及&#xff0c;而与之相关的浪涌保护器就显得尤为重要。在这个领域&#xff0c;有一种高品质的浪涌保护器 —— 地凯防雷SPD浪涌保护器&#xff0c;它可以为各种设备提供强大的保护&#xff0c;并在各…
阅读更多...
抖音小程序开发常见问题

抖音小程序开发常见问题

抖音小程序 问题1 抖音小程序调试预留白屏 解决 &#xff0c;连接wifi出现无法打开&#xff0c;用手机流量可以正常访问 抖音小程序 web-view 上传后白屏 抖音小程序使用 webview 白屏&#xff0c;使用web-vew打开h5页面白屏 解决&#xff1a;配置web-view域名 服务器域名配…
阅读更多...
【美团面试】软件测试面试题

【美团面试】软件测试面试题

一、设计登录界面测试用例 功能测试(Function test) 0. 什么都不输入&#xff0c;点击提交按钮&#xff0c;看提示信息。&#xff08;非空检查&#xff09; 1.输入正确的用户名和密码&#xff0c;点击提交按钮&#xff0c;验证是否能正确登录。&#xff08;正常输入&#xff0…
阅读更多...
银行金融风险管理面试问题汇总（附答案）

银行金融风险管理面试问题汇总（附答案）

最近有些学员在咨询换工作的事&#xff0c;包括一些金融上市公司的高管。我收集了一些金融风险管理面试问题相关资料&#xff0c;希望能帮助大家。记得收藏此文章&#xff0c;以防之后找不到文章。 风险经理识别和分析潜在的公司风险&#xff0c;并找到减少或避免风险的方法。…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023