手写JavaScript中的bind方法

AZmake 发布于2019-08-26 13:35 / 2832人阅读

摘要：如果绑定后的函数被了，那么此时指向就发生改变。构造函数上的属性和方法，每个实例上都有。接下来声明一个函数，在该中获取了第二次传的参数，并且返回了的执行。的又等于的实例。至此，就实现了自己的方法。

之前已经实现过了call，apply和new。今天顺便把bind也实现下。
首先：

bind方法返回的是一个绑定this后的函数，并且该函数并没有执行，需要手动去调用。(从这一点看bind函数就是一个高阶函数，而且和call，apply方法有区别)。

bind方法可以绑定this，传递参数。注意，这个参数可以分多次传递。

如果bind绑定后的函数被new了，那么此时this指向就发生改变。此时的this就是当前函数的实例。

构造函数上的属性和方法，每个实例上都有。

ok，上代码～

Function.prototype.mybind = function(context){
    let that = this;
    let args1 = Array.prototype.slice.call(arguments,1);
    let bindFn = function(){
        let args2 = Array.prototype.slice.call(arguments);
        return that.apply(this instanceof bindFn?this:context,args1.concat(args2)); 
    }
    let Fn = function(){};
    Fn.prototype = this.prototype;
    bindFn.prototype = new Fn();
    return bindFn;
}

首先获取到第一次传递的参数args1，此处要做截取处理，因为第一个参数是this。接下来声明一个函数bindFn，在该bindFn中获取了第二次传的参数args2，并且返回了that的执行。此处的that就是原函数，执行该原函数绑定原函数this的时候要注意判断。如果this是构造函数bindFn new出来的实例，那么此处的this一定是该实例本身。反之，则是bind方法传递的this(context)。最后再把两次获得的参数通过concat()连接起来传递进去，这样就实现了前3条。
最后一条：构造函数上的属性和方法，每个实例上都有。此处通过一个中间函数Fn，来连接原型链。Fn的prototype等于this的prototype。Fn和this指向同一个原型对象。bindFn的prototype又等于Fn的实例。Fn的实例的__proto__又指向Fn的prototype。即bindFn的prototype指向和this的prototype一样，指向同一个原型对象。至此，就实现了自己的bind方法。
代码写好了，测试一下吧~

Function.prototype.mybind = function(context){
    let that = this;
    let args1 = Array.prototype.slice.call(arguments,1);
    let bindFn = function(){
        let args2 = Array.prototype.slice.call(arguments);
        return that.apply(this instanceof bindFn?this:context,args1.concat(args2)); 
    }
    let Fn = function(){};
    Fn.prototype = this.prototype;
    bindFn.prototype = new Fn();
    return bindFn;
}

let obj = {
    name:"tiger"
}

function fn(name,age){
    this.say = "汪汪~";
    console.log(this);
    console.log(this.name+"养了一只"+name+","+age+"岁了 ");
}

/** 第一次传参 */
let bindFn = fn.mybind(obj,"

GPU服务器私有云 bind()方法 bind方法 javascript_bind javascript_bind用法

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/109115.html

js函数this理解？手写apply、call、bind就够了

摘要：一是什么函数的内部属性，引用的是函数据以执行的环境对象。函数做为节点事件调用时指向节点本身做为构造函数实力化方法时指向实例对象箭头函数里的普通函数，由于闭包函数是执行的，所以指向箭头函数的指向函数创建时的作用域。一、this是什么？函数的内部属性，this引用的是函数据以执行的环境对象。也就是说函数的this会指向调用函数的执行环境。 function a(){ retur...

Cciradih 2019-08-26 10:39 评论0 收藏0
「中高级前端面试」JavaScript手写代码无敌秘籍

摘要：第一种直接调用避免在不必要的情况下使用，是一个危险的函数，他执行的代码拥有着执行者的权利。来自于此外，实现需要考虑实例化后对原型链的影响。函数柯里化的主要作用和特点就是参数复用提前返回和延迟执行。手写路径导航实现一个new操作符实现一个JSON.stringify 实现一个JSON.parse 实现一个call或 apply 实现一个Function.bind 实现一个继承实现一个J...

Zhuxy 2019-05-23 16:26 评论0 收藏0
22道JavaScript高频手写面试题

JavaScript笔试部分点击关注本公众号获取文档最新更新,并可以领取配套于本指南的《前端面试手册》以及最标准的简历模板. 实现防抖函数（debounce）防抖函数原理：在事件被触发n秒后再执行回调，如果在这n秒内又被触发，则重新计时。那么与节流函数的区别直接看这个动画实现即可。 showImg(https://segmentfault.com/img/remote/146000002...

Alan 2019-08-26 10:44 评论0 收藏0
JS 笔试手写代码

摘要：版本假设字符每个字符编码小于等于为字符串长度。将数组的元素依次传入一个函数中执行，然后把它们的返回值组成一个新数组返回。复制代码造轮子的同学注意数组的空元素不会再上述方法中遍历出来。复制代码方法，对数组进行洗牌。 contains方法：判定一个字符串是否包含另一个字符串。常规思维，使用正则，但每次都要用new RegExp来构造，太麻烦，性能太差。转而使用原生字符串方法。如indexO...

baiy 2019-08-23 10:57 评论0 收藏0
手写call、apply、bind及相关面试题解析

摘要：我是前端我的全名是我是一个前端指向接收多个参数，第一个是返回值返回值是一个函数上下文的，不会立即执行。柯里化相关讲解请移步简版的实现就算完成了欢迎吐槽点赞它们有什么不同？怎么用？ call 接收多个参数，第一个为函数上下文也就是this，后边参数为函数本身的参数。 let obj = { name: 一个 } ...

TwIStOy 2019-08-23 14:48 评论0 收藏0