js箭头函数=>,解决this指向问题

2016-12-26    分类: JavaScript笔记,前端资源

在js看到=>,如果没接触过Php或者类似的语言,估计会懵逼。

这个是es6的语法特性,主要是明确了this指向问题。直接来一个例子方便理解:

$('#bt1').click(function () {
 console.log($(this));   //这里的this,是#bt1本身,这个我们不难理解 
});

 

$('#bt1').click(function () {
 setTimeout(function () {
   console.log($(this));  //这里的this,指向的是window。不是我们预期想要的结果
 },100)
});

 

重点来了

$('#bt1').click(function () {
 setTimeout(()=>{
   console.log($(this))  //这里的this,又重新指向了#bt1本身
 },100)
});

除了用箭头函数的方法还有两个方法可以实现

$('#bt1').click(function () {
 setTimeout(function () {
    console.log($(this));
 }.bind(this),100)
});

 

用jquery里面提供的方法$.proxy

$('#bt1').click(function () {
 setTimeout($.proxy(function () {
   console.log($(this));
 },this),100)
});