js中的this指向和如何去改变this指向：call、apply、bind

陌一一

已于 2022-11-06 12:34:47 修改

阅读量341

点赞数 1

分类专栏： web前端开发文章标签： javascript 前端开发语言 html

于 2022-10-27 22:13:20 首次发布

本文链接：https://blog.csdn.net/a1598452168YY/article/details/127555568

版权

web前端开发专栏收录该内容

281 篇文章 15 订阅

订阅专栏

1、this指向

● this是js的一个关键字，每一个函数内部都有一个关键字是this；

● 重点：函数内部的this只和函数的调用方式有关系，和函数的定义没有关系

● this：谁调用我，this就指向谁（除了es6箭头函数）

●this在函数中的使用：this => window

  <script>
        function fn (){
            console.log(this)
        }
        fn()
  </script>

结果：window

● this在对象中的使用：this => 调用者

  <script>
        var obj = {
            name:"yiyi",
            test:function(){
                console.log("111",this.name)
            }
        }
        obj.test()
  </script>

结果：111 yiyi

解释说明：this就是谁调用我，我就指向谁。现在图中this在test这个键里，然后是obj调用了这个函数，所以就是obj调用了this，所以这个this指向的就是对象obj，所以this.name就相当于obj.name；

● this在setTimeOut倒计时定时器和setInterval间隔定时器的运用：this => window

在定时器中function函数是window自动调用的，所以this指向的就是window

  <script>
        setTimeout(function(){
            console.log(11111,this)
        },2000)
        setInterval(function(){
            console.log(22222,this)
        },2000)
  </script>

结果：

● 事件绑定中的this：this => 事件源

<body>
    <div id="box"></div>
    <script>
        box.onclick = function(){
            console.log(this)
        }
    </script>
</body>

结果：

解释说明：这个this指的就是div标签；

2、改变this指向

● 改变this指向有三种方法：call、apply、bind

● 首先这两个对象的this指向的都在自己，

  <script>
        var obj1 = {
            name:"obj1",
            getName : function(){
                console.log("getName:",this.name)
            }
        }
        var obj2 = {
            name:"obj2",
            getName : function(){
                console.log("getName:",this.name)
            }
        }
        obj1.getName()
        obj2.getName()
  </script>

结果：

● call改变this指向

  <script>
        var obj1 = {
            name:"obj1",
            getName : function(){
                console.log("getName:",this.name)
            }
        }
        var obj2 = {
            name:"obj2",
            getName : function(){
                console.log("getName:",this.name)
            }
        }
        // obj1.getName()
        // obj2.getName()
        obj1.getName.call(obj2)
  </script>

结果：

解释说明：结果是obj2，call的作用就是将obj1的this指向更改指向obj2

● 上述代码obj1.getName.call(obj2)直接getName.call（）了，这个getName后面并没有括号，所以并没有执行代码，所以call的功能是执行函数，并改变this指向为函数的第一个参数；

● apply和call的功能是一样的，都是执行函数，并改变this指向为函数的第一个参数；

● apply和call的区别是，call支持多个参数，apply只有两个参数，第一个参数是this要指向的对象，第二个参数是一个数组，而且当call有多个参数时，这个参数就成为了实参，函数里面就要传对应数量的形参，apply也一样。看下面代码演示：

  <script>
        var obj1 = {
            name:"obj1",
            getName : function(a,b,c){
                console.log("getName:",this.name)
                console.log("参数:",a,b,c)
            }
        }
        var obj2 = {
            name:"obj2",
            getName : function(){
                console.log("getName:",this.name)
            }
        }
        obj1.getName.call(obj2,1,2,3)
        obj1.getName.apply(obj2,[1,2,3])
  </script>

结果：

call：

apply：

● bind改变this指向为函数的第一个参数，不会自动执行函数，但是会返回一个函数，支持多个参数和call一样

  <script>
        var obj1 = {
            name:"obj1",
            getName : function(a,b,c){
                console.log("getName:",this.name)
                console.log("参数:",a,b,c)
            }
        }
        var obj2 = {
            name:"obj2",
            getName : function(){
                console.log("getName:",this.name)
            }
        }
        var fun1 = obj1.getName.bind(obj2,1,2,3)
        console.log(fun1)
        fun1()//收到执行
  </script>

结果：