11.改变函数内部this的指向

1.函数正常调用的时候this指向window

var name="张三"
function show(){
  console.log(this.name);
}
/* 函数正常调用的时候this指向window */
function go(){
  var name="李四";
  show();
}
go();//window.go()//张三
函数要有对象去调用,事件也是需要对象去执行的

2.改变this的指向的方法

A.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);//window 3
show.call(zhang,2,3);//张三  5
show.apply(zhang,[3,4]);//张三  7

B.bind
bind 和call与apply的区别： 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);//张三  5

3.bind的应用场景

定时器

 <button id="btn">按钮</button>
    <script>
        var id="1001"
        var btn=document.getElementById("btn");
        //第一种
        btn.onclick=function(){
            // console.log(this.id);//btn
            setTimeout(function(){
                console.log(this.id);
            }.bind(btn),1000)//btn
        }
        //第二种
        btn.onclick=function(){
            var self=this;
            setTimeout(function(){
                console.log(this.id);
            }.bind(self),1000)//btn
        }
        //第三种
        btn.onclick=function(){
            // console.log(this.id);//btn
            setTimeout(function(){
                console.log(this.id);
            }.bind(this),1000)//btn
        }
        //箭头函数，解决this关键字的指向问题
        btn.onclick=function(){
            setTimeout(()=>{
                console.log(this.id);
            },1000)
        }
    </script>