码迷,mamicode.com
首页 > 移动开发 > 详细

了解.apply与.call以及.bind

时间:2016-07-09 17:37:55      阅读:253      评论:0      收藏:0      [点我收藏+]

标签:

1.apply:foo.apply(obj,args)方法能接收两个参数:

     (1)obj:这个对象将代替Function类里this对象;

     (2)args:这个是数组,它将作为参数传给Function(args-->arguments);

  关于apply,我所知道的用法中,最经典的莫过于巧妙地实现提取数值(Number)数组最值的方法:

Array.prototype.getMin = function() {
  return Math.min.apply(null, this);
};
var arr = [1,2,3,4,5,213212,-99];
arr.getMin();//-99

2.call: foo.call(obj, args);

对于apply与call不同点的说明:A for array and C for comma;call的参数只能一个一个地传递;

3.bind()方法会创建一个新函数,当这个新函数被调用时,它的this值是传递给bind()的第一个参数, 它的参数是bind()的其他参数和其原本的参数.

  绑定函数示例:参考网址:https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Function/bind

this.x = 9; 
var module = {
  x: 81,
  getX: function() { return this.x; }
};

module.getX(); // 81

var retrieveX = module.getX;
retrieveX(); // 9, because in this case, "this" refers to the global object

// Create a new function with ‘this‘ bound to module
//New programmers (like myself) might confuse the global var getX with module‘s property getX
var boundGetX = retrieveX.bind(module);//<<--------bind的第一个参数为this指向的对象
boundGetX(); // 81

  复制某个对象下的方法之后想要this仍然指向module对象,获取它的属性X值,如上文代码中的:var retrieveX = module.getX;

但是在直接调用复制出来的函数retrieveX时,注意它是在全局作用域下直接内调用的,那么此时的this指向window,所有无法像我们“想当然地”认为的那样取出module对象下的属性值;

  而bind拥有改变函数执行时的作用域的作用(apply与call同样拥有这样的作用),我们可以在调用时使用bind方法,并将bind的第一个参数设置为module对象,那么我们就改变了this的指向(指向module),此时我们就可以达到预期的目的了。

  关于.call、.bind的基本知识看完了?懂了吗?来个思考题检验一下你是否理解了这些方法.

问:下面的代码输出的是什么?

技术分享

 

 

 

 

 

 

分析:

1.首先test函数输出的是操作对象(this指向)的a属性的值;所以接下来的思路就是判断this的指向;

2.三个var语句,定义了两个对象,一个绑定函数.

  对象

    var obj1= {a:1};

    var obj2 = {a:2};

  绑定函数

    var fn = test.bind(obj2);//绑定函数作用域内this指向obj2;

最后关键的执行语句test.bind(obj2).call(obj1);//call的第一个参数传递的也是this的指向那么问题来了,this到底指向哪个对象?

结果:如果你回答输出的a1那就错了,因为通过bind取得的函数是个闭包,再调用时,只会通过闭包作用域找到之前存在的值(不是this),所以用call(其只改变this)是无法改变它的结果。输出为2.

 

了解.apply与.call以及.bind

标签:

原文地址:http://www.cnblogs.com/foxNike/p/5656059.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!