修改this指向的call、apply、bind

2019-07-07  本文已影响0人  关耳木南
    /*
        call -->参数依次往后写
        apply --> 就两个参数,第二个参数是数组[],参数依次写在数组里
            前两个主动执行调用函数
        
        **call和apply的区别是传参方式不同
        
        bind :不兼容低版本IE
            这个不主动执行调用函数
        以上三个方法的第一个参数,都是修改调用函数的this指向的对象
        调用函数的实参依次写在后面
     */
     var a = 1;
     var obj = {
        a: 2
     }
     function fn(){
        console.log(this.a)
     }
     fn();//1
     fn.call(obj);//2
     fn.bind(obj);//不主动执行
     fn.bind(obj)();//2  加括号执行
     document.onclick = fn.bind(obj);//bind运用的场景
     /*
        Array.prototype.add = function(){//所有的数组都可以直接调用add这个方法
            
        }
      */
     Function.prototype.bind = function(){
        console.log(this);
        return function(){

        }
     }
     fn.bind();
</script>

bind兼容写法

<script type="text/javascript">
     /*
        Array.prototype.add = function(){//所有的数组都可以直接调用add这个方法
            
        }
      */
     Function.prototype.bind = function(){
        var bindThis = arguments[0];
        var arg = Array.prototype.slice.call(arguments,1);
        var that = this;
        return function(){
            console.log("这是人为写的bind");
            that.apply(bindThis,arg)
        }
     }
     function fn(){
        // console.log(this)
     }
     fn.bind()();

     //
     //兼容写法
     if(!Function.prototype.bind){
        Function.prototype.bind = function(){
        var bindThis = arguments[0];
        var arg = Array.prototype.slice.call(arguments,1);
        var that = this;
        return function(){
            that.apply(bindThis,arg)
        }
     }
     }
</script>
上一篇 下一篇

猜你喜欢

热点阅读