js里面的this指向

逃离我推掉我的手 2023-07-15 02:54 15阅读 0赞

--------------------

# 一、this未更改时候的指向 #

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTk2OTc3Nw_size_16_color_FFFFFF_t_70]

# 二、this更改时的指向 #

## **1、call（）** ##

可参考[https://blog.csdn.net/weixin\_45969777/article/details/104862846][https_blog.csdn.net_weixin_45969777_article_details_104862846]

## 2、apply（） ##

call（）和apply（）类似，**前者传入的参数分开的，后者传入的参数是以数组的形式**

> fuc.apply(thisArg,\[argsArray\])  
> thisArg->函数运行时的this指向  
> argsArray->参数以数组的形式传入

apply（）多用于对数组的一些处理

var arr = [1, 2, 3];
    var max = Math.max(arr);
    console.log(max);			//NaN
    max=Math.max.apply(null,arr);		//严格模式需要改为max=Math.max.apply(Math,arr);
    console.log(max);			//3

![在这里插入图片描述][20200315111335289.png]

## **3、bind（）** ##

**bind（）不会调用该函数，但是会改变this的指向，而且会返回一个原函数改变this指向后的新函数**,这个函数很常用

> fuc.bind(thisArg,arg1,arg2,…)  
> thisArg->改变的this指向  
> arg1,arg2,…->参数

<!DOCTYPE html>
    <html lang="en">
        <head>
            <meta charset="UTF-8">
            <title>Title</title>
            <style>
                *{ 
                    margin: 0;
                    padding: 0;
                }
            </style>
            <script>
                window.addEventListener('DOMContentLoaded',function () { 
                    var btn=document.querySelector('button');
                    btn.addEventListener('click',function () { 
                        this.disabled=true;			//这里的this指向btn
                        setTimeout(function () { 
                            this.disabled=false;
                            console.log(this);		//打印button
                        }.bind(this),			//原来setTimeout（）的this指向window，使用biind（）后，把this指向改为btn
                            2000);
                    });
                })
            </script>
        </head>
        <body>
            <button>ninnnn</button>			
        </body>
    </html>

--------------------

## 点击后结果图： ##

--------------------

![在这里插入图片描述][20200315123644713.png]  
本文只用于个人学习和记录

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTk2OTc3Nw_size_16_color_FFFFFF_t_70]: /images/20230529/35480902b7b74971bc8f770f62b6f014.png
[https_blog.csdn.net_weixin_45969777_article_details_104862846]: https://blog.csdn.net/weixin_45969777/article/details/104862846
[20200315111335289.png]: /images/20230529/f270b73ae84e4b27baca125380a500e9.png
[20200315123644713.png]: /images/20230529/0626eb3eaac04eccb8cbc962502a4f6f.png