• 改变函数内this指向方法——call、apply、bind


    javascript为我们专门提供了一些函数方法来帮我们更优雅的处理函数内部this的指向问题,常用的有bind( )、call( )、apply( )三种方法。

    相同点:

    都可以改变函数内部的this指向。

    区别点:

    1、call和apply传递的参数不一样,call传递参数aru1, aru2... 形式,apply必须数组形式[arg]

    2、bind不会调用函数,可以改变函数内部this指向

    主要应用场景:

    1、call经常做继承。

    2、apply经常跟数组有关系。比如借助于数学对象实现数组最大值最小值。

    3、bind不会调用函数,可以改变函数内部this指向。

    call方法

    call( )方法,调用一个对象。简单理解为调用函数的方法,但是它可以改变函数的this指向。

    应用场景:经常做继承

    var o = {
      name: 'andy'
    }
    function fn(a, b) {
      console.log(a + b);
    }
    fn.call(o, 1, 2);
    // call 第一个可以调用函数 第二个可以改变函数内的this 指向
    // call 的主要作用:可以实现继承
    function Father(uname, age, sex) {
      this.uname = uname;
      this.age = age;
      this.sex = sex;
    }
    function Son() {
      Father.call(this, uname, age, sex);
    }
     var son = new Son('刘德华', 18, '男');

    apply( )方法

    apply( )方法调用一个函数。简单理解为调用函数的方式,但是它可以改变函数的this指向。

    应用场景:经常跟数组有关系

    var o = {
      name: 'andy'
    };
    function fn(arr) {
      console.log(arr); // 'pink'
    };
    fn.apply(o, ['pink']);
    // 1. 也是调用函数 第二个可以改变函数内部的this指向
    // 2. 但是他的参数必须是数组(伪数组)
    // 3. apply 的主要应用 比如说我们可以利用 apply 借助于数学内置对象求数组最大值 
    var arr = [1, 66, 3, 99, 4];
    var arr1 = ['red', 'pink'];
    var max = Math.max.apply(Math, arr);
    var min = Math.min.apply(Math, arr);
    console.log(max, min); // 99 1

    bind方法

    bind( )方法不会调用函数。但是能改变函数内部this指向

     var o = {
     name: 'andy'
     };
    
    function fn(a, b) {
        console.log(this);
        console.log(a + b);
    };
    var f = fn.bind(o, 1, 2);  // 此处的f是bind返回的新函数
    f(); // 调用新函数  this指向的是对象o 参数使用逗号隔开

    案例:我们有一个按钮,当我们点击了之后,就禁用这个按钮,3秒钟之后开启这个按钮

    <body>
      <button>点击</button>
      <button>点击</button>
      <button>点击</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>
  • 相关阅读:
    lua 10 迭代器
    lua 9 parttern 字符极其简要的介绍
    lua 7 运算符
    lua 6 函数
    lua 5 流程控制 if
    线程池的设计问题/线程数量计算
    一个父子进程管道通信的复习
    redis 网络库文件 重构
    带标准IO带缓存区和非标准IO 遇到fork是的情况分析
    libevent 同性恋 讲解
  • 原文地址:https://www.cnblogs.com/guwufeiyang/p/13171677.html
Copyright © 2020-2023  润新知