关于Function中的bind()示例详解

 更新时间:2016年12月02日 09:23:59   投稿:daisy  
其实所谓bind顾名思义就是绑定。bind()方法会创建一个新函数,当这个新函数被调用时,它的this值是传递给bind()的第一个参数,它的参数是bind()的其他参数和其原本的参数。这么说可能很多人都糊涂了,下面通过这篇文章的示例来给大家详细的介绍下吧。

前言

bind()接受无数个参数,第一个参数是它生成的新函数的this指向,比如我传个window,不管它在何处调用,这个新函数中的this就指向window,这个新函数的参数就是bind()的第二个、第三个、第四个....第n个参数加上它原本的参数。(行吧,我自己都蒙圈了)

示例介绍

我们还是看看栗子比较好理解,举个bind()最基本的使用方法:

this.x = 9; 
var module = {
 x: 81,
 getX: function() { return this.x; }
};

module.getX(); // 返回 81

var retrieveX = module.getX;
retrieveX(); // 返回 9, 在这种情况下,"this"指向全局作用域

// 创建一个新函数,将"this"绑定到module对象
// 新手可能会被全局的x变量和module里的属性x所迷惑
var boundGetX = retrieveX.bind(module);
boundGetX(); // 返回 81

这里很明显,我们在window对象下调用retrieveX,得到的结果肯定是window下的x,我们把module对象绑定到retrieveXthis上,问题就解决了,不管它在何处调用,this都是指向module对象。

还有bind()的其他参数,相信第一次接触bind()的朋友看到上面的定义都会蒙圈。

还是举个栗子:

function list() {
 return Array.prototype.slice.call(arguments);
}

var list1 = list(1, 2, 3); // [1, 2, 3]

// 创建一个拥有预设初始参数的函数
var leadingThirtysevenList = list.bind(undefined,[69,37],{a:2});

var list2 = leadingThirtysevenList(); // [[69,37],{a:2}]
var list3 = leadingThirtysevenList(1, 2, 3); // [[69,37],{a:2}, 1, 2, 3]

list函数很简单,把传入的每个参数插入到一个数组里,我们用bind()list函数设置初始值,因为不用改变listthis的指向,所以直接传undefined,从第二个参数开始,就是要传入list函数的值,list2list3的返回值很好的说明了一切。

我自己一般使用的bind()的场景是配合setTimeout函数,因为在执行setTimeout时,this会默认指向window对象,在使用bind()之前,我是这么做的:

 function Coder(name) {
  var that = this;
  that.name = name;
  that.getName = function() {
   console.log(that.name)
  };
  that.delayGetName = function() {
   setTimeout(that.getName,1000)
  };
 }
 var me = new Coder('Jins')
 me.delayGetName()//延迟一秒输出Jins

在函数内顶层定义一个that缓存this的指针,这样不论怎么调用,that都是指向 Coder的实例,但是多定义一个变量总是让人不太舒服。

使用bind()就简单多了:

 function Coder(name) {
  this.name = name;
  this.getName = function() {
   console.log(this.name)
  };
  this.delayGetName = function() {
   setTimeout(this.getName.bind(this),1000)
  };
 }
 var me = new Coder('Jins')
 me.delayGetName()//延迟一秒输出Jins

这样就OK了,直接把setTimeoutthis绑定到外层的this,这肯定是我们想要的!

最后附上参考地址:

Function.prototype.bind()

总结

以上就是这篇文章的全部内容了,希望本文的内容对大家的学习或者工作能带来一定的帮助,如果有疑问大家可以留言交流,谢谢大家对脚本之家的支持。

相关文章

  • 微信小程序事件 bindtap bindinput代码实例

    微信小程序事件 bindtap bindinput代码实例

    这篇文章主要介绍了微信小程序事件 bindtap bindinput代码实例,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下
    2019-08-08
  • JS从一组数据中找到指定的单条数据的方法

    JS从一组数据中找到指定的单条数据的方法

    这篇文章给大家介绍基于js如何从一组数据中找到指定的单条数据,非常实用,实现方案也很简单,需要的朋友可以参考下
    2016-06-06
  • 浅谈Javascript线程及定时机制

    浅谈Javascript线程及定时机制

    这篇文章主要介绍了浅谈Javascript线程及定时机制的相关资料,需要的朋友可以参考下
    2015-07-07
  • Bootstrap中CSS的使用方法

    Bootstrap中CSS的使用方法

    这篇文章主要为大家详细介绍了Bootstrap中CSS的使用方法,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2016-02-02
  • 微信内置浏览器图片查看器的代码实例

    微信内置浏览器图片查看器的代码实例

    这篇文章主要介绍了微信内置浏览器图片查看器的代码实例,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下
    2019-10-10
  • 详解Next.js页面渲染的优化方案

    详解Next.js页面渲染的优化方案

    这篇文章主要介绍了详解Next.js页面渲染的优化方案,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2019-01-01
  • 7个令人惊讶的JavaScript特性详解

    7个令人惊讶的JavaScript特性详解

    在学习ES6的过程中我碰到了几个特性,它们让我惊讶,其中大部分是关于 ES6 的特性但也有一部分是 ES3 特性,这些特性我以前从未用过,而现在我将开始使用它们,感兴趣的小伙伴可以跟着小编一起来学习
    2023-05-05
  • JavaScript如何检测并处理页面卡顿

    JavaScript如何检测并处理页面卡顿

    页面卡顿通常指的是网页的响应速度慢,用户的操作不能及时得到反馈,本文将为大家介绍如何使用JavaScript实现检测与处理页面卡顿,需要的可以了解下
    2025-03-03
  • 前端排查内存泄漏的方法及实战案例

    前端排查内存泄漏的方法及实战案例

    内存泄漏是指在程序运行时,分配的内存没有被正确释放,导致内存空间的浪费,最终可能会导致程序崩溃或运行缓慢,这篇文章主要介绍了前端排查内存泄漏的相关资料,需要的朋友可以参考下
    2025-03-03
  • JavaScript fetch接口案例解析

    JavaScript fetch接口案例解析

    本文通过案例给大家介绍了JavaScript fetch接口,非常不错,具有一定的参考借鉴价值,需要的朋友可以参考下
    2018-08-08

最新评论