js实现一个 bind 函数

 

 

⭐️  作者：船长在船上
🚩 主页：来访地址船长在船上的博客
🔨  简介：高级前端开发工程师，专注前端开发，欢迎咨询交流，共同学习！

👉👉👉 欢迎来访船长在船上的博客，如有疑问可以留言、评论，看到后会及时回复。  

 

 

 

目录

原理：通过 apply 或者 call 方法来实现

(1)初始版本

(2) 原型链

---

 

 

原理：通过 apply 或者 call 方法来实现

 

区别：

 

 

function.apply(obj,argArray)//argArray为数组

function.call(obj,arg1,arg2,arg3…)//后面的参数为列表项

apply()和call()不传参数时候功能是相同的，但是它们接受的参数不同，apply的第二个参数只能接受一个数组，并且apply()只能是二个参数，而call()的第二个参数起接受的多个参数列表项，参数是可以多个。

 

(1)初始版本

 

Function.prototype.bind=function(obj,arg){
    var arg=Array.prototype.slice.call(arguments,1);
    var context=this;
    return function(newArg){
        arg=arg.concat(Array.prototype.slice.call(newArg));
        return context.apply(obj,arg);
    }
}

(2) 原型链

 

为什么要考虑？因为在 new 一个 bind 过生成的新函数的时候，必须的条件是要继承原

函数的原型

 

Function.prototype.bind=function(obj,arg){ 
    var arg=Array.prototype.slice.call(arguments,1); 
    var context=this; var bound=function(newArg){             
       arg=arg.concat(Array.prototype.slice.call(newArg)); 
       return context.apply(obj,arg); 
    }

    var F=function(){}
    //这里需要一个寄生组合继承
    F.prototype=context.prototype; 
    bound.prototype=new F(); 
    return bound; 
}

 

 

文章推荐：

（一）前端开发面试会问到的问题有哪些？

（二）前端开发面试会问到的问题有哪些？

（三）CSS前端开发面试会问到的问题有哪些？ 

（四）CSS前端开发面试会问到的问题有哪些？

（五）CSS前端开发面试会问到的问题有哪些？

 

🔔  感谢：如果觉得博主的文章不错或者对你的工作有帮助或者解决了你的问题，可以关注、支持一下博主，如果三连收藏支持就会更好，在这里博主不胜感激！！！如有疑问可以留言、评论，看到后会及时回复。