JS:实现call、apply 及 bind 函数(五颗星)

call、apply、bind函数从哪里来呢?

每个javascript函数其实都是Function对象,而function对象是构造函数,构造函数是有原型对象的,也就是Function.prototype,这个原型对象中有很多属性可以使用,比如call就是在这个原型对象属性里面来的,因此模仿就必须在原型对象里面添加新的和call一样的属性。

注意提示:

函数形参小于函数实参则形参对应实参相同个数的参数,多余的忽略

函数形参大于函数实参则形参对应实参相同个数的参数,少的为undefined,会报错

1.call 函数的实现步骤:

  • 判断调用对象是否为函数,即使是定义在函数的原型上的,但是可能出现使用 call 等方式调用的情况。
  • 判断传入上下文对象是否存在,如果不存在,则设置为 window 。
  • 处理传入的参数,截取第一个参数后的所有参数。
  • 将函数作为上下文对象的一个属性。
  • 使用上下文对象来调用这个方法,并保存返回结果。
  • 删除刚才新增的属性。
  • 返回结果。
<script>
  Function.prototype.newCall = function (context) {
  // 判断调用对象
  if (typeof this !== "function") {
	console.error("type error");
  }
  // 获取参数
  let args = [...arguments].slice(1)
  let result = null;
  // 判断 context 是否传入,如果未传入则设置为 window
  context = context || window;
  // 将调用函数设为对象的方法
  context.fn = this;//该this指向person(a,b,c){}
  // 调用函数
  result = context.fn(...args);
  // 将属性删除
  delete context.fn;
	return result;
  };
  var p={name:"张三"}
  function person(a,b,c){
	console.log(this.name)//张三
	console.log(a,b,c)//1 2 3
  }
  person.newCall(p,1,2,3)
</script>

2.apply 函数的实现步骤:

  • 判断调用对象是否为函数,即使是定义在函数的原型上的,但是可能出现使用 call 等方式调用的情况。
  • 判断传入上

剩余60%内容,订阅专栏后可继续查看/也可单篇购买

前端面试题 文章被收录于专栏

前端面试的一些常问问题、问题的具体实现(可直接运行)以及底层原理

全部评论
感谢楼主分享
点赞 回复 分享
发布于 2023-03-06 18:48 浙江
马了学习一下
点赞 回复 分享
发布于 2023-03-06 18:36 四川

相关推荐

就前几天旅游的时候,打开抖音就经常刷到这类视频:以前是高学历学生、老师、主持人,现在做着团播、擦边主播的工作,以及那些经过精心包装的“职业转型”故事——从铺天盖地的VLOG到所谓的“04年夜场工作日记”,这些内容在初中升学、高考放榜等关键时间节点持续发酵。可以说非常直接且精准地在潜移默化地影响着心智尚未成熟的青少年,使其对特殊行业逐渐脱敏。那我就想问了:某些传播公司、平台运营者甚至某些夜场的老板,你们究竟在传递怎样的价值观?点开那些视频,评论区里也是呈现明显的两极分化:一种是​​经济下行论​​:“现在就业市场已经艰难到这种程度了吗?”​​一种是事实反驳派​​:这些创作者往往拥有名校背景,从事着...
牛客刘北:被环境教育的,为了能拿到足够的钱养活自己,不甘心也得甘心,现在的短视频传播的思想的确很扭曲,但是很明显,互联网玩上一年你就能全款提A6,但你全心全意不吃不喝工作一年未必能提A6,但是在高考中考出现这个的确很扭曲,在向大家传播“不上学,玩互联网也可以轻松年入百万”,不是人变了,是社会在变
预测一下26届秋招形势
点赞 评论 收藏
分享
程序员小白条:你不是有一段实习了吗,现在找中大厂实习?过段时间要秋招了
我的简历长这样
点赞 评论 收藏
分享
评论
1
1
分享

创作者周榜

更多
牛客网
牛客网在线编程
牛客网题解
牛客企业服务