• bind的封装


    1.bind、call、apply三者的区别:
      1)bind的返回值是一个函数体,不会被立即调用
      2)call、apply会立即调用,第一个参数都是用来改变this的指向,两者的区别是前者传递参数的时候是一个一个传递,后者是以一个数组的形式传递
      3)bind、call、apply这三个方法都属于函数(Function)的方法
    2.bind的封装:
    bind的特点:(1)返回一个函数体(2)改变this的指向(3)传递参数
    原装的bind方法可以实现:(1)this的改变(2)可以继承自身的原型方法(3)new自身之后this指向构造函数也就是自身(构造函数的this指向实例对象)

    Function.prototype.bindTo = function(){
        //传递过来的第一个参数,即需要改变的this指向(使用arguments形参副本来接收所有的参数)
        var that = arguments[0];
        //获取到剩余的参数
        //slice方法是将数组进行分割,参数为1是代表从数组的第二项开始分割,一直到数组的最后一项
        var arr = Array.prototype.slice.call(arguments).slice(1);
        var _this = this;//当前的this指向bindTo这个函数
        var fn = function(){
            //将当前指向bindTo函数的this进行改变,that表示需要更改的this指向,通过apply方法来改变
            //arr为需要传递的其他参数
            //this instanceof fn判断的是当前是否被new过,如果new过了,则此时this应该指向构造函数本身(构造函数的this指向实例化对象),而this正好指向当前的bindTo函数;如果没有new过,则此时this应该指向传递过来的参数(实现改变this的指向)
            var newThis = this instanceof fn?this:that;
            _this.apply(newThis ,arr);
        }
        //实现继承
        fn.prototype = {
            constructor:fn,
            __proto__:this.prototype
        }
        return fn;
    }

    执行:

    function Fn(a,b,c){
        console.log(this,a,b,c);
    }
    Fn.prototype = {
        show(){}
    }
    var fn1 = Fn.bindTo(document);//原来的this是指向window的,在使用了bindTo方法后可以将this指向document
    var p = new fn1();//new了之后会将this指向Fn(),即构造函数自身(构造函数的this指向实例对象)
    console.log(p);//打印p后可以继承show()原型方法
  • 相关阅读:
    js鼠标右键菜单
    js变量作用域好玩的东东
    清除浮动
    http通信示例Httpclient和HttpServer
    sql复杂案例
    微信小程序(小游戏)后台开发
    自动授时同步NTP时钟之NTP农历源代码算法立显电子技术部宣
    NTP同步时钟系统的实现及局域网授时方法
    modbus协议显示屏|modbus通讯显示屏|modbus显示电子屏功能码实现代码分享
    带掉电记忆功能的LED时钟代码分享
  • 原文地址:https://www.cnblogs.com/Leslie-Cheung1584304774/p/10544150.html
Copyright © 2020-2023  润新知