js手撕——bind的模拟实现

在前端面试中，可能会出现一些手撕模拟实现的题目，这里进行一些记录。

原生api

js中中提供了 call, apply, bind 用于手动指定this的指向

概念

调用 call 和 apply 的对象，必须是一个函数 Function

由于apply()方法（或者call()方法）不仅绑定函数执行时所在的对象，还会立即执行函数

第一个参数，是一个对象, 由该对象调用Function

s.Function.call(obj)
// 相等于 obj.FunctionA.sayHello.call();//不传参数指向全局window对象，输出window.name也就是window
//如果call方法没有参数，或者参数为null或undefined，则等同于指向全局对象。

call 和 apply 的主要作用，是改变对象的执行上下文，并且是立即执行的。它们在参数上的写法略有区别。

bind 也能改变对象的执行上下文，它与 call 和 apply 不同的是，返回值是一个函数，并且需要稍后再调用一下，才会执行。

call(),apply(),bind()都是用来重定义this对象的

这三个函数的第一个参数都是 this 的指向对象；

第二个参数的差别：

call 的参数直接放进去，第二第三第 n 个参数全都用逗号分隔，直接放到后面 obj.myFun.call(db,‘n1’, … ,‘n’ )。

apply 的所有参数都必须放在一个数组里面传进去 obj.myFun.apply(db,[‘n1’, …, ‘m’ ])。

bind 除了返回是函数以外，它的参数和 call 一样。

当然，三者的参数不限定是 string 类型，允许是各种类型，包括函数、 object 等等！

var obj = {name:'tzb',age:18,myFunc:function(n, a){console.log(this.name + "年龄" + this.age);console.log(n + "年龄" + a);}
}var db = {name :'zhi',age:22
}
// call apply bind 都是挂到Object上的函数
//1.call
obj.myFunc(); // tzb 年龄18
// obj.myFunc().call()是错误写法 （）表示立即执行函数 myFunc()执行完成之后并没有返回值
obj.myFunc.call(db,'bin',33) // zhi年龄22 /n bin年龄33//2.apply
obj.myFunc.apply(db,['bin',33]) // zhi年龄22  bin年龄33//3.bind
var f = obj.myFunc.bind(db,'bin',33);
// bind返回的是一个函数 加上()才会执行
f();  // zhi年龄22  bin年龄33

模拟实现

bind的模拟实现使用到了 apply ,这里先给出apply的模拟实现

apply

// args传入的需要是一个数组
function myApply(context, args) {if (typeof this !== 'function') {throw new Error('调用者必须是函数');}context = context || window;// 手动给调用者添加一个方法context.fn = this;let res;if (args) {res = context.fn(...args);}else {res = context.fn();}// 获得结果后删除该属性delete context.fn;return res;
}Function.prototype.myApply = myApply;

bind模拟实现

// bind(thisObj, a1, a2, a3);function myBind(...args) {if (typeof this !== 'function') {throw new Error('调用者必须是函数');}const fn = this;const context = args[0] || window;const myArgs = args.slice(1);return function(...newArgs) {fn.apply(context, myArgs.contact(newArgs));}}

上述模拟实现没有考虑bind返回的函数作为构造函数的情况。
在构造函数中，this指向新生成的对象。那么下面这个就不合适了。

  return function(...newArgs) {fn.apply(context, myArgs.contact(newArgs));}

考虑构造函数的情况

// bind(thisObj, a1, a2, a3);function myBind(...args) {if (typeof this !== 'function') {throw new Error('调用者必须是函数');}// this为调用bind的函数对象const fn = this;const context = args[0] || window;const myArgs = args.slice(1);let Temp = function(){};Temp.prototype = fn.prototype;// bind返回的函数 f 作为构造函数时 let f =  function(...newArgs) {return fn.apply(this instanceof f ? this : context, myArgs.contact(newArgs));}// 继承原型链上的属性f.prototype = new Temp();return f;}