美文网首页
JavaScript 函数call,apply、 bind的区别

JavaScript 函数call,apply、 bind的区别

作者: 于默k | 来源:发表于2019-06-02 22:25 被阅读0次

    call,apply、bind的区别:

    bind绑定this的指向之后,不会立即调用当前函数,而是将函数返回。
    而call,apply绑定this指向后会立即调用。
    如果我们在不知道什么时候会调用函数的时候,需要改变this的指向,那么只能使用bind。
    比如:在定时器中,我们想改变this的指向,但是又不能立即执行,需要等待2秒,这个时候只能使用bind来绑定this。

    setInterval(function(){
        // ...
    }.bind(this), 2000);
    

    一、Apply

    方法重用
    通过 apply() 方法,您能够编写用于不同对象的方法。

    JavaScript apply() 方法
    apply() 方法与 call() 方法非常相似:
    在本例中,person 的 fullName 方法被应用到 person1:
    实例

    var person = {
        fullName: function() {
            return this.firstName + " " + this.lastName;
        }
    }
    var person1 = {
        firstName: "Bill",
        lastName: "Gates",
    }
    person.fullName.apply(person1);  // 将返回 "Bill Gates"
    

    二、call
    call函数
    在Function.prototype上挂载一个newCall函数表示是对call的模拟,具体逻辑看注释
    Function.prototype.newCall = function(context){
    // 1 判断context是否为object,如果是object就代表可能是Object 或者 null,如果不是就赋值一个空对象

      if (typeof context === 'object') {
        context = context || window //  context 如果是null就会赋值为window
      } else {
        context = Object.create(null)
      }
    

    // 2 在context下挂载一个函数,函数所在的key随机生成,防止context上已有同名key
    var fn = +new Date() + '' + Math.random() // 用时间戳+随机数拼接成一个随机字符串作为一个新的key
    context[fn] = this
    // 3 newCall如果还有其他的参数传入也要考虑用到

      var args = []
      for(var i = 1; i < arguments.length; i++) {
        args.push('arguments['+ i + ']')
      }
    

    // 4 重点在这里,执行context[fn]这个函数,只能用eval,因为newCall的入参参数不确定
    var result = eval('contextfn') // args是一个数组,但是当它和字符串相加时自动调用内部的toString方法转成字符串

      delete context[fn] // 用完后从context上删除这个函数
      // 5 返回结果
      return result
    }
    

    原理:
    在要挂载的对象context上临时添加一个方法 f
    用eval执行这个临时添加的方法f,并拿到执行后的结果result
    删除这个额外的方法f,并返回执行结果result

    带参数的 apply() 方法
    apply() 方法接受数组中的参数:
    实例

    var person = {
      fullName: function(city, country) {
        return this.firstName + " " + this.lastName + "," + city + "," + country;
      }
    }
    var person1 = {
      firstName:"John",
      lastName: "Doe"
    }
    
    person.fullName.apply(person1, ["Oslo", "Norway"]);
    与 call() 方法对比:
    实例
    var person = {
      fullName: function(city, country) {
        return this.firstName + " " + this.lastName + "," + city + "," + country;
      }
    }
    var person1 = {
      firstName:"John",
      lastName: "Doe"
    }
    
    person.fullName.call(person1, "Oslo", "Norway");
    

    在数组上模拟 max 方法
    您可以使用 Math.max() 方法找到(数字列表中的)最大数字:
    实例

    Math.max(1,2,3);  // 会返回 3
    

    由于 JavaScript 数组没有 max() 方法,因此您可以应用 Math.max() 方法。
    实例

    Math.max.apply(null, [1,2,3]); // 也会返回 3
    

    三、bind方法
    bind 是复制的意思,也可以改变调用其的函数或方法的 this 指向,参数可以在复制的时候传进去,也可以在复制之后调用的时候传进去。
    使用语法:

    1、函数名.bind(对象, 参数1, 参数2, ...); // 返回值是复制的这个函数
    2、方法名.bind(对象, 参数1, 参数2, ...); // 返回值是复制的这个方法

    1、函数调用 bind

    function f1(x, y) {
        console.log(x + y + this);
    }
    

    // 1.参数在复制的时候传入

    var ff = f1.bind(null,10,20); // 这只是复制的一份函数,不是调用,返回值才是
    ff();
    

    // 2.参数在调用的时候传入

    var ff = f1.bind(null); // 这只是复制的一份函数,不是调用,返回值才是
    ff(10,20);
    

    2、方法调用 bind

    function Person(age) {
        this.age = age;
    }
    
    Person.prototype.eat = function () {
        console.log(this.age); // this 指向实例对象
    };
    
    function Student(age) {
        this.age = age;
    }
    
    var per = new Person(18);
    var stu = new Student(20);
    
    var ff = per.eat.bind(stu);
    ff(); // 20
    

    相关文章

      网友评论

          本文标题:JavaScript 函数call,apply、 bind的区别

          本文链接:https://www.haomeiwen.com/subject/rrpfxctx.html