Javascript中bind()方法的使用与实现

时间：2021-09-06 15:46:30

对于bind，我愣了下，这个方法常用在jquery中，用于为被选元素添加一个或多个事件处理程序。

查了下手册，发现bind的作用和apply，call类似都是改变函数的execute context，也就是return时this关键字的指向。但是使用方法略有不同。一个函数进行bind后可稍后执行。

var altwrite = document.write;
altwrite("hello");

上面的程序运行，会报错：Uncaught TypeError: Illegal invocation  非法调用

报错的原因就是this指向问题，因为altwrite指向的是windowd对象，而write指向的是document对象

我们可以通过bind()修改altwrite的上下文，把它指向document,就可以了，修改如下:

var altwrite = document.write;
altwrite.bind(document)("hello");

当然也可以使用call()方法：

altwrite.call(document, "hello")

绑定函数

bind()最简单的用法是创建一个函数，使这个函数不论怎么调用都有同样的this值。

将方法从对象中拿出来，然后调用，并且希望this指向原来的对象。如果不做特殊处理，一般会丢失原来的对象。使用bind()方法能够很漂亮的解决这个问题：

;
var mymodule = {
  num: ,
  getNum: function() { return this.num; }
};

module.getNum(); 

var getNum = module.getNum;
getNum(); // 9, 因为在这个例子中，"this"指向全局对象

// 创建一个'this'绑定到module的函数
var boundGetNum = getNum.bind(module);
boundGetNum();

和setTimeout一起使用

一般情况下setTimeout()的this指向window或global对象。当使用类的方法时需要this指向类实例，就可以使用bind()将this绑定到回调函数来管理实例。

function Bloomer() {
  ) + ;
}

// 1秒后调用declare函数
Bloomer.prototype.bloom = function() {
  window.setTimeout();
};

Bloomer.prototype.declare = function() {
  console.log('我有 ' + this.petalCount + ' 朵花瓣!');
};

注意：对于事件处理函数和setInterval方法也可以使用上面的方法

相关文章