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%内容,订阅专栏后可继续查看/也可单篇购买
前端面试题 文章被收录于专栏
前端面试的一些常问问题、问题的具体实现(可直接运行)以及底层原理