this

作者: YangJeremy | 来源:发表于2018-03-27 23:17 被阅读0次

    apply、call 、bind有什么作用,什么区别?

    Function.prototype.call()
    函数实例的call方法,可以指定函数内部this的指向(即函数执行时所在的作用域),然后在所指定的作用域中,调用该函数。

    var obj = {};
    
    var f = function () {
      return this;
    };
    
    f() === window // true
    f.call(obj) === obj // true
    
    

    上面代码中,全局环境运行函数f时,this指向全局环境(浏览器为window对象);call方法可以改变this的指向,指定this指向对象obj,然后在对象obj的作用域中运行函数f。

    call方法的参数,应该是一个对象。如果参数为空、null和undefined,则默认传入全局对象。

    var f = function () {
      return this;
    };
    
    f.call(5)
    // Number {[[PrimitiveValue]]: 5}
    
    

    上面代码中,call的参数为5,不是对象,会被自动转成包装对象(Number的实例),绑定f内部的this。

    call方法还可以接受多个参数。

    func.call(thisValue, arg1, arg2, ...)
    

    call的第一个参数就是this所要指向的那个对象,后面的参数则是函数调用时所需的参数。

    function add(a, b) {
      return a + b;
    }
    
    add.call(this, 1, 2) // 3
    

    Function.prototype.apply()

    apply方法的作用与call方法类似,也是改变this指向,然后再调用该函数。唯一的区别就是,它接收一个数组作为函数执行时的参数,使用格式如下。

    func.apply(thisValue, [arg1, arg2, ...])
    

    apply方法的第一个参数也是this所要指向的那个对象,如果设为null或undefined,则等同于指定全局对象。第二个参数则是一个数组,该数组的所有成员依次作为参数,传入原函数。原函数的参数,在call方法中必须一个个添加,但是在apply方法中,必须以数组形式添加。

    function f(x, y){
      console.log(x + y);
    }
    
    f.call(null, 1, 1) // 2
    f.apply(null, [1, 1]) // 2
    
    

    (1)找出数组最大元素

    JavaScript 不提供找出数组最大元素的函数。结合使用apply方法和Math.max方法,就可以返回数组的最大元素。

    var a = [10, 2, 4, 15, 9];
    Math.max.apply(null, a) // 15
    

    (2)将数组的空元素变为undefined

    通过apply方法,利用Array构造函数将数组的空元素变成undefined。

    Array.apply(null, ['a', ,'b'])
    // [ 'a', undefined, 'b' ]
    

    空元素与undefined的差别在于,数组的forEach方法会跳过空元素,但是不会跳过undefined。因此,遍历内部元素的时候,会得到不同的结果。

    var a = ['a', , 'b'];
    
    function print(i) {
      console.log(i);
    }
    
    a.forEach(print)
    // a
    // b
    
    Array.apply(null, a).forEach(print)
    // a
    // undefined
    // b
    
    

    Function.prototype.bind()
    bind方法用于将函数体内的this绑定到某个对象,然后返回一个新函数。

    var d = new Date();
    d.getTime() // 1481869925657
    
    var print = d.getTime;
    print() // Uncaught TypeError: this is not a Date object.
    
    var print = d.getTime.bind(d);
    print() // 1481869925657
    

    bind方法将getTime方法内部的this绑定到d对象,这时就可以安全地将这个方法赋值给其他变量了。

    var counter = {
      count: 0,
      inc: function () {
        this.count++;
      }
    };
    
    var obj = {
      count: 100
    };
    var func = counter.inc.bind(obj);
    func();
    obj.count // 101
    
    

    相关文章

      网友评论

          本文标题:this

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