解决回调函数中this的指向问题

最新推荐文章于 2023-07-24 14:04:40 发布

缘如风

最新推荐文章于 2023-07-24 14:04:40 发布

阅读量1.5k

点赞数

分类专栏： Web

本文链接：https://blog.csdn.net/chyuanrufeng/article/details/107681724

版权

Web 专栏收录该内容

20 篇文章 3 订阅

订阅专栏

this指向的三种情况

1. obj.fun() fun 中的 this->obj ，自动指向.前的对象
2. new Fun() Fun 中的 this->正在创建的新对象，new 改变了函数内部的 this 指向，导致 this 指向实例化 new 的对象
3. fun() 和匿名函数自调 this 默认->window，函数内部的 this，this 默认是指向 window 的

在回调函数中的this可能不是你想要的对象，这时候就要需要绑定。可以利用 bind、 call、 apply 可以实现，也可以用ES6的箭头函数解决（箭头函数内的this自动指向了回调函数外层的 this）

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>解决回调函数中this的指向问题</title>
<body>
</body>

    <script>

        // bind call apply 都可以实现
        //也可以用ES6的箭头函数解决
        function ObjTest()
        {
            this.say = function()
            {
                console.log("say hello")
            }

            setTimeout(function(){
                console.log("this is ObjTest :",this);
            }.apply(this),2000)

            setTimeout(function(){
                console.log("this is window : ",this);
            },2000)

            //利用箭头函数实现
            setTimeout( () =>{
                console.log("this is ObjTest(箭头函数)  : ",this);
            },2000)

            return this;
        }

        let otest = new ObjTest()
        otest.say();

        setTimeout(function(){
            console.log("this is otest :",this);
        }.bind(otest),2000)

        setTimeout(function(){
            console.log("this is window :",this);
        },2000)
		
    </script>
</html>

结果如下：