关于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 相关文章推荐
JavaScript使用技巧精萃[代码非常实用]
Nov 21 Javascript
js 对象是否存在判断
Jul 15 Javascript
基于jquery的可多选的下拉列表框
Jul 20 Javascript
JavaScript中圆括号()和方括号[]的特殊用法疑问解答
Aug 06 Javascript
jQuery不兼容input的change事件问题解决过程
Dec 05 Javascript
angularjs学习笔记之三大模块(modal,controller,view)
Sep 26 Javascript
javascript获取系统当前时间的方法
Nov 19 Javascript
angularjs实现文字上下无缝滚动特效代码
Sep 04 Javascript
微信小程序tabbar不显示解决办法
Jun 08 Javascript
JavaScript实现身份证验证代码实例
Aug 26 Javascript
浅谈JavaScript 声明提升
Sep 14 Javascript
js将日期格式转换为YYYY-MM-DD HH:MM:SS
Sep 18 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
php adodb连接带密码access数据库实例,测试成功
2008/05/14 PHP
php一句话cmdshell新型 (非一句话木马)
2009/04/18 PHP
搭建自己的PHP MVC框架详解
2017/08/16 PHP
PHP实现用户登录的案例代码
2018/05/10 PHP
PHP抽象类与接口的区别详解
2019/03/21 PHP
网站导致浏览器崩溃的原因总结(多款浏览器) 推荐
2010/04/15 Javascript
JS代码优化技巧之通俗版(减少js体积)
2011/12/23 Javascript
js实现鼠标滚轮控制图片缩放效果的方法
2015/02/20 Javascript
jQuery获取页面元素绝对与相对位置的方法
2015/06/10 Javascript
js+canvas绘制五角星的方法
2016/01/28 Javascript
Sequelize中用group by进行分组聚合查询
2016/12/12 Javascript
老生常谈jquery中detach()和remove()的区别
2017/03/02 Javascript
ES6学习笔记之Set和Map数据结构详解
2017/04/07 Javascript
vue-resouce设置请求头的三种方法
2017/09/12 Javascript
vuejs数据超出单行显示更多,点击展开剩余数据实例
2019/05/05 Javascript
ajax跨域访问遇到的问题及解决方案
2019/05/23 Javascript
layui实现tab的添加拒绝重复的方法
2019/09/04 Javascript
jquery获取并修改触发事件的DOM元素示例【基于target 属性】
2019/10/10 jQuery
React+EggJs实现断点续传的示例代码
2020/07/07 Javascript
浅谈js数组splice删除某个元素爬坑
2020/10/14 Javascript
[48:53]2014 DOTA2华西杯精英邀请赛 5 25 LGD VS VG第一场
2014/05/26 DOTA
python登录QQ邮箱发信的实现代码
2013/02/10 Python
Python操作Excel之xlsx文件
2017/03/24 Python
Python基于回溯法子集树模板解决最佳作业调度问题示例
2017/09/08 Python
详谈Python高阶函数与函数装饰器(推荐)
2017/09/30 Python
python常用库之NumPy和sklearn入门
2019/07/11 Python
python实现拼接图片
2020/03/23 Python
什么是Python中的顺序表
2020/06/02 Python
利用python中的matplotlib打印混淆矩阵实例
2020/06/16 Python
室内设计专业学生的自我评价分享
2013/11/27 职场文书
个人求职信范文分享
2013/12/13 职场文书
企业文化理念标语
2014/06/10 职场文书
爱护公物标语
2014/06/24 职场文书
团日活动总结怎么写
2014/06/25 职场文书
四风问题查摆剖析材料
2014/10/11 职场文书
Go语言grpc和protobuf
2022/04/13 Golang