1、this

/* 1、使用箭头函数，可以解决this关键字指向问题 */
        var id = 1001
        var btn = document.getElementById("btn")
        btn.onclick = function(){
            // console.log(this.id);//btn
            setTimeout(()=>{  //如果这里使用的是箭头函数，那么它自身是没有this指向的，就会向外去                                                                找，就找到btn这个事件函数的this
                console.log(this.id);//1001
            },1000)
        }

var id = 1001
var btn = document.getElementById("btn")
var show = ()=>{
        console.log(this.id);//1001
}
btn.onclick = function(){
    /* 在函数内部调用一个普通函数，this指向window */
    go()//1001
    show()//1001
}
function go(){
    console.log(this.id);
}

bind

1、onclick
2、在对象的方法中，谁调用方法，this就指向谁
3、函数直接调用的时候，this指向window
var name = 'window'
var obj = {
    name:'obj',
    sayName:function(){
            console.log(this.name);
    }
}
var show = function(){
        console.log(this.name);
}.bind(obj)
show()//obj
使用bind方法，可以改变函数运行的上下文环境，bind中的参数传入谁，this就指向谁

call、aplly

bind,call,aplly的区别
1、call，apply是调用的时候执行
2、bind仅仅只改变了函数上下文的运行环境，不会马上执行
var name = 'window'
var obj = {
    name:'obj',
    sayName:function(){
            console.log(this.name);
        }
}
function go(){
        console.log(this.name);
}
go()
// call与apply也可以改变函数内部this关键字的指向
go.call(obj)//obj
go.apply(obj)//obj

call和aplly的区别
var name = 'window'
var obj = {
        name:'obj'
}
/* 函数存在多个参数的情况，call按顺序传参，apply必须传数组 */
function go(a,b){
    console.log(this.name);
    console.log(a+b);
}
// go(2,3)
// go.call(obj,2,3)
go.apply(obj,[2,3])