JavaScript改变this指向

最新推荐文章于 2023-02-20 15:34:43 发布

烟猫

最新推荐文章于 2023-02-20 15:34:43 发布

阅读量149

点赞数

文章标签： javascript 开发语言

本文链接：https://blog.csdn.net/weixin_49569512/article/details/120901629

版权

这篇博客详细介绍了JavaScript中如何改变函数内部this指向的三种方法：call、apply和bind。call允许立即调用函数并改变this，适用于继承场景；apply与call类似，但参数需为数组；bind则返回一个新的函数，保留改变后的this，但不会立即执行。文中通过实例展示了这三个方法的用法，并在事件处理中应用了bind来保持this的正确性。

摘要由CSDN通过智能技术生成

在js中改变this指向有3个方法

1. call

2. apply

3. bind

1.call方法

// call 第一个可以立即调用函数第二个可以改变函数内的this 指向
// call 的主要作用可以实现继承

        function Father(uname, age, sex) {
            this.uname = uname;
            this.age = age;
            this.sex = sex;
        }

        function Son(uname, age, sex) {
            Father.call(this, uname, age, sex);
        }
        var son = new Son('张三', 18, '男');
        console.log(son);

2. apply方法

//可以立即调用函数，可以改变函数内部的this指向

//第二个参数必须是数组

//可以利用apply借助数学内置对象求最大值
var arr = [1,2,3,4,5,6]
var max = Math.max.apply(Math,arr)

3.bind方法

//不会立即调用函数,可以改变this指向

//返回值:原函数的拷贝

var o {
  name = 'daiv'
}
function fun(){
  console.log(this)
}

//不会调用 返回新方法
var f = fun.bind(o)
f()

bind 使用

如果有的函数不需要去立即掉调用又需要改变函数this指向

var btns = document.querySelectorAll('button');
        for (var i = 0; i < btns.length; i++) {
            btns[i].onclick = function() {
                this.disabled = true;
                setTimeout(function() {
                    this.disabled = false;
                }.bind(this), 2000);
            }
        }