call、apply,bind方法之三者的区别

(1):call()方法

1:call.(thisOject, arg1 ,arg2 …)
2:call方法里面的参数都是可选项,第一个参数为对象(就是需要改变this的指向那个对象),后面的参数为任意类型
3:作用:
作用1:用于调用函数
作用2:用于改变运行中的函数中的this指向
作用:主要用来继承

需求:
函数fn,在被调用的时候,想要改变内部的this指向,指向o对象

    function fn(x, y) {
      console.log("我想喝水");
      console.log(this);
      console.log(x + y);
    }
    //fn();//调用函数
    // fn.call(); //作用1:可以调用函数   //结果:我想喝水
    let o = {
      name: "andy"
    }
    fn.call(o, 1, 3); //作用2:可以改变运行时函数的this的指向 --- 这边修改后指向o对象  所以最后fn函数中的this指向o
  </script>

(2):apply() 方法

参数:参数一:需要this指向哪里,参数二:数组(伪数组)
作用1:调用函数
作用2:可以改变函数运行时this的指向
作用3:结合数学的方法,求数组的最大值或最小值

1:普通运用:调用函数并且改变this指向
    function fn1(arr) {
      console.log(this); //obj对象
      console.log(arr); //打印的时候是字符串   lala
    }
    let obj = {
      name: "pink"
    }
    fn1.apply(obj, ["lala"]); //调用函数,并且this指向obj

2:求最大值
	   let arr1 = [1, 555, 66, 33, 2];
    let max = Math.max.apply(null, arr1);
    console.log(max); //555

(3):bind()方法

参数:参数1:需要修改this指向那个对象,参数2:为其他参数
作用1:改变函数运行时this的指向
结果:返回的是一个新函数,里面值修改后的this指向还有对参数改造后的原函数拷贝(通俗的讲:就是对原函数修改后,由于bind方法不调用函数,因此需要用一个新函数去接受这个修改后的函数)
注意点:bind方法不会调用函数,因此需要用一个新函数去接受这个修改后的函数
就是一个函数暂时不调用,但是需要改变this指向的,bind方法比较合适,因为最后需要声明一个新函数去接受原函数的改变,因此在之后可以调用

    function fn2(a, b) {
      console.log(this); //原来这里的this指向window,但是被bind等方法修改后,指向修改后的对象 obj2
      console.log(a + b); //6
    }
    let obj2 = {
      age: "18"
    }
    let f = fn2.bind(obj2, 2, 4);
    f();

需求:点击下面几个按钮,排他思想,就是点击后,当前的按钮禁用,3秒过后才能开启
以下列举3种方法:
1:用bind方法来修改this的指向
2:用箭头函数
3:声明一个that在点击事件内部接受这个this,然后在定时器里面使用that即可

 <button>点击</button><button>点击</button><button>点击</button>
 
    let btns = document.querySelectorAll("button");
    btns.forEach(function (v, i) {
      btns[i].addEventListener("click", function () {
        this.disabled = true;
        //3秒后开启
        //方法1:这是bind方法修改了thia指向
        setTimeout(function () {
          this.disabled = false;
        }.bind(this), 3000);
        // 方法2:这是箭头函数,this的指向寻找最近的this指向,然后借用一波
        // setTimeout(() => {
        //   this.disabled = false;
        // }, 3000);
      })
    })

call,apply,bind方法的区别

区别:
1:bind方法不会调用函数,而aplly,call方法都可以调用函数,还有就是bind第一次绑定的时候,才能改变this的指向(针对同一个dom元素)
2:aplly方法第二个参数传递的必须是数组的形式(伪数组也可以)【arg】,而其他两个方法五要求
3:call方法主要用于继承,apply方法主要用于数组相关的,借助数学对象来求最大值或者最小值,bind方法主要运用,是不直接调用函数,但是改变this的指向,比如定时器的this的指向。

  • 2
    点赞
  • 3
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值