8.函数内部this指向

1-1 函数中this指向

函数正常调用的时候this指向:  window
定时器： window
构造函数：实例化对象

var name = "张三"
function show(){
  console.log(this.name);
}
function go(){
  var name = "李四"
  show()
}
go()  // "张三"  // window.go()
function go(){
  var name = "李四"
  console.log(this.name);  // window.name
}
go()  // "张三"  window.go()

1-2 改变函数中this指向

1-2-1 call

语法： funName.call(obj,arg1,arg2...)
对象的方法中，谁执行方法this就指向谁

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

1-2-2 apply

语法：funName.call(obj,[arg1,arg2...])

call，apply的区别：
应用场景：传递多个参数的情况
         call依次去传递
         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])

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

解决定时器中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)
}