了解.apply与.call以及.bind

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到底指向哪个对象?

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

时间: 2024-11-04 20:25:24

了解.apply与.call以及.bind的相关文章

转---深入浅出妙用 Javascript 中 apply、call、bind

作者:伯乐在线专栏作者 - chokcoco 如有好文章投稿,请点击 → 这里了解详情 如需转载,发送「转载」二字查看说明 这篇文章实在是很难下笔,因为网上相关文章不胜枚举. 巧合的是前些天看到阮老师的一篇文章的一句话: "对我来说,博客首先是一种知识管理工具,其次才是传播工具.我的技术文章,主要用来整理我还不懂的知识.我只写那些我还没有完全掌握的东西,那些我精通的东西,往往没有动力写.炫耀从来不是我的动机,好奇才是." 对于这句话,不能赞同更多,也让我下决心好好写这篇,网上文章虽多,

深入浅出 妙用Javascript中apply、call、bind

apply.call.bind的认识,并且列出一些它们的妙用加深记忆. apply.call 在 javascript 中,call 和 apply 都是为了改变某个函数运行时的上下文(context)而存在的,换句话说,就是为了改变函数体内部 this 的指向. JavaScript 的一大特点是,函数存在「定义时上下文」和「运行时上下文」以及「上下文是可以改变的」这样的概念. 先来一个栗子: 1 2 3 4 5 6 7 8 9 10 11 function fruits() {} fruit

javascript中apply、call和bind的区别,容量理解,值得转!

a)  javascript中apply.call和bind的区别:http://www.cnblogs.com/cosiray/p/4512969.html b)  深入浅出 妙用Javascript中apply.call.bind   http://www.admin10000.com/document/6711.html ====================================================== 在JS中,这三者都是用来改变函数的this对象的指向的,他们

[转] 深入浅出 妙用Javascript中apply、call、bind

[From] http://www.admin10000.com/document/6711.html 网上文章虽多,大多复制粘贴,且晦涩难懂,我希望能够通过这篇文章,能够清晰的提升对apply.call.bind的认识,并且列出一些它们的妙用加深记忆. apply.call 在 javascript 中,call 和 apply 都是为了改变某个函数运行时的上下文(context)而存在的,换句话说,就是为了改变函数体内部 this 的指向. JavaScript 的一大特点是,函数存在「定义

Javascript中apply、call、bind

JavaScript函数存在「定义时上下文」和「运行时上下文」以及「上下文是可以改变的」这样的概念 apply和call函数 call() 和 apply()都是为了改变某个函数运行时的上下文(context)而存在的,换句话说,就是为了改变函数体内部 this 的指向 call()方法接受的是一个参数列表,而apply()方法接受的是一个包含多个参数的数组(或类数组对象) fun.apply(thisArg[, argsArray]) 参数: thisArg 在 fun 函数运行时指定的 th

深入浅出妙用 Javascript 中 apply、call、bind

原文地址:深入浅出妙用 Javascript 中 apply.call.bind apply.call 在 javascript 中,call 和 apply 都是为了改变某个函数运行时的上下文(context)而存在的,换句话说,就是为了改变函数体内部 this 的指向. JavaScript 的一大特点是,函数存在「定义时上下文」和「运行时上下文」以及「上下文是可以改变的」这样的概念. 先来一个栗子:eg1: function fruits() {} fruits.prototype = {

解析JavaScript中apply和call以及bind

函数调用方法 在谈论JavaScript中apply.call和bind这三兄弟之前,我想先说下,函数的调用方式有哪些: 作为函数 作为方法 作为构造函数 通过它们的call()和apply()方法间接调用 前面的三种调用方法,我们都知道且不在这篇文章的讨论范围内,就不说了. 下面我们来说说这第四种调用方法 通过call()和apply()间接调用 其实,我们可以将这两个函数看做是某个对象的方法,通过调用方法的方式来间接调用函数: function f(){} f.call(o); f.appl

【优雅代码】深入浅出 妙用Javascript中apply、call、bind

这篇文章实在是很难下笔,因为网上相关文章不胜枚举. 巧合的是前些天看到阮老师的一篇文章的一句话: “对我来说,博客首先是一种知识管理工具,其次才是传播工具.我的技术文章,主要用来整理我还不懂的知识.我只写那些我还没有完全掌握的东西,那些我精通的东西,往往没有动力写.炫耀从来不是我的动机,好奇才是." 对于这句话,不能赞同更多,也让我下决心好好写这篇,网上文章虽多,大多复制粘贴,且晦涩难懂,我希望能够通过这篇文章,能够清晰的提升对apply.call.bind的认识,并且列出一些它们的妙用加深记忆

原生JS:Function对象(apply、call、bind)详解

Function对象(apply.call.bind) 本文参考MDN做的详细整理,方便大家参考[MDN](https://developer.mozilla.org/zh-CN/docs/Web/JavaScript) Function 构造器会创建一个新的 Function 对象. 在 JavaScript 中每个函数都是一个Function对象. 构造器 new Function ([arg1[, arg2[, ...argN]],] functionBody) arg1, arg2, .

javascirpt之 this、apply、call、bind

this.apply.call.bind 这又是一个面试经典问题~/(ㄒoㄒ)/~~也是 ES5中众多坑中的一个,在 ES6 中可能会极大避免 this 产生的错误,但是为了一些老代码的维护,最好还是了解一下 this 的指向和 call.apply.bind 三者的区别. this 的指向 在 ES5 中,其实 this 的指向,始终坚持一个原理:this 永远指向最后调用它的那个对象.记住这句话,this 你已经了解一半了. 下面我们来看一个最简单的例子:例 1: var name = "w