封装call,apply,bind方法

2019-11-17  本文已影响0人  光年之外iii

众所周知,call,apply,bind三种方法,都可以改变this的指向,区别只在于传参的不同,今天来用原生js对三种方法进行封装。
首先,要声明一个函数作为例子:

var obj={
    name:'zss',
    say:function (){
        console.log(this.name,arguments);
        //arguments为函数中的属性,代表接收的所有参数
    }
}
var s={
    name:'wsnd'
}

call方法为obj.say.call(s,44);
js方法封装:

Function.prototype.mycall=function(opt,...arguments){
var opt=opt || window;
//声明变量,当为空时用window进行调用
var fnName=this.name;
//声明一个变量为要调用函数的函数名
opt[fnName]=this;
//object[key]=value,添加原函数中的该属性
var val=opt[fnName](...arguments);
//声明一个新的变量接收它,方便于之前加上的属性进行删除
delete opt[fnName];
return val;
}
obj.say.mycall(s,44);

apply方法和call基本类似,传值不同,apply传入的是一个数组

Function.prototype.myapply=function (opt,arguments){
    var opt=opt || window
    var fnName=this.name;
    opt[fnName]=this;
    var val=opt[fnName](arguments);
    return val;
}
obj.say.myapply(s,[33,4,5,52,24]);

bind方法,则是传入单个参数时,自执行一个函数。

Function.prototype.mybind=function (opt,...arguments){
    var that=this;
//因为要返回一个自执行函数,声明一个变量保留this指向
    return function(){
        var all_argu=arguments.concat(...arguments)
//声明一个变量,拼接调用apply的参数和原参数
        that.myapply(opt,arguments);
    }
}
obj.say.bind(s,33,4,5,52,24)()
}
上一篇下一篇

猜你喜欢

热点阅读