js里面的this指向


一、this未更改时候的指向

***在这里插入图片描述
**

二、this更改时的指向

**

1、call()

**
可参考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			

在这里插入图片描述

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>

点击后结果图:


在这里插入图片描述

发布了24 篇原创文章 · 获赞 0 · 访问量 252

猜你喜欢

转载自blog.csdn.net/weixin_45969777/article/details/104874848