改变this指向

箭头函数

箭头函数的this指向和调用无关，它定义时的环境已经决定了它的指向，后面不能被改变,使用call,apply,bind都不能使其改变，箭头函数本身没有this，只不过拿外层的this来用 

<script>
        const f=()=>{
            console.log(this); 
        }
        f() //指向Window
        f.call(222) //指向Window
        f.apply("yy") //指向Window
</script>

普通函数

普通函数的this指向可以通过call,apply,bind去改变，this的指向可以改成任意的东西，比如：Window，字符串，对象,日期，数字等等

需要注意的是，call和apply会自动执行参数，而bind需要添加一个(),才会去执行这个函数

<script>
        function ff(){
            console.log(this);
        }
        ff() //指向Window
        ff.call('nihao') //指向'nihao'

        let obj2={
            name:'she'
        }
        
        ff.call(obj2) //指向obj2
        ff.apply(new Date()) //指向日期
        ff.bind(666)() //指向数字666

        let obj1={
            name:'Jay',
            fn:function(age,sex){
                console.log(this.name+`今年${age}岁，性别${sex}`);
            }
        }
        // 当传的参数不止this的指向这一个时，call和apply在传参形式上不一样，
        // apply需要用[]包裹,bind的传参形式和call一样
        obj1.fn.call(obj2,18,'女') //因为改变了fn的this指向，指向obj2，下面同理，所以此时输出：she今年18岁，性别女
        obj1.fn.apply(obj2,[24,'女']) // she今年24岁，性别女
        obj1.fn.bind(obj2,33,'男')() // she今年33岁，性别男

</script>

当传的参数不止this的指向这一个时，call和apply在传参形式上不一样，apply需要用[]包裹,bind的传参形式和call一样，不需要用[]

<script>
        let obj1={
            name:'Jay',
            fn:function(age,sex){
                console.log(this.name+`今年${age}岁，性别${sex}`);
            }
        }

        let obj2={
            name:'she'
        }
        
        obj1.fn.call(obj2,18,'女') //因为改变了fn的this指向，指向obj2，下面同理，所以此时输出：she今年18岁，性别女
        obj1.fn.apply(obj2,[24,'女']) // she今年24岁，性别女
        obj1.fn.bind(obj2,33,'男')() // she今年33岁，性别男

</script>

如果本文对你有帮助，希望能得到你的点赞或收藏或关注，这是对我最好的鼓励；

如你有问题或疑惑，欢迎在评论区写下，必将努力解答；

如本文有误区，希望你不吝赐教，让我们共勉！