JavaScript 之 call apply bind

关键字 this 绑定的方法

  this的动态切换,固然为JavaScript创造了巨大的灵活性,但也使得编程变得困难和模糊。有时,需要把this固定下来,避免出现意想不到的情况。JavaScript提供了callapplybind这三个方法,来切换/固定this的指向。

1. apply(thisArg[,args])

  call(thisArgs [,args...]) 后面跟的是若干个参数列表 而 apply接收的是参数数组。

  thisArgs指定了函数在运行期的调用者,也就是函数中的this对象,而参数列表会被传入调用函数中。thisArgs的取值有以下4种情况:

  A): 不传,或者传null,undefined, 函数中的this指向window对象

   B): 传递另一个函数的函数名,函数中的this指向这个函数的引用

   C): 传递字符串、数值或布尔类型等基础类型,函数中的this指向其对应的包装对象,如 String、Number、Boolean

   D): 传递一个对象,函数中的this指向这个对象

  JavaScript 之  call apply  bind

  这是call的核心功能,它允许你在一个对象上调用该对象没有定义的方法,并且这个方法可以访问该对象中的属性。

  JavaScript 之  call apply  bind

3. apply

  apply(thisArgs[,args[]])

  apply和call的唯一区别是第二个参数的传递方式不同,apply的第二个参数必须是一个数组,而call允许传递一个参数列表。值得你注意的是,虽然apply接收的是一个参数数组,但在传递给调用函数时,却是以参数列表的形式传递

  function b(x,y,z){

    console.log(x,y,z);

  }

  b.apply(null,[1,2,3]);  // 1,2,3

4. bind

  bind(thisArgs [,args...])

  bind是ES5新增的一个方法,它的传参和call类似,但又和call/apply有着显著的不同,即调用call或apply都会自动执行对应的函数,而bind不会执行对应的函数,只是返回了对函数的引用。其实,ES5引入bind的真正目的是为了弥补call/apply的不足,由于call/apply会对目标函数自动执行,从而导致它无法在事件绑定函数中使用,因为事件绑定函数不需要我们手动执行,它是在事件被触发时由JS内部自动执行的。而bind在实现改变函数this的同时又不会自动执行目标函数,因此可以完美的解决上述问题

  JavaScript 之  call apply  bind

  当点击网页时,onClick被触发执行,输出onepixel p1 p2, 说明onClick中的this被bind改变成了obj对象,为了对bind进行深入的理解,我们来看一下bind的polyfill实现。

5. 应用场景

  继承:因为JavaScript 没有类继承 也不能像java c# 一样。所有 我们可以使用call  apply实现继承。

  JavaScript 之  call apply  bind

6. Function.prototype.bind

  我们真正需要解决的是什么?

  JavaScript 之  call apply  bind

  Function.prototype.bind() 是不支持IE8 以及以下的浏览器的。可以在MDN有一个很棒的资源。

适用的模式

  click handlers(点击处理函数) 点击之后响应或记录事件。

  setTimeout 可以实现此功能。

上一篇:MySQL数据库限制远程登陆IP、设置密码策略


下一篇:手写系列:call、apply、bind、函数柯里化