call()、apply()、bind()方法的用法和区别

最新推荐文章于 2022-09-05 12:08:25 发布

Sunshine_upup

最新推荐文章于 2022-09-05 12:08:25 发布

阅读量327

点赞数

本文链接：https://blog.csdn.net/weixin_49768221/article/details/108590537

版权

改变函数内部的this指向

call()方法

call方法第一个参数是要绑定给this的值，后面传入的是参数列表。当第一个参数为null、undefined时，默认指向window。

  var obj = {
    name: 'andy'
  }
  function fn(a, b) {
      console.log(this);//此时this指向obj
      console.log(a + b);
  }
  fn.call(obj, 10, 20);//30

应用场景：经常做继承

function Father(uname, age) {
	 this.uname = uname;
     this.age = age
 }
 function Son(uname, age, sex) {
     // 调用father函数，并将father中的this改成son中的this
     Father.call(this, uname, age);
     this.sex = sex;
 }
 var p1 = new Son('刘德华', 20, '男');
 console.log(p1);//{uname: "刘德华", age: 20, sex: "男"}

apply()方法

apply方法第一个参数是要绑定给this的值，第二个参数是一个数组参数。当第一个参数为null、undefined时，默认指向window。

 var obj = {
 	name: 'andy'
 }
 function fn(arr) {
     console.log(this);
     console.log(arr); //'pink'
 }
 // 传递的参数必须是数组形式
fn.apply(obj, ['pink']);

应用场景：经常跟数组有关系
例如：求数组中的最大值

  var arr = [1, 66, 3, 99, 50];
  var max = Math.max.apply(Math, arr);
  console.log(max);

bind()方法

bind方法第一个参数是要绑定给this的值，后面传入的是参数列表。当第一个参数为null、undefined时，默认指向window。
bind方法不同的是不会调用函数，但是能改变this指向，返回的是原函数改变this之后产生的新函数，如果只是想改变 this 指向，并且不想调用这个函数的时候，可以使用bind。

  var obj = {
 	name: 'zs'
  }
  function fn(a, b) {
      console.log(this);//obj
      console.log(a + b);//3
  }
  var f = fn.bind(obj, 1, 2);
  f();//调用改变this之后的函数

应用场景：不调用函数,但是还想改变this指向
例如：多个按钮，点哪个按钮就禁用哪个按钮，3秒之后再开启这个按钮

<body>
    <button>点击1</button>
    <button>点击2</button>
    <button>点击3</button>
    <script>
        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)
            }
        }
    </script>
</body>

call、apply、bind总结

相同点：都可以改变函数内部的this指向

不同点：

call和apply会调用函数，并改变函数内部this指向
bind不会调用函数，但可以改变this指向
call和bind传递参数是以列表形式，apply必须以数组形式传递

应用场景：

call 经常做继承
apply经常跟数组有关系. 比如借助于数学对象实现数组最大值最小值
bind 不调用函数,但是还想改变this指向. 比如改变定时器内部的this指向.

Sunshine_upup

关注

0
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
call()、apply()、bind()方法的用法和区别

改变函数内部的this指向call()方法call方法第一个参数是要绑定给this的值，后面传入的是参数列表。当第一个参数为null、undefined时，默认指向window。 var obj = { name: 'andy' } function fn(a, b) { console.log(this);//此时this指向obj console.log(a + b); } fn.call(obj, 10, 20);//30应用场景：经常做继承
复制链接

扫一扫