精华内容
下载资源
问答
  • bind bind() 方法不会调用函数,但是改变函数内部this指向 thisArg:在函数运行时指定的this值 arg1,arg2: 传递的参数 返回有指定的 this 值 和初始化参数改变的原函数拷贝 fun.bind(thisArg, arg1, arg2, ...) var...

    bind

    bind() 方法不会调用函数,但是改变函数内部this指向

    thisArg:在函数运行时指定的this值
    arg1,arg2: 传递的参数
    返回有指定的 this 值 和初始化参数改变的原函数拷贝

    fun.bind(thisArg, arg1, arg2, ...)
    
    var obj = {name:"bind"}
    function fun(str){
    	console.log(this,str)
    }
    var f = fun.bind(obj,'params')
    f() // this指向 obj  //{name:"bind"} 'params'
    f('gg')//{name:"bind"} 'params'
    

    bind参数解析

    var obj = {name:"bind"}
    function fun(str){
    	console.log(this,str)
    	console.log(arguments)
    }
    var f = fun.bind(obj,'params')
    f('gg',1,2,3) // 为第二个参数
    

    在这里插入图片描述

    用处

    用于 有的函数不需要立即调用,但是又想改变这个函数的this指向
    有一个按钮,当点击之后禁用,3s之后开启这个按钮

    var btn = document.querySelector("button")
    btn.onclick = function(){
    	this.disabled = true
    	// this 是指向 btn
    	setTimeout(function(){
    		// this 是指向window  bind后 this 指向btn
    		this.disabled = false
    	}.bind(this),3000)
    }
    
    展开全文
  • JavaScript:从右边绑定参数。 安装 npm install bind-right 用法 require ( 'bind-right' ) ; // extends the function prototype function createArray ( /* items */ ) { return [ ] . concat ( arguments ) ;...
  • JS使用bind绑定参数表的详细介绍

    千次阅读 2019-04-10 17:27:49
    bind方法还有一个重要的功能:绑定参数表,如下所示 var person = { name = 'zwy', says:function(act,obj){ console.log(this.name+''+act+''+obj); } }; person.says('loves','cry');//zwy loves cry ...

    bind方法还有一个重要的功能:绑定参数表,如下所示

    var person = {
    	name = 'zwy',
    	says:function(act,obj){
    	console.log(this.name+''+act+''+obj);
    }
    };
    
    person.says('loves','cry');//zwy loves cry
    byvoidLoves = person.says.bind(person,'loves');
    byvoidLoves('you');//输出 zwy loves you
    

    可以看到,byvoidLoves将this指针绑定到了person,并将第一个参数绑定到loves,之后在调用byvoidLoves的时候,只传入第三个参数。这个特性可以用于创建一个函数的“捷径”,之后我们可以通过这个捷径,多处调用时省略重复输入相同的参数

    要强调的是bind底层是call实现的

    展开全文
  • JavaScript深入之bind的模拟实现JavaScript深入系列第十一篇,通过bind函数的模拟实现,带大家真正了解bind的特性bind一句话介绍 bind:bind() 方法会创建一个新函数。当这个新函数被调用时,bind() 的第一个参数将...

    9640f599317dce0ce8a1b5198a59eef6.gif   戳蓝字「前端技术优选」关注我们哦!

    JavaScript深入之bind的模拟实现

    JavaScript深入系列第十一篇,通过bind函数的模拟实现,带大家真正了解bind的特性

    bind

    一句话介绍 bind:

    bind() 方法会创建一个新函数。当这个新函数被调用时,bind() 的第一个参数将作为它运行时的 this,之后的一序列参数将会在传递的实参前传入作为它的参数。(来自于 MDN )

    由此我们可以首先得出 bind 函数的两个特点:

    1. 返回一个函数

    2. 可以传入参数

    返回函数的模拟实现

    从第一个特点开始,我们举个例子:

    var foo = {

    关于指定 this 的指向,我们可以使用 call 或者 apply 实现,关于 call 和 apply 的模拟实现,可以查看《JavaScript深入之call和apply的模拟实现》。我们来写第一版的代码:

    // 第一版

    此外,之所以 return self.apply(context),是考虑到绑定函数可能是有返回值的,依然是这个例子:

    var foo = {

    传参的模拟实现

    接下来看第二点,可以传入参数。这个就有点让人费解了,我在 bind 的时候,是否可以传参呢?我在执行 bind 返回的函数的时候,可不可以传参呢?让我们看个例子:

    var foo = {

    函数需要传 name 和 age 两个参数,竟然还可以在 bind 的时候,只传一个 name,在执行返回的函数的时候,再传另一个参数 age!

    这可咋办?不急,我们用 arguments 进行处理:

    // 第二版

    构造函数效果的模拟实现

    完成了这两点,最难的部分到啦!因为 bind 还有一个特点,就是

    一个绑定函数也能使用new操作符创建对象:这种行为就像把原函数当成构造器。提供的 this 值被忽略,同时调用时的参数被提供给模拟函数。

    也就是说当 bind 返回的函数作为构造函数的时候,bind 时指定的 this 值会失效,但传入的参数依然生效。举个例子:

    var value = 

    注意:尽管在全局和 foo 中都声明了 value 值,最后依然返回了 undefind,说明绑定的 this 失效了,如果大家了解 new 的模拟实现,就会知道这个时候的 this 已经指向了 obj。

    (哈哈,我这是为我的下一篇文章《JavaScript深入系列之new的模拟实现》打广告)。

    所以我们可以通过修改返回的函数的原型来实现,让我们写一下:

    // 第三版

    如果对原型链稍有困惑,可以查看《JavaScript深入之从原型到原型链》。

    构造函数效果的优化实现

    但是在这个写法中,我们直接将 fBound.prototype = this.prototype,我们直接修改 fBound.prototype 的时候,也会直接修改绑定函数的 prototype。这个时候,我们可以通过一个空函数来进行中转:

    // 第四版

    到此为止,大的问题都已经解决,给自己一个赞!o( ̄▽ ̄)d

    三个小问题

    接下来处理些小问题:

    1.apply 这段代码跟 MDN 上的稍有不同

    在 MDN 中文版讲 bind 的模拟实现时,apply 这里的代码是:

    this 

    多了一个关于 context 是否存在的判断,然而这个是错误的!

    举个例子:

    var value = 

    以上代码正常情况下会打印 2,如果换成了 context || this,这段代码就会打印 1!

    所以这里不应该进行 context 的判断,大家查看 MDN 同样内容的英文版,就不存在这个判断!

    2.调用 bind 的不是函数咋办?

    不行,我们要报错!

    if (

    3.我要在线上用

    那别忘了做个兼容:

    Function.prototype.bind = 

    当然最好是用 es5-shim 啦。

    最终代码

    所以最最后的代码就是:

    Function.prototype.bind2 = 

    3be407fdaf3ec1d926a11daa17ff8db8.png

    展开全文
  • 阅读本文约需要5分钟大家好,我是你们的导师,我每天都会给大家分享一些干货内容(当然了,周末也要允许老师休息一下哈)。...当这个新函数被调用时,bind() 的第一个参数将作为它运行时的 this,之后的一序列参数...
    72a40760693d3f0807b166485f433725.gif

    阅读本文约需要5分钟

    大家好,我是你们的导师,我每天都会给大家分享一些干货内容(当然了,周末也要允许老师休息一下哈)。昨天给大家分享了JavaScript的call和apply的模拟实现,今天给大家分享一下bind的模拟实现。

    什么是bind?

    一句话介绍 bind:bind() 方法会创建一个新函数。当这个新函数被调用时,bind() 的第一个参数将作为它运行时的 this,之后的一序列参数将会在传递的实参前传入作为它的参数。(来自于 MDN )。

    由此我们可以首先得出 bind 函数的两个特点:返回一个函数、可以传入参数。

    返回函数的模拟实现

    从第一个特点开始,我们举个例子:

    69fcad5757903f93a9b9f1ac5950556e.png

    关于指定 this 的指向,我们可以使用 call 或者 apply 实现,关于 call 和 apply 的模拟实现,可以看看我昨天分享的文章:JavaScript之call和apply的模拟实现。我们来写第一版的代码:

    ea107d249c058df0c2fb1d68f69e9da5.png

    此外,之所以 return self.apply(context),是考虑到绑定函数可能是有返回值的,依然是这个例子:

    f5e135609cca2f0fe92f7667884d2a98.png

    传参的模拟实现

    接下来看第二点,可以传入参数。这个就有点让人费解了,我在 bind 的时候,是否可以传参呢?我在执行 bind 返回的函数的时候,可不可以传参呢?让我们看个例子:

    6735267c9dd05d6e3238500496d4e6b5.png

    函数需要传 name 和 age 两个参数,竟然还可以在 bind 的时候,只传一个 name,在执行返回的函数的时候,再传另一个参数 age!这可咋办?不急,我们用 arguments 进行处理:

    33b9a9169a7bb6697aad87a25d93d28e.png

    构造函数效果的模拟实现

    完成了这两点,最难的部分到了!因为 bind 还有一个特点,就是:一个绑定函数也能使用new操作符创建对象:这种行为就像把原函数当成构造器。提供的 this 值被忽略,同时调用时的参数被提供给模拟函数。

    也就是说当 bind 返回的函数作为构造函数的时候,bind 时指定的 this 值会失效,但传入的参数依然生效。举个例子:

    3c3441d2b8f74d1f0c5e7a33eda21f12.png

    注意:尽管在全局和 foo 中都声明了 value 值,最后依然返回了 undefind,说明绑定的 this 失效了,如果大家了解 new 的模拟实现,就会知道这个时候的 this 已经指向了 obj。

    所以我们可以通过修改返回的函数的原型来实现,让我们写一下:

    b2285b6ef516c356da7d4d663b80d8e4.png

    构造函数效果的优化实现

    但是在这个写法中,我们直接将 fBound.prototype = this.prototype,我们直接修改 fBound.prototype 的时候,也会直接修改绑定函数的 prototype。这个时候,我们可以通过一个空函数来进行中转:

    31d3e15daf9c727db6c8d4649f883242.png

    到此为止,大的问题都已经解决。

    三个小问题

    1.apply 这段代码跟 MDN 上的稍有不同

    在 MDN 中文版讲 bind 的模拟实现时,apply 这里的代码是:

    self.apply(this instanceof self ? this : context || this, args.concat(bindArgs))

    多了一个关于 context 是否存在的判断,然而这个是错误的!举个例子:

    98944d3787d7000ec184beb35f759f23.png

    以上代码正常情况下会打印 2,如果换成了 context || this,这段代码就会打印 1!所以这里不应该进行 context 的判断,大家查看 MDN 同样内容的英文版,就不存在这个判断!

    2.调用 bind 的不是函数咋办?

    不行,我们要报错!

    43c62f6b737103b44319b84c09a5d8f6.png

    3.我要在线上用

    那别忘了做个兼容:

    f80a38e5cf7498d6771faed2646cfc83.png

    最终代码

    所以最最后的代码就是:

    c98ff4118817d6822a3fafcdf17f4062.png

    今天就分享到这,如果觉得对你有一丢丢帮助,请点右下角【在看】,让更多人看到该文章。大家也可以在底部给我留言,对于有价值的留言,我们都会一一回复的。

    25a1b8907a2a05196a3920380c9737ff.gif

    0b7a5f91df2c44fc7e220e18c60e574b.png

    展开全文
  • bind绑定参数

    2016-12-30 09:24:00
    const curry = (fn) =>...fn.bind(null,...args); const split = curry((splitOn, str) =>str.split(splitOn)); console.log(split(" ")("Hello JS")); // ["Hello","JS"] 这个函数初看一头雾水,spl...
  • 首先来理解下bind的概念:bind()方法,用来创建一个函数的实例=(新函数),其新函数的this值会被绑定到给定bind()的第一个参数。 注意理解这个实例,将会是你理解bind的关键。你可以理解为新函数,也就是bind之后...
  • 用jquey bind 点击事件时,传参不注意可能会导致点击每一行都是显示相同内容的情况,这大多数是因为传参没注意引起的问题。...+ i).bind("click", {'bindText':bindText + i}, function(e){
  • <view data-alpha-beta="1" data-alphaBeta="2" bindtap="bindViewTap"> DataSet Test </view> Page({ bindViewTap(event) { event.currentTarget.dataset.alphaBeta === 1 // - 会转为驼峰写法 ...
  • 下面,小千就给大家分享JavaScript 中 call、apply、bind 用法和区别。JavaScript 中有三个方法Function.prototype.call()、Function.prototype.apply()和Function.prototype.bind()可以用来指定函数 this 值。c...
  • js代码-apply/call/bind的例子(带参数
  • v-bind动态参数

    2021-07-04 19:29:43
    业务逻辑: export default { name: "App", data() { return { attributeName: "href", linkUrl: "http://39.104.51.155:5000/", };...a v-bind:[attributeName]="linkUrl"> 这是一个地址 </a> 或者
  • bind的基本使用 bind是用来做什么的? 基本用法 bind用来改变this指向,利用bind会返回一个新的函数 – >... bind里面的参数,就是函数执行时的this指向。 <script> var abc = 123; function test () { ...
  • js代码-apply/call/bind的例子(不带参数
  • 主要介绍了JS中使用apply、bind实现为函数或者类传入动态个数的参数的相关资料,需要的朋友可以参考下
  • fn.bind(context[, arg1[, arg2[, ...]]])第一个参数context将成为返回的新函数的this对象 第二个及以后的参数加上绑定函数运行时本身的参数按照顺序,将作为新函数的擦书 实现原理 Function.prototype.bind = ...
  • js bind方法

    2018-09-25 18:11:38
    // bind方法是复制的意思,参数可以在复制的时候进去,也可以在复制之后调用的时候传入进去 // apply和call是调用的时候改变this指向 // bind方法,是复制一份的时候,改变了this的指向 this.na...
  • js bind

    2014-12-09 10:39:00
    Function.prototype.bind()方法 bind() 方法的主要作用就是...例如,在 f() 函数上调用 bind() 方法并传入参数 obj ,即 f.bind(obj) ,这将返回一个新函数, 新函数会把原始的函数 f() 当做 obj 的方法来调用,就像...
  • 原生JS实现bind

    2019-10-12 15:02:08
    JavaScript中有很多改变this指向的方法,如call、apply,本文说的bind也是方法之一,与前两者不同的是,前两者改变this指向的时候会立即执行,而bind不会。 bind是函数原型Function.prototype上的一个方法,作用是...
  • javascript bind函数

    2019-10-26 15:50:40
    bind() 方法会创建一个新函数,当这个新函数被调用时,它的 this 值是传递给 bind() 的第一个参数, 它的参数bind() 的其他参数和其原本的参数。 语法是这样样子的: fun.bind(thisArg[, arg1, arg2...]) ...
  • JavaScript-bind

    2021-03-31 22:04:57
    bind() 方法创建一个新的函数,在 bind() 被调用时,这个新函数的 this 被指定为 bind() 的第一个参数,而其余参数将作为新函数的参数,供调用时使用。(MDN) 特点: 返回一个新函数 可传入参数 简言之,bind是...
  • 当新建函数中参数带有分割符时,可使用bind绑定函数,并将数据传入函数,函数内使用event.data接受。 var str="1,2,3,4,5"; var arr=str.split(","); var newButton = $(...
  • js手写bind

    千次阅读 2018-10-18 02:44:45
    前端面试题之JS手写bind 首先解释一下bindbind() 方法会创建一个新函数。当这个新函数被调用时,bind() 的第一个参数将作为它运行时的 this,之后的一序列参数将会在传递的实参前传入作为它的参数。(来自于 MDN ...
  • [Ctrl+A 全选 注:如需引入外部Js需刷新才能执行]基于不扩展原生对象的原则,弄了这个bind函数(dom为作用域),用法与Prototype框架的bind差不多。 代码如下: dom.bind = function(fn,context){ //第二个参数如果...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 107,424
精华内容 42,969
关键字:

bindjs传参数