9.5、this指向问题

9.5.1、改变函数中this指向

1、call

var name="王五"
var obj = { name:"李四" }
function go(){
  console.log(this.name);
}
go()  // 王五
go.call(obj) // 李四

2、apply

var name="window"
var zhang={
  name:"张三"
}
function show(a,b){
  console.log(this.name);
  console.log(a+b);
}
show(1,2)
show.call(zhang,2,3)
show.apply(zhang,[1,2])

3、bind

bind 绑定的函数不会马上执行，只是改变了函数上下文的执行环境
call，apply调用的时候马上执行

var name = "window"
var zhang = {
  name:"张三"
}
var show = function (a,b){
  console.log(this.name);
  console.log(a+b);
}.bind(zhang)
show(2,3)  // zhang  5

4、call和apply的区别

call，apply的区别：
应用场景：传递多个参数的情况
         call依次去传递
         apply 需要传递数组

9.5.2、使用场景

解决定时器中this的指向问题

<button id="btn">按钮</button>
<script>
  var id="1001";
  var btn = document.getElementById("btn")
  btn.onclick = function(){
    setTimeout(function(){   // window.setTimeout
      console.log(this.id);   // 1001 
    },1000)
  }
</script>

1、用bind解决

btn.onclick = function(){
  setTimeout(function(){   
    console.log(this.id);   
  }.bind(btn),1000)
}
/* btn.onclick = function(){
     var self = this
   setTimeout(function(){   
      console.log(this.id);   
   }.bind(self),1000)
  } 
  btn.onclick = function(){
    setTimeout(function(){   
      console.log(this.id);   
    }.bind(this),1000)
  }

2、使用箭头函数解决

btn.onclick = function(){
  setTimeout(()=>{
    console.log(this.id);
  },1000)
}