当前位置：首页 > 资讯 > 技术文档

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

时间：2020-03-21 09:08 编辑：来源：阅读：
扫一扫，手机访问

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

[b]前言[/b] bind()接受无数个参数，第一个参数是它生成的新函数的this指向，比如我传个window，不管它在何处调用，这个新函数中的this就指向window，这个新函数的参数就是[code]bind()[/code]的第二个、第三个、第四个....第n个参数加上它原本的参数。（行吧，我自己都蒙圈了） [b]示例介绍[/b] 我们还是看看栗子比较好理解，举个[code]bind()[/code]最基本的使用方法：

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，我们把[code]module[/code]对象绑定到[code]retrieveX[/code]的[code]this[/code]上，问题就解决了，不管它在何处调用，[code]this[/code]都是指向[code]module[/code]对象。还有[code]bind()[/code]的其他参数，相信第一次接触[code]bind()[/code]的朋友看到上面的定义都会蒙圈。还是举个栗子：

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函数很简单，把传入的每个参数插入到一个数组里，我们用[code]bind()[/code]给[code]list[/code]函数设置初始值，因为不用改变[code]list[/code]中[code]this[/code]的指向，所以直接传[code]undefined[/code]，从第二个参数开始，就是要传入[code]list[/code]函数的值，[code]list2[/code]和[code]list3[/code]的返回值很好的说明了一切。我自己一般使用的[code]bind()[/code]的场景是配合[code]setTimeout[/code]函数，因为在执行[code]setTimeout[/code]时，[code]this[/code]会默认指向window对象，在使用[code]bind()[/code]之前，我是这么做的：

 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缓存[code]this[/code]的指针，这样不论怎么调用，[code]that[/code]都是指向 Coder的实例，但是多定义一个变量总是让人不太舒服。使用[code]bind()[/code]就简单多了：

 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了，直接把[code]setTimeout[/code]的[code]this[/code]绑定到外层的[code]this[/code]，这肯定是我们想要的！最后附上参考地址： [url=https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Function/bind]Function.prototype.bind()[/url] [b]总结[/b] 以上就是这篇文章的全部内容了，希望本文的内容对大家的学习或者工作能带来一定的帮助，如果有疑问大家可以留言交流，谢谢大家对编程素材网的支持。

全部评论(0)

上一篇：Iframe 自动适应页面的高度示例代码
下一篇：用JavaScript对JSON进行模式匹配(Part 1-设计)

资讯排行榜
更多>>