前端怎么传_javascript前端经典面试题bind实现原理

面对面试环节bind实现已经变成不可缺少的一道风景了，那么从几个角度来了解下bind的一切吧！

一、bind一共做了三件事情

1. bind改变了函数当中this的指向
2. 返回一个新函数
3. 执行函数，传入参数

var fn = function(arg1) {  this.age = arg1;  return this;}var obj = {name: 'haha'}// 1. 把fn里面的this指向到obj,也就是说fn里面的this就是obj// 2. 返回一个新的函数var fnRes = fn.bind(obj)// 3.执行返回来的函数，带入参, 返回return的结果fnRes(3)

二、那么一步步来实现下bind的函数吧

1. 扩展原型上的方法

Function.prototype.myBind = function() {}

2. 执行myBind返回一个函数

Function.prototype.myBind = function() {  // 返回一个函数return function() {    }}

3. 改变this指向

Function.prototype.myBind = function(targetObj) {  var originObj = this;  // 都知道原型方法里面的this都指的是实例，这里我们改变下到我们指定的对象上  return function() {    // 把原来的this改变成来targetObj  originObj.apply(targetObj)  }}

4. 函数参数处理

Function.prototype.myBind = function(targetObj) {  var originObj = this;  // 都知道原型方法里面的this都指的是实例，这里我们改变下到我们指定的对象上  return function() {    // 获取参数    var args = arguments;    // 把原来的this改变成来targetObj  originObj.apply(targetObj, arguments)  }}

5. 如果想扩展bind里面传多个参数，那么我们怎么处理呢

Function.prototype.myBind = function(targetObj) {  var originObj = this;  var args = [].slice.call(arguments, 1)  // 都知道原型方法里面的this都指的是实例，这里我们改变下到我们指定的对象上  return function() {    // 获取参数和整合参数    args = Object.assign(args, arguments)    // 把原来的this改变成来targetObj  originObj.apply(targetObj, args)  }}

看完这篇文章，你不仅知道怎样使用bind，也可以写出自己的bind，顺顺利利通过面试。在这里祝大家前端技术之路一路上升！

分享前端bind实现原理面试题结束来！觉得对你有帮助记得➕关注啊！更多面试题原理陆续到来