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

 

 

 

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

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

相关文章

java项目中的高并发处理

在Java面试中,当被问及项目中的高并发处理时,你可以从以下几个方面来分享经验: 1. 项目背景介绍 简要介绍项目的业务场景和功能,以及为什么需要高并发处理。 2. 并发量评估 描述如何评估系统需要处理的并发量,包括…

vuejs3 pinia持久化存储

pinia地址: 开始 | Pinia 插件地址: 快速开始 | pinia-plugin-persistedstate 先安装pinia npm install pinia 再安装插件 安装pinia后,再安装这个插件 npm i pinia-plugin-persistedstate 全局中引入持久化插件 在src目录下的main…

react传参有哪些常用方法?--Props,Context API和Redux全局管理

在 React 中,父子组件之间的传参主要通过以下几种方式实现: 1) Props 传递:父子传参 2)Context API: 跨多层组件传递数据 3) Redux: 全局状…

基于Django的博客系统之增加手机验证码登录(九)

需求文档 概述 实现基于Redis和第三方短信服务商的短信验证码登录功能。用户可以通过手机号码获取验证码,并使用验证码进行登录。 需求细节 用户请求验证码 用户在登录页面输入手机号码并请求获取验证码。系统生成验证码并将其存储在Redis中,同时通过…

【Android】安卓开发的前景

人不走空 🌈个人主页:人不走空 💖系列专栏:算法专题 ⏰诗词歌赋:斯是陋室,惟吾德馨 目录 🌈个人主页:人不走空 💖系列专栏:算法专题 ⏰诗词歌…

VMware虚拟机-Ubuntu设置共享文件夹(超详细)

目录 前言1. 其他教程2. 创建共享文件夹3. VMware 设置4. Ubuntu 设置4.1 创建 hgfs 目录:4.2 挂载共享目录4.3 验证是否挂载成功4.4 设置开机自动挂载创作不易,禁止转载抄袭!!!违者必究!!! 创作不易,禁止转载抄袭!!!违者必究!!! 创作不易,禁止转载抄袭!!!违…

韩顺平0基础学java——第24天

p484-508 System类 常见方法 System.arrycopy(src,0,dest,1,2); 表示从scr的第0个位置拷贝2个,放到目标数组索引为1的地方。 BigInteger和BigDecimal类 保存大整数和高精度浮点数 BigInte…

Springboot 整合 Flowable(一):使用 flowable-UI 绘制流程图

目录 一、Flowable简介 二、Flowable 与 Activiti 的区别 三、流程图的绘制(以员工请假流程图为例) 1、下载 flowable 的压缩包: 2、启动包中的 tomcat 3、登录页面 4、绘制结束,导出 bpmn20.xml文件 一、Flowable简介 Fl…

老胡的周刊(第146期)

老胡的信息周刊[1],记录这周我看到的有价值的信息,主要针对计算机领域,内容主题极大程度被我个人喜好主导。这个项目核心目的在于记录让自己有印象的信息做一个留存以及共享。 🎯 项目 pingvin-share[2] Pingvin Share 是一个可自…

【机器学习】图神经网络:深度解析图神经网络的基本构成和原理以及关键技术

🔥 个人主页:空白诗 文章目录 引言一、图数据及其应用场景1.1 图数据的定义和特征1.2 常见的图数据结构1.2.1 社交网络1.2.2 知识图谱1.2.3 分子结构1.2.4 交通网络 1.3 图数据在不同领域的应用实例1.3.1 社交网络中的推荐系统1.3.2 知识图谱中的信息检索…

StarRocks详解

什么是StarRocks? StarRocks是新一代极速全场景MPP数据库(高并发数据库)。 StarRocks充分吸收关系型OLAP数据库和分布式存储系统在大数据时代的优秀研究成果。 1.可以在Spark和Flink里面处理数据,然后将处理完的数据写到StarRo…

SQL 表连接(表关联)

目录 一、INNER JOIN(内连接,等值连接) 二、LEFT JOIN(左连接) 三、RIGHT JOIN(右连接): 一、INNER JOIN(内连接,等值连接) 用途:获取两个表中字段能匹配上…

如何解决 Git 默认不区分文件名大小写和同名文件共存?

修改文件命名的大小写,不会有 git 记录 本文章的例子:将 demo.vue 文件命名改为 Demo.vue 1、在Git项目路径下执行该命令 git config core.ignorecase false (1)以上方法可以实现 git 区分 demo.vue 与 Demo.vue 文件&#xff0…

功能强大的多功能文档转换工具Neevia Document Converter Pro 7.5.0.241

Neevia Document Converter Pro是一款功能强大的Windows软件,旨在将文档转换为各种格式,包括PDF、TIFF、JPEG和许多其他格式。该程序专为在企业环境中使用而设计,提供文档转换和处理过程的自动化,这使其成为处理大量文档的组织的***工具。 Neevia Document Converter Pro的…

Oracle的listagg的用法和例子

LISTAGG 是 Oracle 数据库中用于将多行数据连接(聚合)成单个字符串的函数。它通常与 GROUP BY 子句一起使用,以便将来自多个行的值连接成一个由指定分隔符分隔的字符串。 语法 sql LISTAGG(column_value, delimiter) WITHIN GROUP (ORDER …

PHP7 数组的实现

前提 PHP版本:php7.0.29使用到的文件 php-src/Zend/zend_types.hphp-src/Zend/zend_hash.hphp-src/Zend/zend_hash.cphp-src/Zend/zend_string.h 本文 是《PHP7底层设计和源码实现》第5章 数组的实现,学习笔记 功能分析 整体结构 bucket 里面增加h字段…

5、存储管理

磁盘分区方式 MBR格式 分区命令:fdisk 一共有14个分区(4个主分区,扩展分区,逻辑分区) MBR要求硬盘空间是小于2TB的 一块硬盘最多有4个主分区 GPT格式 分区命令:gdisk 一共可以有128个主分区 对硬盘大小没有…

CAD关于Curve偏移生成一个DBObjectCollection对象

关于Curve对象使用GetOffsetCurves(double)生成一个DBObjectCollection 对象 很奇怪,为什么是一个集合的对象,今天试了一下,生成的确实只得到一个偏移对象的实体。只需要提取第一个索引值即可。 //获得偏移的实体using (Transaction trans …

欣九康诊疗系统助力诊所向数字化转型

数字化已经成为各行各业转型的重点方向,而为了不被时代所淘汰,医疗机构也势必要紧跟潮流,本人作为门诊部的负责人深知医疗机构要想实现数字化转型那么拥有一款便捷实用的医疗平台是必不可少的,近几年,随着国家大力支持…

动态 SQL

动态 SQL 是 MyBatis 的强大特性之一&#xff0c;能够完成不同条件下不同的 sql 拼接。也就是说执行的 SQL 语句并不是固定的&#xff0c;而是不同人的不同操作执行的语句会有所差异。MyBatis 通过使用 标签 的方式来实现这种灵活性的。 <if>标签 例如在有一些网站进行…