美文网首页
call,aplly,bind

call,aplly,bind

作者: Cissy_fba3 | 来源:发表于2018-09-17 17:31 被阅读0次

    JavaScript 提供了call、apply、bind这三个方法,来切换/固定this的指向。

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

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

    call方法的第一个参数,应该是一个对象(后面的参数则是调用的函数所需要的参数)。如果参数为空、null和undefined,则默认传入全局对象。

    var n = 123;
    var obj = { n: 456 };
    
    function a() {
      console.log(this.n);
    }
    
    a.call() // 123
    a.call(null) // 123
    a.call(undefined) // 123
    a.call(window) // 123
    a.call(obj) // 456
    

    如果call方法的参数是一个原始值,那么这个原始值会自动转成对应的包装对象,然后传入call方法。

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

    Function.prototype.apply()
    apply与call用法相同区别在于,第一个参数后面的参数——apply是一个数组
    func.call(thisValue, arg1, arg2, ...)
    func.apply(thisValue, [arg1, arg2, ...])

    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.
    //bind解决这个问题
    var print = d.getTime.bind(d);
    print() 
    
    var counter = {
      count: 0,
      inc: function () {
        this.count++;
      }
    };
    
    var obj = {
      count: 100
    };
    var func = counter.inc.bind(obj);
    func();
    obj.count // 101
    

    让counter的inc方法在obj环境中运行,并且返回这个函数让func指向这个函数,func执行就是在obj中执行,所以func执行之后ob。count为101。(上面代码中,bind方法将inc方法内部的this,绑定到obj对象。结果调用func函数以后,递增的就是obj内部的count属性)

    更多看阮一峰老师https://wangdoc.com/javascript/oop/this.html

    相关文章

      网友评论

          本文标题:call,aplly,bind

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