美文网首页程序员
js函数(call/apply/bind与this)

js函数(call/apply/bind与this)

作者: 悠哈121 | 来源:发表于2018-11-19 10:00 被阅读0次
    js中的函数和其他语言不一样的地方在于js中的函数也是一个对象,你可以这样认为它拥有对象拥有的,比如自己的属性和方法如下图 image.png

    关于this
    1)js中的函数总结下来有4种用法
    foo(){
    console.log(this.a)
    }
    (1)直接调用 foo()
    (2)作为对象方法调用 a.foo()
    (3)作为构造器使用,在es5及之前并没没有引入class,使用的是函数替代 new foo()
    (4)call/apply/bind foo.call({a:1},1,2) / foo.apply({a:1},[1,2]) / foo.bind({a:1})
    call和apply的作用是相同的,可以理解为使{a:1}这个对象拥有该foo方法
    bind:是用于绑定this 他们三个本质都是改变函数中的this
    函数中的this指向真的让人头疼,官方文档也不是很好理解,其实this的指向就是根据上面4种用法来判定的,就拿上面的foo来举例
    (1)直接调用foo,则它属于window,this指向window
    (2)作为对象方法调用 与对象绑定o.foo() this指向o
    (3)作为构造器使用 默认返回this this指向实例化的对象
    这里有个好玩的地方如果我构造函数这样写(若返回的时对象则改变this指针,若返回的时基础数据则不会改变this的指向问题)
    foo(){ return a} //这里不会改变this的 返回的仍然是new foo()的到的对象
    foo(){ return {} } //这里将返回空对象
    (4) foo.call({a:1},1,2) / foo.apply({a:1},[1,2]) / foo.bind({a:1}) 他们的this将会指向{a:1} 如果你写成这个样子foo.call(3) this将会指向Number(3)

    bind常用于函数的柯里化就是将函数产分成多个单元,比如 image.png
    还是上面的例子 当用new的时候bind将不会起到绑定this的作用,如图
    image.png 最后做个简单的关于this的测试吧
    image.png 最后关于函数最后一个就是arguments,它是一个伪数组,arguments可以帮我们取到函数的所有传参,只具有数组遍历的功能,并不具备数组上面的其它方法,如果我们想要在arguments上使用数组的方法我们就用到上面刚刚理解过的call/apply image.png image.png
    代码实现(call和bind都是apply的语法糖)
    function bind(fun,obj){
      let arr =[].slice.apply(arguments);
      return function(){
        fun.apply(obj,arr.slice(2))
      }
    }
    function call(fun,obj){
      let arr = [].slice.apply(arguments);
      fun.apply(obj,arr.slice(2))
    }
    
    
    function aa(b){
      console.log(this.name,b)
    }
    
    let obj = {
      name:"hahaha"
    }
    
    let aabind = bind(aa,obj,"wy");
    aabind()
    
    call(aa,obj,"w123")
    

    js学习(ECMAScript,DOM,BOM):https://www.jianshu.com/p/b7136540b379

    相关文章

      网友评论

        本文标题:js函数(call/apply/bind与this)

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