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


Posted in Javascript onDecember 02, 2016

前言

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()

总结

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

Javascript 相关文章推荐
js 图片等比例缩放代码
May 13 Javascript
javascript单例模式的简单实现方法
Jul 25 Javascript
轻松学习Javascript闭包函数
Dec 15 Javascript
javascript Promise简单学习使用方法小结
May 17 Javascript
jQuery和CSS仿京东仿淘宝列表导航菜单
Jan 04 Javascript
Vue.js学习示例分享
Feb 05 Javascript
jQuery实现radio第一次点击选中第二次点击取消功能
May 15 jQuery
js学习总结_选项卡封装(实例讲解)
Jul 13 Javascript
详解微信小程序中的页面代码中的模板的封装
Oct 12 Javascript
VueAwesomeSwiper在VUE中的使用以及遇到的一些问题
Jan 11 Javascript
JS数组实现分类统计实例代码
Sep 30 Javascript
JavaScript Window窗口对象属性和使用方法
Jan 19 Javascript
bootstrap模态框消失问题的解决方法
Dec 02 #Javascript
谈谈因Vue.js引发关于getter和setter的思考
Dec 02 #Javascript
jquery获取input type=text中的值的各种方式(总结)
Dec 02 #Javascript
vue.js入门(3)——详解组件通信
Dec 02 #Javascript
javascript实现鼠标点击页面 移动DIV
Dec 02 #Javascript
jquery对所有input type=text的控件赋值实现方法
Dec 02 #Javascript
bootstrap使用validate实现简单校验功能
Dec 02 #Javascript
You might like
十大感人催泪爱情动漫 第一名至今不忍在看第二遍
2020/03/04 日漫
最省空间的计数器
2006/10/09 PHP
收集的二十一个实用便利的PHP函数代码
2010/04/22 PHP
php session安全问题分析
2011/06/24 PHP
PHP实现通过get方式识别用户发送邮件的方法
2015/07/16 PHP
yii2 modal弹窗之ActiveForm ajax表单异步验证
2016/06/13 PHP
php 微信公众平台开发模式实现多客服的实例代码
2016/11/07 PHP
php遍历、读取文件夹中图片并分页显示图片的方法
2016/11/15 PHP
jquery自定义滚动条插件示例分享
2014/02/21 Javascript
onmouseover事件和onmouseout事件全面理解
2016/08/15 Javascript
微信小程序 基础知识css样式media标签
2017/02/15 Javascript
详解如何去除vue项目中的#——History模式
2017/10/13 Javascript
关于JavaScript中高阶函数的魅力详解
2018/09/07 Javascript
浅谈使用nodejs搭建web服务器的过程
2020/07/20 NodeJs
Vue性能优化的方法
2020/07/30 Javascript
在Python中编写数据库模块的教程
2015/04/29 Python
在Python中用get()方法获取字典键值的教程
2015/05/21 Python
Python中强大的命令行库click入门教程
2016/12/26 Python
python+matplotlib实现鼠标移动三角形高亮及索引显示
2018/01/15 Python
使用sklearn进行对数据标准化、归一化以及将数据还原的方法
2018/07/11 Python
python如何发布自已pip项目的方法步骤
2018/10/09 Python
攻击者是如何将PHP Phar包伪装成图像以绕过文件类型检测的(推荐)
2018/10/11 Python
Python实现分段线性插值
2018/12/17 Python
详解Python安装tesserocr遇到的各种问题及解决办法
2019/03/07 Python
Python全栈之列表数据类型详解
2019/10/01 Python
Python插件机制实现详解
2020/05/04 Python
业务主管岗位职责
2013/11/20 职场文书
毕业生求职的求职信
2013/12/05 职场文书
班主任班级寄语大全
2014/04/04 职场文书
中考标语大全
2014/06/05 职场文书
学校总务处领导班子民主生活会对照检查材料思想汇报
2014/09/27 职场文书
中学生清明节演讲稿
2015/03/18 职场文书
2015小学教师德育工作总结
2015/05/12 职场文书
Mysql 性能监控及调优
2021/04/06 MySQL
Mysql 如何查询时间段交集
2021/06/08 MySQL
Nginx 配置 HTTPS的详细过程
2022/05/30 Servers