JS中的this以及apply,call,bind的区别

apply,call,bind

Posted by Shiki on August 2, 2017

JS 中的 this 以及 apply,call,bind 的区别

之前参加饿了么的面试,面试中问到了 bind 函数,当时没有深入学习,现在补全。this 与 arguments 是 js 中函数默认附加的两个参数,我们这里讨论 this 的值以及 this 与 this 有关的函数 apply,call,bind,主要内容来自于《javascript 语言精粹》第四章。

this 的值

this 的值取决于函数的调用模式,在 js 中一共有 4 种调用模式:

  • 方法调用模式
  • 函数调用模式
  • 构造器调用模式
  • apply 调用模式

方法调用模式

函数被保存为对象的一个属性时,就是方法。当方法被调用时,this 被绑定到该对象。在调用该函数时使用 . 点或者[‘name’]下标的方式,那么它就是被当做夜歌方法调用的。

函数调用模式

当函数不是一个对象的属性时,那么它就是被当做函数调用的,这时 this 会绑定到全局变量。即使是在被当做内部函数调用时,依然绑定在全局变量。有一个技巧就是在方法调用模式下,使用一个变量(比如 that)去存储 this,这样就可以在方法内部的函数表达式使用外部的 this 变量。

构造器调用模式

在函数前带上 new 来调用,那么背地里将会创建一个连接到该函数的 prototype 成员的新对象,同时 this 会被绑定到那个新对象上。

Apply 调用模式

这里就集中讨论一下 apply,call 的使用与区别。js 是函数式的面向对象编程语言,所以函数可以拥有方法。apply 与 call 就是为了动态的改变 this 而出现的,两者的区别就是 apply 的第二个参数为数组,而 call 为 function 的参数列表。

apply:方法能劫持另外一个对象的方法,继承另外一个对象的属性.

Function.apply(obj,args)方法能接收两个参数 obj:这个对象将代替 Function 类里 this 对象 args:这个是数组,它将作为参数传给 Function(args–>arguments)

call:和 apply 的意思一样,只不过是参数列表不一样.

Function.call(obj,[param1[,param2[,…[,paramN]]]]) obj:这个对象将代替 Function 类里 this 对象 params:这个是一个参数列表

bind 函数

call 与 apply 是立即调用函数,而 bind 则是返回一个 this 被修改后的函数。使用 bind 得到的函数可以被存储起来再需要的时候调用,这就是最大的区别。bind 可以用在函数绑定的高级技巧中,我之后会补全这部分内容。