• Javascript——bind的模拟实现


    一、开始

    假设我们有一个函数,一个对象

    var foo = {
        value:1
    }
    function bar(name,age){
        this.hobby = 'shopping';
        console.log(this.value);
        console.log(name);
        console.log(age);
    }
    bar.prototype.friend = 'kevin';

    我们试一试用原生的bind可以输出什么

    var bindFoo = bar.bind(foo, 'daisy');
    var obj = new bindFoo('18');

    可以看到指定原型链,指定了this,bind的同时可以传参数

    ①指定this,bind的同时穿参数:

    我们知道bind返回一个函数并绑定了this,这个模拟起来比较简单

    Function.prototype.binds = function(dir){
         var self = this;
         var _args = [].slice.call(arguments,1);
         return function(){
              var args = _args.cancat([].slice.call(arguments));
             self.apply(dir,args);
         }  
    }

    ②指定原型链的指向,即prototype的指向:

    Function.prototype.binds = function(dir){
         var self = this;
         var _args = [].slice.call(arguments,1);
    
         var inn = function(){
              var args = _args.concat([].slice.call(arguments));
              self.apply(dir,args);
         }  
    
         inn.prototype = new dir();
         inn.prototype.constructor = inn;
    
         return inn;
    } 

    到这里,如果不去new出一个实例的话,都可以了,如果需要new出一个实例来,我们就需要重新指定下this,因为如果使用new操作符会把this指向新创建的对象,但我们还是需要他指向原本指向的对象,所以,我们要判断当前调用对象是否为原对象的一个实例属性,修改后的代码为:

    Function.prototype.binds = function(dir){
         var self = this;
         var _args = [].slice.call(arguments,1);
    
         var inn = function(){
              var args = _args.concat([].slice.call(arguments));
             self.apply(this instanceof self ? this : dir,args);
         }  
    
         inn.prototype = new self();
         inn.prototype.constructor = inn;
    
         return inn;
    } 

    到底,我们应该已经完成了对bind的模拟,输出看下结果:

    多出的几个undefined是在new时产生的

  • 相关阅读:
    sonarque下载和安装使用
    npm install appium
    WIn10 电脑运行Docker
    AngularJs Type error : Cannot read property 'childNodes' of undefined
    Angular ui-route介绍
    Thymeleaf的模板使用介绍
    IntelliJ IDEA IDEA 2018 激活注册码
    session和cookies
    springmvc中的拦截器interceptor用法
    实现mapper接口注入的两种方式,以及后台的使用区别
  • 原文地址:https://www.cnblogs.com/lastnigtic/p/6818219.html
Copyright © 2020-2023  润新知