精华内容
下载资源
问答
  • js代码-bind 方法实现

    2021-07-16 16:29:29
    js代码-bind 方法实现
  • 柯理化函数思想:一个js预先处理的思想;利用函数执行可以形成一个不销毁的作用...* bind方法实现原理1 * @param callback [Function] 回调函数 * @param context [Object] 上下文 * @returns {Function} 改变this指向
  • bind方法实现

    2018-04-26 00:48:23
    bind方法的作用:就是进行this绑定。他的返回值是一个函数,返回的函数中的this就是bind的参数对象。 可以这样的进行简单的实现: function bind(fn, context){ return function(){ return fn.apply(context,...

    bind方法的作用:就是进行this绑定。他的返回值是一个函数,返回的函数中的this就是bind的参数对象。

    可以这样的进行简单的实现:

    function bind(fn, context){
        return function(){
            return fn.apply(context,arguments);
        }
    }

    在原生JavaScript中,bind是一种Function上的原型方法。

    bind方法的实现方式如下所示:

    Function.prototype.bind = function (obj) {
       var _this = this;
        return function () {
            return _this.call(obj);
        }
    }
    展开全文
  • • 柯理化函数思想:一个js预先处理的思想;利用函数执行可以形成一个不销毁的作用域的...* bind方法实现原理1 * @param callback [Function] 回调函数 * @param context [Object] 上下文 * @returns {Function} 改变t
  • 原生实现bind方法

    千次阅读 2018-05-13 12:16:14
    想要用原生js写一下bind方法,嗯,让我们先来了解一下bind方法吧,先看一波官方的解释(MDN):bind() 函数会创建一个新函数(称为绑定函数),新函数与被调函数(绑定函数的目标函数)具有相同的函数体。...

    想要用原生js写一下bind方法,嗯,让我们先来了解一下bind方法吧,先看一波官方的解释(MDN):

    bind() 函数会创建一个新函数(称为绑定函数),新函数与被调函数(绑定函数的目标函数)具有相同的函数体。当新函数被调用时this值绑定到bind()的第一个参数,该参数不能被重写。绑定函数被调用时,bind()也接受预设的参数提供给原函数。
    一个绑定函数也能使用new操作符创建对象:这种行为就像吧原函数当成构造器。提供的this值被忽略,同时调用时的参数被提供给模拟函数。

    哎呀我的妈,官方的解释真的是好绕。我们来举个栗子说:

    var foo = {
        value:'233',
        getValue: function() {
            console.log(this.value);
            console.log(arguments[0], arguments[1])
        }
    }
    
    var newGetValue = foo.getValue.bind(foo, 1);
    newGetValue(2);
    //233
    //1 2
    简单来说:
    1、函数foo.getValue调用bind的时候,会返回一个新的函数newGetValue。
    2、newGetValue和foo.getValue函数体是一毛一样的。
    3、newGetValue函数被调用时的this是指向对象foo(传给bind的第一个参数)。
    4、bind函数被调用时传递的参数,会在newGetValue被调用时传递,并且排在实参的最前面。
    5、new newGetValue() 时,会把newGetValue当成一个构造函数,this自动被忽略,参数依旧可以传。

    好了,接下来我们来聊聊原生js怎么实现?在这之前希望你了解过call、apply是如何用原生实现的。
    Function.prototype.mybind = function(context) {
        var self = this;
        var args = [];//保存bind函数调用时传递的参数
        for(var i = 1, len = arguments.length; i< len;i ++) {
            args.push(arguments[i]);
        }
        
        //bind()方法返回值是一个函数
        return function() {
            //哇,新创建的函数传进来的参数可以在这里拿到哎!!
            var bindArgs = Array.prototype.slice.call(arguments);
            self.apply(context, args.concat(bindArgs))
        }
    }
    OK,我们已经实现了bind的方法指定this值,和传递参数的功能了。

    接下来看一下构造函数的效果如何实现:忽略this的值,传参依旧正常。我一直在想,怎么知道调用的时候是通过构造调用的呢?
    这个简单,被当做构造函数调用的时候this指向一个新创建的对象;而被当普通函数调用的时候,this是指向window的。那么问题又来了?我们如何判断this指向这个新对象呢?别忘了,构造函数new一个新对象必然关系到原型链继承这些事情,是的,bind函数不仅会复制被调函数的函数体,原型链也要复制。这样我们就看 this instanceof self ? 新对象是否继承自被调函数呀,如果是,那么就是被当做构造函数调用的。
    来看代码:
    Function.prototype.mybind = function (context) {
        if (typeof this !== "function") {
            throw new Error(this + "is not a function");
        }
        var self = this;
        var args = [];
        for (var i = 1, len = arguments.length; i < len; i++) {
            args.push(arguments[i]);
        }
    
        var fbound = function () {
            var bindArgs = Array.prototype.slice.call(arguments);
            self.apply(this instanceof self ? this : context, args.concat(bindArgs));
        }
        fbound.prototype = Object.create(self.prototype);
        //返回的函数不仅要和 被调函数的函数体相同,也要继承人家的原型链
        return fbound;
    }

    最后,别忘了,如果调用bind方法的不是一个函数,要报错哦~
    这篇博客也是我自己看了bind的原生实现之后对知识的一个梳理和总结,让我能更好的理解和掌握。如有错误,恳请指正。

    参考文章:JavaScript深入之bind的模拟实现


    展开全文
  • 主要给大家介绍了关于如何手动实现es5中的bind方法的相关资料,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面小编来一起学习学习吧
  • 如何自己实现bind方法

    2019-06-20 05:51:23
    由于在低版本浏览器没有js原生bind方法,所以要兼容低版本浏览器的话就要手动实现 了解bind函数 bind 强制将函数的执行环境绑定到目标作用域中去 与 call 和 apply 其实有点类似,但是不同点在于,bind 方法不会立即...

    由于在低版本浏览器没有js原生bind方法,所以要兼容低版本浏览器的话就要手动实现

    了解bind函数

    bind 强制将函数的执行环境绑定到目标作用域中去

    与 call 和 apply 其实有点类似,但是不同点在于,bind 方法不会立即执行,而是返回一个改变了上下文 this 后的函数

    因此我们要想自己实现一个 bind 函数,就必须要返回一个函数,而且这个函数会接收绑定的参数的上下文。

    if (!Function.prototype.bind) {
        Function.prototype.bind = function () {
            if(typeof this != 'function'){// 判断调用者是不是函数
                throw new TypeError('Function.prototype.bind - what is trying to be bound is not callable');
            }
            var self = this,                        // 保存原函数 (this指向调用bind者)
            context = [].shift.call(arguments), // 把参数中的第一个剪切出来,保存需要绑定的this上下文
            args = [].slice.call(arguments);    // 剩余的参数转为数组
            return function () {                    // 返回一个新函数
                self.apply(context,[].concat.call(args, [].slice.call(arguments)));
            }
        }
    }
    复制代码

    arguments 的含义

    arguments 是一个对应于传递给函数的参数的类数组对象,没有 shift 等数组独有的方法

    function fun(){
      console.log(arguments)
      console.log(Array.prototype.slice.call(arguments))
    }
    console.log(fun('a','b'));
    复制代码

    arguments转换成数组 方法一

    先将 arguments 转为数组,然后再对其运用了 slice 方法 Array.prototype.shift === [].shift

    Array.prototype.slice.call(arguments); //通过原型的方式直接在类上调用
    [].slice.call(arguments);    //通过实例化,继承过来,然后再调用
    
    //["a", "b"]
    复制代码

    arguments转换成数组 方法二

    es6 为数组新增了一个 from 方法

    Array.from(temp).slice();   //["a", "b"]
    复制代码

    为什么要合并参数

    作者看文章的时候看到[].concat.call(args, [].slice.call(arguments)也有点蒙圈,参数不就是args么,为什么要合并它自己?如果你也是这么认为的那就请认真往下阅读 其实args是绑定上下文的时候(也就是bind())传递的参数,而后面的arguments则是调用bind()()第二个括号传递的参数,所以这里才会需要合并 如果还是有点不明白可以看看一下的代码,懂了的可跳过啦

    Function.prototype.binding = function () {
        let self = this;
        let context = [].shift.call(arguments);
        let args = [].slice.call(arguments);
        console.log(args);
    
        return function () {
            self.apply(context, [].concat.call(args, [].slice.call(arguments)))
        }
    };
    
    let obj = {
        a: 'a'
    };
    
    function f(b, c, d) {
        console.log(this.a, b, c, d)
    }
    
    f.binding(obj, 'b', 'c', 'd')('e');
    f.binding(obj, 'b', 'c')('d', 'e');
    f.binding(obj, 'b')('c', 'd', 'e');
    f.binding(obj)('b', 'c', 'd', 'e');
    
    输出:
    [ 'b', 'c', 'd' ]   a b c d
    [ 'b', 'c' ]   a b c d
    [ 'b' ]   a b c d
    [] a b c d
    复制代码

    补充

    slice() 方法可从已有的数组中返回选定的元素  //slice(2,4)
    shift() 方法用于把数组的第一个元素从其中删除,并返回第一个元素的值
    unshift() 方法可向数组的开头添加一个或更多元素,并返回新的长度
    复制代码
    Array.from() 
    从一个类似数组或可迭代对象中创建一个新的,浅拷贝的数组实例。
    
    Array.from('foo'); //Array ["f", "o", "o"]
    Array.from([1, 2, 3], x => x + x); //Array [2, 4, 6]
    复制代码

    apply的用法

    function setName(){
      this.name='haha';
    }
    function person(){
      setName.apply(this);
    }
    var person=new person();
    console.log(person.name);
    复制代码

    apply与bind的区别

    const person = { name: 'ximelly' }
    
    function sayHi(age) {
    console.log(`${this.name} is ${age}`)
    }
    
    //call和apply 立即执行
    sayHi.call(person, 21)
    
    //bind 返回带有绑定上下文的函数副本,但不立即执行
    sayHi.bind(person, 21)()
    sayHi.bind(person)(21)
    复制代码

    转载于:https://juejin.im/post/5d0b1903f265da1b904be75e

    展开全文
  • js中的bind方法实现方法

    千次阅读 2018-10-10 19:40:09
    js中目前我遇见的改变作用域的5中方法:call, apply, eval, with, bind。 var obj = { color: 'green' } function demo () { console.log(arguments) console.log(this.color) } var newFn = demo.bind...

    js中目前我遇见的改变作用域的5中方法:call, apply, eval, with, bind。

    	var obj = {
    		color: 'green'
    	}
    	function demo () {
    		console.log(arguments)
    		console.log(this.color)
    	}
    	var newFn = demo.bind(obj,1,1,1)
    	newFn(2,2,2)

    bind改变函数作用域的方式和call和apply的不同点在于,call和apply是改变作用域的同时也会执行函数。而bind改变作用域会生成一个新函数,是否执行可以根据具体需求设置。

    模拟这个bind方法的代码如下:

    	var obj = {
    		color: 'green'
    	}
    	function demo () {
    		console.log(arguments)
    		console.log(this.color)
    	}
        /*
        * bind1 模拟bind方法
        * @fn 需要执行的函数
        * @obj 传入的作用域
        */
    	var bind1 = function (fn, obj){
            //取从索引值为2开始的后边的所有参数,生成数组
    		var paramArr = [].slice.call(arguments,2);
    		return function(){
                //拼接两次传入的除了fn和作用域之后的参数
    			fn.apply(obj, paramArr.concat([].slice.call(arguments,0)))
    		}
    	}
    	var curFn = bind1(demo, obj, 3,3,3)
    	curFn(4,4,4)

    另外一种给函数添加方法的代码为:

    	var obj = {
    		color: 'green'
    	}
    	function demo () {
    		console.log(arguments)
    		console.log(this.color)
    	}
    
    if(Function.prototype.bind === undefined){
        Function.prototype.bind = function (obj) {
            var paramArr = [].slice.call(arguments, 1);
            var that = this;
            return function () {
                that.apply(obj, paramArr.concat([].slice.call(arguments, 0)))
            }
        }
    }
    var curFn = demo.bind1(obj,1,1,1)
    curFn(2,2)

     

    展开全文
  • 手动实现ES5的bind方法

    2018-10-16 23:26:14
    bind方法创建一个新函数,改变函数的作用域,并且不同于call、apply,函数不执行 bind可用于实现偏函数,则实现时需要同时保存bind()被传入的参数arguments以及返回的新创建函数被传入的参数arguments function ...
  • 本文实例讲述了jQuery使用bind函数实现绑定多个事件的方法。分享给大家供大家参考,具体如下: 在jQuery中绑定多个事件名称是,使用空格隔开,举例如下: $("#foo").bind("mouseenter mouseleave", function() { $...
  • bind的基本使用 bind是用来做什么的?... 这个新的函数和调用点bind方法的函数是长得一模一样的。 bind里面的参数,就是函数执行时的this指向。 <script> var abc = 123; function test () { ...
  • 用apply实现bind方法

    2019-05-28 17:09:57
    function baz (fn,obj) { return function(){ return fn.apply(obj,arguments); } } function foo(){ console.log(this.a);...之前this指向window,输出结果为3,用了bind后,输出结果为5
  • 使用apply实现bind方法

    2017-08-13 20:03:35
    Function.prototype.bind = function(context){ //保存this,也就是调用bind的那个函数 var self = this; var args = [].slice.call(arguments,1); return function(){ //将第一次的参数与此次传入的参数合并,...
  • bind()方法: 会创建一个新函数。当这个新函数被调用时,bind() 的第一个参数将作为它运行时的 this,之后的一序列参数将会在传递的实参前传入作为它的参数。(来自于 MDN ) 此外,bind实现需要考虑实例化后对...
  • boost bind 实现方法

    千次阅读 2012-07-23 16:28:37
    一直比较好奇 boost::bind 里面占位符和参数的顺序是怎么实现的,也一直看不太懂这方面源代码,昨晚好好看了下,终于有点弄懂了。小记一笔,与大家分享。 先看一个简单的用例: #include    int foo(bool a,...
  • bind是什么 ...首先调用bind方法会返回一个新的函数(这个新的函数的函数体应该和fun是一样的)。同时bind中传递两个参数,第一个是this指向,即传入了什么this就等于什么。如下代码所示: this.value
  • 在 google 一番技术资料后,发现 firefox 原生支持一个 bind 方法,该方法很好的满足了我们的初衷,调用方法与 call 和 apply 一样,只是定义完成后,在后期调用时该方法才会执行,需要的朋友可以了解下
  • 手动实现一个call方法 方法如下: Function.prototype.myCall = function(object) { let obj = object || window; // 如果没有传this参数,this将指向window obj.fn = this; // 获取函数本身,此时调用call...
  • bind方法解释

    2018-05-30 11:55:54
    MDN的解释是:bind()方法会创建一个新函数,称为绑定函数,当调用这个绑定函数时,绑定函数会以创建它时传入 bind()方法的第一个参数作为 this,传入 bind() 方法的第二个以及以后的参数加上绑定函数运行时本身...
  • 在TemplateField模板中为了能够有限制的或者取出数据库中某列的值时,可以用Bind和Eval方法来实现。以下是Bind方法的格式,Eval的格式也是和Bind一样的。 Bind("列的名称","显示的格式文")
  • js bind方法

    千次阅读 2019-03-26 22:51:46
    MDN上的解释是: bind()函数会创建一个新绑定函数,当绑定函数被调用时,会以bind()...1.bind方法绑定对象,并且返回一个函数 var module = { x: 42, getX: function() { return this.x; } } var unbo...
  • 本文的重点在于讨论bind()方法实现,在开始讨论bind()的实现之前,我们先来看看bind()方法的使用,有需要的小伙伴可以参考下。
  • JavaScript bind() 方法实现

    千次阅读 2018-03-31 11:00:02
    bind() 方法的特点 bind() 方法会创建一个新函数。 当这个新函数被调用时,bind() 的第一个参数将作为它运行时的 this, 可以把除了第一个参数以外的其他参数都传递给下层的函数(这种技术称为“部分应用”,是...
  • 我们先来看一道题目 var write = [removed]; write("hello"); //1....//2....不能正确执行,因为write函数丢掉了上...bind方法 var write = [removed]; write.bind(document)('hello'); call方法 var write = [removed];

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 297,999
精华内容 119,199
关键字:

bind方法实现