bind()函数的用法

2025-12-11 18:21:00

1、创建绑定方法

this.x = 9; var module = {  x: 81,  getX: function() { return this.x; }};module.getX(); // 返回 81var retrieveX = module.getX;retrieveX(); // 返回 9, 在这种情况下,"this"指向全局作用域// 创建一个新函数,将"this"绑定到module对象// 新手可能会被全局的x变量和module里的属性x所迷惑var boundGetX = retrieveX.bind(module);boundGetX(); // 返回 81

2、偏函数


bind()的另一个简单用法就是使一个函数拥有预设的初始参数。这些参数会作为bind()的第二个参数跟在this后面,之后它们会插入到目标函数的参数列表的开始位置,传递给绑定函数的参数会跟在它们后面。

function list() {  return Array.prototype.slice.call(arguments);}var list1 = list(1, 2, 3); // [1, 2, 3]// Create a function with a preset leading argumentvar leadingThirtysevenList = list.bind(undefined, 37);var list2 = leadingThirtysevenList(); // [37]var list3 = leadingThirtysevenList(1, 2, 3); // [37, 1, 2, 3]

3、配合setTimeout


在默认情况下,使用window.setTimeout()时,this关键字会指向window(或全局)对象。当使用类的方法时,需要this引用类的实例,需要显式地把this绑定到回调函数以便继续使用实例。

4、作为构造函数使用的绑定函数


绑定函数适用于用new操作符去构造一个由目标函数创建的新的实例。当一个绑定函数是用来构建一个值的,原来提供的 this 就会被忽略。然而, 原先提供的那些参数仍然会被前置到构造函数调用的前面。

function Point(x, y) {  this.x = x;  this.y = y;}Point.prototype.toString = function() {  return this.x + ',' + this.y; };var p = new Point(1, 2);p.toString(); // '1,2'var emptyObj = {};var YAxisPoint = Point.bind(emptyObj, 0/*x*/);// 以下这行代码在 polyfill 不支持,// 在原生的bind方法运行没问题://(译注:polyfill的bind方法如果加上把bind的第一个参数,即新绑定的this执行Object()来包装为对象,Object(null)则是{},那么也可以支持)var YAxisPoint = Point.bind(null, 0/*x*/);var axisPoint = new YAxisPoint(5);axisPoint.toString(); // '0,5'axisPoint instanceof Point; // trueaxisPoint instanceof YAxisPoint; // truenew Point(17, 42) instanceof YAxisPoint; // true

声明:本网站引用、摘录或转载内容仅供网站访问者交流或参考,不代表本站立场,如存在版权或非法内容,请联系站长删除,联系邮箱:site.kefu@qq.com。
猜你喜欢