改变JS中this的指向

最新推荐文章于 2022-08-08 20:35:58 发布

跳跳的小古风

最新推荐文章于 2022-08-08 20:35:58 发布

阅读量169

点赞数 1

文章标签： javascript es6 html jquery

本文链接：https://blog.csdn.net/weixin_43787651/article/details/108604424

版权

改变this的指向 call apply bind

call

var obj={age:20}
function show(a,b){
console.log(this)
console.log(a,b)
}
show.call(obj,1,2)  //会马上执行这个函数 会改变this指向
                      //第二个参数起 是代表函数本来的实参
                      //{age: 20}
                      //   1 2

var obj={age:20}
function show(a,b,c,d,e,f,g){
function child(){
console.log(this);
console.log(arguments);}
child.call(obj,...arguments)
}
show(1,2,3,4,5,6,7)

apply

apply 与call的区别是参数传递为一个数组

var obj={age:20}
function show(a,b){
console.log(this);
console.log(a,b);
}
show.apply(obj,[1,2])

var obj={age:20}
        function show(a,b,c,d,e,f,g){
            function child(){
                console.log(this);
                console.log(arguments);
            }
            child.apply(obj,arguments)
        }
        show(1,2,3,4,5,6,7)

bind

不会自动调用函数需要再次调用参数的传递跟call一样

var obj={age:20}
        function show(a,b){
            console.log(this);
            console.log(a,b);
        }
        show.bind(obj,1,2)()

实例改变this指向

保存this指向

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

call

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

bind

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

箭头函数

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