手写实现call函数和应用场景

2024-06-17 02:44

本文主要是介绍手写实现call函数和应用场景,希望对大家解决编程问题提供一定的参考价值,需要的开发者们随着小编来一起学习吧!

1.  手写实现call函数

  var person ={getName:function(){console.log(this) //windowreturn this.name}}var man={name:'张三'}console.log(person.getName) // undefinedconsole.log(person.getName.call(man)) //张三//------------------------------------------//手写call函数--简写Function.prototype.call=function(context){//1. getName函数要执行//1-2 这个时候 getName的函数里 this指向的是window//1-3 传过来的context参数是需要指向的man对象context.fn=this //这里的this是getName函数,因为是getName来调用的call。然后//把这个this赋值给context对象上的fn函数,所以现在就是传入的参数在调用getName函数return context.fn() //2. 返回调用后的结果}console.log(person.getName.call(man))//详细写Function.prototype.call = function (context) {//对this进行类型判断,如果不是function类型,就报错//this应该指向的是调用call函数的对象(function也属于对象object类型)if (typeof this !== 'function') {throw new Error('this is not a funtion')}//形参不一定会传//不传的话,默认是windowcontext = context || window//取参数const args = [...arguments].slice(1)// 假如context上面有fn属性的时候,会出现冲突// 所以当context上面有fn属性的时候,要先保存一下var temp = nullif (context.fn) {temp = context.fn}// 给context创建一个fn属性,并将值设置为需要调用的函数(即this)context.fn = thisconst res = context.fn(args)// 删除context对象上的fn属性if (temp) {context.fn = temp} else {delete context.fn}// 返回运行结果return res}

视频参考地址:

call方法的实现

apply  bind 方法的手写:

apply bind 方法的实现


2. call apply 的应用场景

1. js的继承,使用call+构造函数实现继承

2. 判断js 的数据类型

3. 把伪数组转为数组 

//继承
//构造函数大写开头以区分,不需要return
function Animal() {this.eat = function(){console.log("吃东西")}
}
function Bird() {this.fly = function() {console.log("我会飞")
}
}function Cat() {
//使用cat的this调用Animal/Bird Animal/Bird中的this也变成cat 所以可以调用Animal.call(this);Bird.call(this)this.sayName = function(){console.log("输出自己的名字")}
}
let cat = new Cat();
cat.eat() //吃东西
cat.fly()   //我会飞
cat.sayName()   //输出自己的名字
//判断数据类型
console.log(Object.prototype.toString.call(bool));//[object Boolean]
console.log(Object.prototype.toString.call(num));//[object Number]
console.log(Object.prototype.toString.call(str));//[object String]
console.log(Object.prototype.toString.call(und));//[object Undefined]
console.log(Object.prototype.toString.call(nul));//[object Null]
console.log(Object.prototype.toString.call(arr));//[object Array]
console.log(Object.prototype.toString.call(obj));//[object Object]
console.log(Object.prototype.toString.call(fun));//[object Function]
var objArr = {0:12,1:15,2:23,3:99,length:4
}const newArr = Array.prototype.slice.call(objArr );
/*this指向objArr,由于我们调用slice方法时并没有传入参数,所以start = 1,end = 4就将伪数组转为真数组了
*/
//通过Array.prototype.slice.call()来转换伪数组是有条件限制的
//(1)对象里的属性名必须是连续的数字,并且属性名如果不是从0开始,需要给slice传参
//(2)伪数组里length属性的值必须是该对象中数字属性名的个数

通过Array.prototype.slice.call()来转换伪数组是有条件限制的 

 

 

 

这篇关于手写实现call函数和应用场景的文章就介绍到这儿,希望我们推荐的文章对编程师们有所帮助!



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

相关文章

python生成随机唯一id的几种实现方法

《python生成随机唯一id的几种实现方法》在Python中生成随机唯一ID有多种方法,根据不同的需求场景可以选择最适合的方案,文中通过示例代码介绍的非常详细,需要的朋友们下面随着小编来一起学习学习... 目录方法 1:使用 UUID 模块(推荐)方法 2:使用 Secrets 模块(安全敏感场景)方法

C++中assign函数的使用

《C++中assign函数的使用》在C++标准模板库中,std::list等容器都提供了assign成员函数,它比操作符更灵活,支持多种初始化方式,下面就来介绍一下assign的用法,具有一定的参考价... 目录​1.assign的基本功能​​语法​2. 具体用法示例​​​(1) 填充n个相同值​​(2)

MySql基本查询之表的增删查改+聚合函数案例详解

《MySql基本查询之表的增删查改+聚合函数案例详解》本文详解SQL的CURD操作INSERT用于数据插入(单行/多行及冲突处理),SELECT实现数据检索(列选择、条件过滤、排序分页),UPDATE... 目录一、Create1.1 单行数据 + 全列插入1.2 多行数据 + 指定列插入1.3 插入否则更

Redis中Stream详解及应用小结

《Redis中Stream详解及应用小结》RedisStreams是Redis5.0引入的新功能,提供了一种类似于传统消息队列的机制,但具有更高的灵活性和可扩展性,本文给大家介绍Redis中Strea... 目录1. Redis Stream 概述2. Redis Stream 的基本操作2.1. XADD

Spring StateMachine实现状态机使用示例详解

《SpringStateMachine实现状态机使用示例详解》本文介绍SpringStateMachine实现状态机的步骤,包括依赖导入、枚举定义、状态转移规则配置、上下文管理及服务调用示例,重点解... 目录什么是状态机使用示例什么是状态机状态机是计算机科学中的​​核心建模工具​​,用于描述对象在其生命

Spring Boot 结合 WxJava 实现文章上传微信公众号草稿箱与群发

《SpringBoot结合WxJava实现文章上传微信公众号草稿箱与群发》本文将详细介绍如何使用SpringBoot框架结合WxJava开发工具包,实现文章上传到微信公众号草稿箱以及群发功能,... 目录一、项目环境准备1.1 开发环境1.2 微信公众号准备二、Spring Boot 项目搭建2.1 创建

IntelliJ IDEA2025创建SpringBoot项目的实现步骤

《IntelliJIDEA2025创建SpringBoot项目的实现步骤》本文主要介绍了IntelliJIDEA2025创建SpringBoot项目的实现步骤,文中通过示例代码介绍的非常详细,对大家... 目录一、创建 Spring Boot 项目1. 新建项目2. 基础配置3. 选择依赖4. 生成项目5.

JSONArray在Java中的应用操作实例

《JSONArray在Java中的应用操作实例》JSONArray是org.json库用于处理JSON数组的类,可将Java对象(Map/List)转换为JSON格式,提供增删改查等操作,适用于前后端... 目录1. jsONArray定义与功能1.1 JSONArray概念阐释1.1.1 什么是JSONA

PostgreSQL中rank()窗口函数实用指南与示例

《PostgreSQL中rank()窗口函数实用指南与示例》在数据分析和数据库管理中,经常需要对数据进行排名操作,PostgreSQL提供了强大的窗口函数rank(),可以方便地对结果集中的行进行排名... 目录一、rank()函数简介二、基础示例:部门内员工薪资排名示例数据排名查询三、高级应用示例1. 每

nginx -t、nginx -s stop 和 nginx -s reload 命令的详细解析(结合应用场景)

《nginx-t、nginx-sstop和nginx-sreload命令的详细解析(结合应用场景)》本文解析Nginx的-t、-sstop、-sreload命令,分别用于配置语法检... 以下是关于 nginx -t、nginx -s stop 和 nginx -s reload 命令的详细解析,结合实际应