JavaScript-bind实现原理

大家好，今天给大家带来的是bind的实现原理，比前两个call，apply稍微有点点难，但是大家想要玩转js高级，那就当然是模仿各种的实现原理，对自己的js理解啥的提升挺快的，bind的话，想必大家知道：作用就是改变this指向，不调用函数没，这个跟前两个有些不一样下面我就带大家来写一下bind的实现原理：（在实现bind的原理之前我们先看一下原生的是啥样的然后我们去模仿一下）

function fn(num1.num2){
    console.log(this)
    return num1+num2
}
let obj={
    name:'张三'
}
let abc=fn.bind(obj,1)
console.log(abc(2))

上面写完我们发现结果是这样的：

{ name: 'obj' }
3

我们发现this指向了我们输入的对像，然后函数结果输出为3.下面我们就开始写自己的函数myBind：

;(function(){
    Function.prototype.myBind=function myBind(context){
            
    }
}())

大家可以看到上面我们创建一个自调函数以及把一个myBind函数绑定到了原型链上，下面我们实现第一步就是不但可以在使用bind函数的时候可以传参，还可以在函数调用的时候进行传参，要想实现这个功能，我们应该写成闭包的形式，大家想在外曾获得外层的参数，内层获得调用函数的参数对吧下面我们来试一下我们的猜想：

;(function(){
    Function.prototype.myBind=function myBind(context){
            console.log(context)
            return (...args)=>{
            console.log(args)                            
            }
    }
}())

我们发现都分别获得到了bind函数插入的值以及函数调用传入的值，既然解决这个问题，那我们就解决了最难的一步，下面的一步就相当于我们上节讲的apply的实现方法了下面我们开始书写代码：

;(function(){
    Function.prototype.myBind=function myBind(context){
           const bindArgs = Array.prototype.slice.call(context,1)
            return (...args)=>{
                因为我们第二层写的是箭头函数所以不用担心this指向的问题
                let bindArr=bindArgs.concat(...args)
                context.fn=this
                let fn=context.fn(...bindArr)
                delete context.fn
                return fn
            }
    }
}())

上面我们就模拟完了bind的方法我们来打印一下看一下结果：

{ name: 'obj', fn: [Function: fn] }
3

发现结果没有问题，其实js 的一些原理挺简单的，当我们学会写原理之后js高级的一些东西，就发现会幡然醒悟，奥原来是这样。这期文章就到这里啦，谢谢大家，喜欢的可以点个赞感谢各位！！！