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 四川

相关推荐

沐芷凌曦:这简历数分别指望了,数分最基本的SQL能力你的经历是完全没办法佐证的,而且简历排版极其混乱。你的奖项为什么要写具体的项目内容;教育经历为什么要写你在什么课学到了什么东西,这些都应该是在专业技能里的;专业技能里你又把项目的内容放了进来,而且专业技能你又在强调ETL,如果说你确定要把ETL作为你专业技能的主体那你的经历为什么不能重点佐证呢;反而项目经历你项目等于你调用PyEcharts做了一个看板,就是最基本的课程设计,也是没办法佐证你对PyEcharts的掌握程度,而且没有说具体用什么技术做了什么东西中间做了什么最终得到了什么结果。
点赞 评论 收藏
分享
评论
1
1
分享

创作者周榜

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