原生js如何实现call,apply以及bind
步骤:
将函数设为对象的属性; 指定this到函数,并传入给定参数执行函数; 执行之后删除这个函数; 如果不传入参数,默认指向window;Function.prototype.mycall = function (context, ...args) { //判断是否为函数,如果不是函数,则报错 if (typeof this !== 'function') {throw new Error('不是函数'); } context = context || window; context.fn = this; const res = context.fn(...args); delete context.fn; return res;}
测试代码:
var name = '李辉', age = 25;var obj = { name: '周果', objAge: this.age, myFun: function (fm, to) {console.log(`名字:${this.name},年龄:${this.age},来自:${fm},去往:${to}`) }};var person = { name: '弟弟', age: 12,};Function.prototype.mycall = function (context, ...args) { //判断是否为函数,如果不是函数,则报错 if (typeof this !== 'function') {throw new Error('不是函数'); } context = context || window; context.fn = this; const res = context.fn(...args); delete context.fn; return res;}obj.myFun.mycall(person, '成都', '仁寿'); //名字:弟弟,年龄:12,来自:成都,去往:仁寿2、实现apply
Function.prototype.myApply = function (context, ...args) { //判断是否为函数,如果不是函数,则报错 if (typeof this !== 'function') {throw new Error('不是函数'); } context = context || window; context.fn = this; args = args && args[0] || []; const result = context.fn(...args); delete context.fn; return result;}
测试代码:
obj.myFun.myApply(person, ['成都', '仁寿']); //名字:弟弟,年龄:12,来自:成都,去往:仁寿3、实现bind
bind()方法主要就是将函数绑定到某个对象,bind()会创建一个函数,函数体内的this对象的值会被绑定到传入bind()中的第一个参数的值。
方法1:使用applyFunction.prototype.myBind = function () { let self = this; //保存原函数 let context = [].shift.call(arguments); //保存需要绑定的this上下文 let args = [...arguments]; //将传入的剩余参数转换成数组 return function () { //返回一个新的函数self.apply(context,[].concat.call(args,[...arguments])); }}
ES6简化一下:
Function.prototype.myBind = function (context, ...args1) {return (...args2) => { //返回箭头函数, this绑定调用这个方法的函数对象 context = context || window; return this.apply(context, args1.concat(args2));//合并参数} }方法2:不使用call以及apply
将上面的代码和js手写实现apply的代码合并一下:
Function.prototype.myBind = function (context, ...args1) { return (...args2) => { //返回箭头函数, this绑定调用这个方法的函数对象context = context || window;context.fn = this;const args = args1.concat(args2);const res = context.fn(...args);delete context.fn;return res; }}
测试代码:
obj.myFun.myBind(person, '成都', '仁寿')();//名字:弟弟,年龄:12,来自:成都,去往:仁寿
以上就是原生js如何实现call,apply以及bind的详细内容,更多关于js实现call,apply以及bind的资料请关注好吧啦网其它相关文章!