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

手写实现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()来转换伪数组是有条件限制的 

 

 

 

相关文章:

  • 刷题记录(240619)
  • JSON学习
  • .Net多线程Threading相关详解
  • 数据库大作业——音乐平台数据库管理系统
  • 爬虫的法律风险是什么?以及合法使用爬虫技术的建议。
  • 基于深度学习的光流预测
  • Elasticsearch搜索引擎(高级篇)
  • k8s快速上手实操
  • llama-factory微调chatglm3
  • MySQL数据库的列类型
  • 如何理解shell命令 cd $(dirname $0)
  • matlab 路面点云标线提取
  • 2024年应用科学、航天航空与核科学国际学术会议(ICASANS 2024)
  • 睿治数据治理平台焕新升级,推出全新建模与调度平台
  • 【面试八股总结】Redis数据结构及底层实现
  • [微信小程序] 使用ES6特性Class后出现编译异常
  • 【跃迁之路】【733天】程序员高效学习方法论探索系列(实验阶段490-2019.2.23)...
  • HTTP那些事
  • HTTP中的ETag在移动客户端的应用
  • JavaScript 事件——“事件类型”中“HTML5事件”的注意要点
  • JAVA多线程机制解析-volatilesynchronized
  • Laravel Telescope:优雅的应用调试工具
  • MySQL用户中的%到底包不包括localhost?
  • Quartz初级教程
  • Vue.js 移动端适配之 vw 解决方案
  • 从伪并行的 Python 多线程说起
  • - 概述 - 《设计模式(极简c++版)》
  • 猴子数据域名防封接口降低小说被封的风险
  • 漫谈开发设计中的一些“原则”及“设计哲学”
  • 应用生命周期终极 DevOps 工具包
  • Redis4.x新特性 -- 萌萌的MEMORY DOCTOR
  • ​Linux Ubuntu环境下使用docker构建spark运行环境(超级详细)
  • ###51单片机学习(1)-----单片机烧录软件的使用,以及如何建立一个工程项目
  • #我与Java虚拟机的故事#连载12:一本书带我深入Java领域
  • (1)STL算法之遍历容器
  • (Redis使用系列) Springboot 实现Redis消息的订阅与分布 四
  • (Redis使用系列) SpringBoot中Redis的RedisConfig 二
  • (ZT)出版业改革:该死的死,该生的生
  • (八十八)VFL语言初步 - 实现布局
  • (动手学习深度学习)第13章 计算机视觉---微调
  • (二)十分简易快速 自己训练样本 opencv级联lbp分类器 车牌识别
  • (附源码)ssm旅游企业财务管理系统 毕业设计 102100
  • (函数)颠倒字符串顺序(C语言)
  • (亲测成功)在centos7.5上安装kvm,通过VNC远程连接并创建多台ubuntu虚拟机(ubuntu server版本)...
  • (微服务实战)预付卡平台支付交易系统卡充值业务流程设计
  • .net framework profiles /.net framework 配置
  • .Net FrameWork总结
  • .NET 自定义中间件 判断是否存在 AllowAnonymousAttribute 特性 来判断是否需要身份验证
  • .NET命令行(CLI)常用命令
  • ::
  • @Async注解的坑,小心
  • @我的前任是个极品 微博分析
  • [202209]mysql8.0 双主集群搭建 亲测可用
  • [Android]如何调试Native memory crash issue
  • [Android开源]EasySharedPreferences:优雅的进行SharedPreferences数据存储操作