改变this指向的方法

当前例子说明：页面只有一个ul,点击第一个li 就打印li本身

<ul>
     <li>1</li>
     <li>2</li>
     <li>3</li>
</ul>

1.将this保存在一个变量中

window.onload=function(){
    var li=document.querySelectorAll('li')
    li[0].onclick=function(){
    	var that=this
        setTimeout(function(){
            console.log(that);
        },0)
    }
}

2.利用箭头函数

window.onload=function(){
    var li=document.querySelectorAll('li')
    li[0].onclick=function(){
        setTimeout(()=>{
            console.log(this);
        },0)
    }
}

3.调用bind方法

//bind方法 不会自动调用函数（需要手动调用）, 从第二个参数起 是代表函数本来的实参
window.onload=function(){
    var li=document.querySelectorAll('li')
    li[0].onclick=function(){
    	var that=this
        setTimeout(function(){
            console.log(that);
        }.bind(this),0)
    }
}

当用到定时器时，使用箭头函数和bind方法比较方便

4.调用call方法

//call方法 会自动调用函数, 从第二个参数起 是代表函数本来的实参
window.onload=function(){
    var li=document.querySelectorAll('li')
    function clickmy(){
        console.log(this);
    }
    li[0].onclick=function(){
        clickmy.call(this)
    }
}

5.调用apply方法

//apply方法 会自动调用函数, 从第二个参数起 是代表函数本来的实参,与call的区别是参数传递的是一个数组
window.onload=function(){
    var li=document.querySelectorAll('li')
    function clickmy(){
        console.log(this);
    }
    li[0].onclick=function(){
        clickmy.apply(this)
    }
}