码迷,mamicode.com
首页 > 编程语言 > 详细

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

时间:2015-11-19 11:20:52      阅读:235      评论:0      收藏:0      [点我收藏+]

标签:

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

查了下手册,发现bind的作用和apply,call类似都是改变函数的execute context,也就是runtime时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()方法能够很漂亮的解决这个问题:

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

module.getNum(); // 81

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

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

 

和setTimeout一起使用

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

function Bloomer() {
  this.petalCount = Math.ceil(Math.random() * 12) + 1;
}

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

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

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

 

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

标签:

原文地址:http://www.cnblogs.com/bq-med/p/4976786.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!