首页 >web前端 >js教程 >关于Function中的bind()示例详解

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

高洛峰
高洛峰原创
2017-01-04 09:59:131124浏览

前言

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对象绑定到retrieveX的this上,问题就解决了,不管它在何处调用,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函数设置初始值,因为不用改变list中this的指向,所以直接传undefined,从第二个参数开始,就是要传入list函数的值,list2和list3的返回值很好的说明了一切。

我自己一般使用的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了,直接把setTimeout的this绑定到外层的this,这肯定是我们想要的!

更多关于Function中的bind()示例详解相关文章请关注PHP中文网!


声明:
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn