美文网首页程序员
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

相关文章

  • 简单分析apply、call、bind

    apply & call & bind 在 js中call/apply,都是为了改变函数运行的上下文(contex...

  • call(),apply()和bind()

    call、apply和bind函数存在的区别:bind返回对应函数, 便于稍后调用; apply, call则是立...

  • js中 call apply bind的理解

    js中的call apply bind都是用来改变this指向的 call apply bind都是用来改...

  • this 继承

    1.apply call bind的作用与区别 apply call bind都是用来改变函数执行的上下文,也就是...

  • apply, call, bind

    apply, call, bind 都是用来改变函数的this对象的指向 apply, call, bind 第一...

  • JS进阶知识点和常考面试题

    手写 call、apply 及 bind 函数 涉及面试题:call、apply 及 bind 函数内部实现是怎么...

  • bind call apply

    区别:call和apply调用就是执行函数 bind返回新函数 bind利用call或apply兼容i...

  • JS-call、apply、bind用法

    一、call&apply与bind区别 call和apply方法对函数直接调用bind方法后面还需要()来进行调用...

  • call apply

    js基础知识---call,apply,bind的用法 call,apply详解 javascript中,call...

  • Web前端------JS高级apply、call、bind方法

    JS apply、call、bind方法使用介绍 在介绍apply 、call、bind方法之前很有必要做一下简单...

网友评论

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

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