改变this指向的三种方法及其不同call（）；apply

最新推荐文章于 2024-06-14 15:02:13 发布

旺春儿

最新推荐文章于 2024-06-14 15:02:13 发布

阅读量57

点赞数

分类专栏： JS高阶文章标签： javascript 前端 html

本文链接：https://blog.csdn.net/fengqixuejian/article/details/132612186

版权

JS高阶专栏收录该内容

24 篇文章 0 订阅

订阅专栏

1、call();

参数：call(改变后的this指向目标，参数1，参数2，参数3……)

立即调用函数；以逗号为分隔符传参，改变this指向

call 经常做继承.可以用来检测数据类型：Object.prototype.toString.call(检测数据)

2、apply（）

参数：apply ( 改变后的this指向目标，[参数1，参数2，参数3……] )

立即调用函数；以数组的行书传参，改变this指向

经常跟数组有关系. 比如借助于数学对象实现数组最大值最小值 Math.max.apply(Math, array)

3、bind（）

参数：bind(改变后的this指向目标，参数1，参数2，参数3……)

不会立即调用函数，需要手动调用；以逗号为分隔符传参，改变this指向

不调用函数,但是还想改变this指向. 比如改变定时器内部的this指向

<body>
    <button>5秒之后再次点击</button>
    <button>5秒之后再次点击</button>
    <button>5秒之后再次点击</button>
    <button>5秒之后再次点击</button>
    <button>5秒之后再次点击</button>
    <script>
        var btn = document.querySelectorAll('button');
        for (var i = 0; i < btn.length; i++) {

            btn[i].onclick = function() {
                this.disabled = true;
                var num = 5;
                var timerId = setInterval(function() {
                    num--;
                    if (num <= 0) {
                        this.innerText = '5秒之后再次点击';
                        this.disabled = false;
                        clearInterval(timerId);
                    } else {
                        this.innerText = num + '秒之后再次点击';
                    }
                }.bind(this), 1000)
            }
        }
    </script>
</body>

旺春儿

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
改变this指向的三种方法及其不同call（）；apply

1、call(); 参数：call(改变后的this指向目标，参数1，参数2，参数3……) 立即调用函数；以逗号为分隔符传参，改变this指向 call 经常做继承.可以用来检测数据类型：Object.prototype.toString.call(检测数据)2、apply（）参数：apply ( 改变后的this指向目标，[参数1，参数2，参数3……] )立即调用函数；以数组的行书传参，改变this指向
复制链接

扫一扫