阅读 101

call,apply,bind

这是我参与8月更文挑战的第26天,活动详情查看:8月更文挑战

  • call/apply/bind 可以基于call/bind/apply 等方式,强制手动改变函数中的this
  1. call [function].call([context],params1,params2,....) [function]作为Function内置类的一个实例,可以基于__proto__ 找到Function.prototype的call方法,并且把找的的call方法执行,在call方法执行的时候,会把[function] 执行,并且把函数中的this 指向为[context],并且把params1,params2 等参数分别传递给函数
  2. apply 和call 作用一样,只不过传递给函数的参数需要一组数组的形势传递给apply

call方法的第一个参数,如果不传递或者传递的是null/undefined,在非严格模式下都是让this 指向window(严格模式下传递的是谁,this就是谁,不传递就是undefined) func.call(); func.call(null); func.call(undefined) func.call(11) Number

  1. bind [function].bind([context],params1,params2,....) 语法上和call 类似。但是作用和call/apply都不太一样,call/apply都是把当前函数立即执行,并且改变函数中的this指向,而bind是一个预处理的思想,基于bind只是预先把函数中的this指向[context],把params这些参数预先存储起来,但是此时函数并没有被执行
let body = document.body;
let obj = {
    name:"obj"
}
function func(x,y){
    console.log(this,x,y);
}
body.onclick = func;  把func 函数本身绑定给body的click 事件,此时func 并没有执行
body.onclick = func(10,20)  先把func 执行,把方法执行的返回结果作为值绑定给body的click 事件



body.click = func.bind(obj,10,20);

//如果没有bind 的情况下(bind 不兼容ie 6 -8)

body.onclick = function anoymous (){
    func.call(obj,10,20)
}
复制代码

重写bind bind 的内部机制就是利用闭包(柯理化函数编程思想)预先把需要执行的函数以及改变的this再以及后续需要给函数传递的参数信息等保存到不释放的上下文中,后续使用的时候直接拿来用,这就是经典的预先存储的思想

Function.prototype.bind = function(context= window,...params){
    bind里面的this 是实例
    let _this = this
    return function anonymous(...inners){
       执行bind(bind中的this 是要操作的函数),返回一个匿名函数给事件绑定或者其他内容,当事件触发的时候,首先执行的是匿名函数(此时匿名函数中的this和bind中的this是没有关系的)
        _this.apply(context,params.concat(inners))
    }
}
复制代码

call 应用 需求把类数组(索引和length以及具备interator 可迭代性)但是不是数组的实例(不能用数组原型上的方法)转换为数组的方法

  • Array.from(arguments);
  • let args = [...arguments] 基于展开运算符
  • let args = []; for(let i=0;i<arguments.length;i++){ args.push(arguments[i]) }
  • 数组中的slice 啥都不传,进行克隆一份
  Array.prototype.slice = function slice(){
    let args = [];
    for(let i=0;i<this.length;i++){
    args.push(this[i])
    }
    return args;
  }
   
复制代码
  • [].slice.call(arguments);
  • [].forEach.call(arguments,item =>{}) 遍历
文章分类
前端
文章标签