apply、call、bind区别、用法

apply和call都是为了改变某个函数运行时的上下文而存在的(就是为了改变函数内部this的指向);

如果使用apply或call方法,那么this指向他们的第一个参数,apply的第二个参数是一个参数数组,call的第二个及其以后的参数都是数组里面的元素,就是说要全部列举出来;

他们的常用用法

1.数组之间的追加;

2.获取数组中的最大值和最小值,利用他们扩充作用域拥有Math的min和max方法;

由于没有什么对象调用这个方法,所以第一个参数可以写作null或者本身;

var  numbers = [5, 458 , 120 , -215 ]; 
var  maxInNumbers = Math.max.apply(Math, numbers),   //458

maxInNumbers = Math.max.call(Math,5, 458 , 120 , -215); //458

3.验证是否是数组(前提是toString()方法没有被重写过)

function   isArray(obj){ 
    return Object.prototype.toString.call(obj) === ‘[object Array]‘ ;

}

4.让类数组拥有数组的方法

比如arguments对象,获取到的文档节点等,并没有数组的那些方法:

Array.prototype.slice.apply(argument); //理论上来说这个比较快,直接在原型上查找slice方法

//但实际上比较慢

或者

[].slice.apply(arguments); //理论上来说这个比较慢,因为要Array做一个实例化再查找slice方法

//实际上比较快,因为现在的各种自动化工具会把上一种方法转换为这种,而第二种代码比较简洁,所以会比较快;

bind()--也是改变函数体内this的指向;

bind会创建一个新函数,称为绑定函数,当调用这个函数的时候,绑定函数会以创建它时传入bind()方法的第一个参数作为this,传入bind()方法的第二个及以后的参数加上绑定函数运行时本身的参数按照顺序作为原函数的参数来调用原函数;

bind与apply、call最大的区别就是:bind不会立即调用,其他两个会立即调用

例子:

如果多次调用bind,那么多出来的次数都是无效的,

三个的使用区别:

都是用来改变函数的this对象的指向的;

第一个参数都是this要指向的对象;

都可以利用后续参数传参;

bind是返回对应函数,便于稍后调用,apply、call是立即调用;

详解call(),apply()和bind()

http://blog.csdn.net/u014267183/article/details/52610600

原创 2016年09月21日 17:32:57

  • 4753

之前看了点es6的箭头函数,为了搞懂箭头函数的this,看了很多文章,也顺便看了几个绑定函数,发现很多以前没注意的问题,收获不少。

之前就在网上的笔试题中看过用js实现bind()函数,没怎么在意,以为既然都是用来进行上下文绑定的,用call或者apply应该就能实现。现在看,我还是图样图森破。

先来讲一下call()和apply()吧,对于这两个函数,我是看自己的书学习的,学的时候没觉的有什么问题,但是我查了一下网上的关于call()和apply()的文章,尼玛啊,这说都是些什么啊!!看着真费劲。

其实,call()和apply()就是改变函数的执行上下文,也就是this值。他们两个是Function对象的方法,每个函数都能调用。他们的第一个参数就是你要指定的执行上下文,第二个用来传递参数(说第二个不准确,应该说第二部分,因为参数可以传多个),也就是传给调用call和apply方法的函数的参数。说白了,就是调用函数,但是让它在你指定的上下文下执行,这样,函数可以访问的作用域就会改变。下面看点代码:

function apply1(num1, num2){
    return sum.apply(this, [num1, num2]);
    }
function call1(num1, num2){
    return sum.call(this, num1, num2);

}

这里,我们执行环境传的是this,也就是说没改变函数的执行上下文。这两段代码,只是想告诉你call和apply的区别。

call的第二部分参数要一个一个传,apply要把这些参数放到数组中。这就是他们的区别,真的就这么点区别!!!

然后,不得不说的一点:它们的第二个参数都可以传arguments。

—————————————————————————————————————————————————————————————————————————————

下面来讲bind()函数,bind()是es5中的方法,他也是用来实现上下文绑定,看它的函数名就知道。bind()和call与apply不同。bind是新创建一个函数,然后把它的上下文绑定到bind()括号中的参数上,然后将它返回。

所以,bind后函数不会执行,而只是返回一个改变了上下文的函数副本,而call和apply是直接执行函数。

下面代码可以反映出这点,而且也显示了bind的用法(后面的代码皆取自张鑫旭大神的博客)

var button = document.getElementById("button"),
    text = document.getElementById("text");
button.onclick = function() {
    alert(this.id); // 弹出text
}.bind(text);

但由于ie6~ie8不支持该方法,所以若想在这几个浏览器中使用,我们就要模拟该方法,这也是面试常考的问题,模拟的代码如下:

if (!function() {}.bind) {
    Function.prototype.bind = function(context) {
        var self = this
            , args = Array.prototype.slice.call(arguments);

        return function() {
            return self.apply(context, args.slice(1));
        }
    };
}

就是这段代码,纠正了我长久以来的一个误区。下面来讲一下这段代码

首先,我们判断是否存在bind方法,然后,若不存在,向Function对象的原型中添加自定义的bind方法。

这里面var self = this这段代码让我很困扰,按理说,prototype是一个对象,对象的this应该指向对象本身,也就是prototype,但真的是这样吗。看看下面的代码:

function a(){};

a.prototype.testThis = function(){console.log(a.prototype == this);};

var b = new a();

b.testThis();//false

显然,this不指向prototype,而经过测试,它也不指向a,而指向b。所以原型中的this值就明朗了。指向调用它的对象。

Array.prototype.slice.call(arguments);

接下来就是上面这段代码,它会将一个类数组形式的变量转化为真正的数组。为啥呢,其实书上并没有说slice还有这样的用法,也不知道是谁发明的。slice的用法可以顺便上网查一下,就能查到。但要更正一点,网上的介绍说slice有两个参数,第一个参数不能省略。然而我不知道是我理解的问题还是咋地,上面这段代码tmd不就是典型的没传参数吗!!!arguments是传给call的那个上下文,前面讲过,不要弄混(由于arguments自己没有slice方法,这里属于借用Array原型的slice方法)。而且经过测试,若果你不给slice传参数,那就等于传了个0给它,结果就是返回一个和原来数组一模一样的副本。

这之后的代码就很好理解,返回一个函数,该函数把传给bind的第一个参数当做执行上下文,由于args已经是一个数组,排除第一项,将之后的部分作为第二部分参数传给apply,前面讲过apply的用法。

如此,我们自己的这个bind函数的行为就同es5中的bind一样了。

时间: 2024-10-24 05:25:17

apply、call、bind区别、用法的相关文章

js中call、apply、bind的用法

今天看博客时,看到了这样的一段js代码: var bind = Function.prototype.call.bind(Function.prototype.bind); 我想突然看到这样的一段代码,即使js能力再强的人,可能也需要花点时间去理解.像我这样的菜鸟就更不用说了.其实,原文已经对这端代码做出了解释,但我还是想用我的想法去解释这段代码. 上面那段代码涉及到了call.bind,所以我想先区别一下call.apply.bind的用法.这三个方法的用法非常相似,将函数绑定到上下文中,即用

call,apply,bind的用法以及区别

1.call.apply.bind的作用是改变函数运行时this的指向 方法调用模式: 当一个函数被保存为对象的一个方法时,如果调用表达式包含一个提取属性的动作,那么它就是被当做一个方法来调用,此时的this被绑定到这个对象. var a = 1 var obj1 = { a:2, fn:function(){ console.log(this.a) } } obj1.fn()//2 此时的this是指obj1这个对象,obj1.fn()实际上是obj1.fn.call(obj1),事实上谁调用

call,apply,bind的用法与区别

1.call/apply/bind方法的来源 首先,在使用call,apply,bind方法时,我们有必要知道这三个方法究竟是来自哪里?为什么可以使用的到这三个方法? call,apply,bind这三个方法其实都是继承自Function.prototype中的,属于实例方法. 1 console.log(Function.prototype.hasOwnProperty('call')) //true 2 console.log(Function.prototype.hasOwnPropert

call、apply、bind的用法

数组追加 //用apply拼接 var arr1=[12,'name:foo',2048]; var arr2=['Joe','Hello']; Array.prototype.push.apply(arr1,arr2); console.log(arr1);//(5) [12, "name:foo", 2048, "Joe", "Hello"] //用call拼接 var arr1=[12,'name:foo',2048]; var arr2=

javascript中call()、apply()、bind()的用法终于理解

其实是一个很简单的东西,认真看十分钟就从一脸懵B 到完全 理解! 先看明白下面: 例1 obj.objAge;  //17 obj.myFun()  //小张年龄undefined 例2 shows()  //盲僧 比较一下这两者this 的差别,第一个this 指向obj,第二个全局声明的shows()函数   this 是window : 1,call().apply().bind() 都是用来重定义 this 这个对象的! 如: obj.myFun.call(db): //德玛年龄99  

(转)javascript中call()、apply()、bind()的用法

其实是一个很简单的东西,认真看十分钟就从一脸懵B 到完全 理解! 先看明白下面: 例1 obj.objAge;  //17 obj.myFun()  //小张年龄undefined 例2 shows()  //盲僧 比较一下这两者this 的差别,第一个this 指向obj,第二个全局声明的shows()函数   this 是window : 1,call().apply().bind() 都是用来重定义 this 这个对象的! 如: obj.myFun.call(db): //德玛年龄99  

javascript中apply,call,bind区别,bind兼容等问题总结

1 三者的相似之处: (1).都是用来改变函数的this对象的指向的 (2).都是用第一个参数来做this对象的指向 (3).都可以传参数进去 那么,具体到它们有什么区别呢?请看下面的例子: 两个对象,一个动物类,一个人类,人类也是可以走的,那么我们可以让人类直接使用动物类的action方法吗?答案当然是可以的. 方法就是通过改变动物类的action方法的指向,让它的指向变为person,如下: 结果如下: 再看另外两种用法: 这是call的方法,最后一个bind是有点特殊的: 这是因为bind

apply,call,bind区别

js中有三个改变this指针的方法,分别是 apply,call,bind.很多人只知道能改变的this,但是具体的适用场景不是太清楚.我也是遇到坑后不断的实践发现了区别. call ,apply方法: 1 function Product(name, price) { 2 this.name = name; 3 this.price = price; 4 } 5 6 function Food(name, price) { 7 Product.call(this, name, price);

闭包,闭包用途,call、apply、bind 的用法

什么是闭包:"函数"和"函数内部能访问到的变量(也叫环境)"的总和,就是一个闭包.JavaScript有两种作用域:全局作用域和函数作用域.函数内部可以直接读取全局变量.但是,在函数外部无法读取函数内部声明的变量.换言之,如果一个函数,使用了它范围外的变量,那么'这个函数+这个变量'就叫做闭包. function f1() { var n = 1; function f2() { console.log(n); } return f2; } //这段代码中,函数 f

JavaScript 中 call()、apply()、bind() 的用法

通过 call() 或 apply() 方法你可以设置 this 的值, 且作为已存在对象的新方法调用. call() 和 apply() 是预定义的函数方法. 两个方法可用于调用函数,两个方法的第一个参数必须是对象本身. 两个方法都使用了对象本身作为第一个参数. 两者的区别在于第二个参数: apply传入的是一个参数数组,也就是将多个参数组合成为一个数组传入,而call则作为call的参数传入(从第二个参数开始). <!DOCTYPE html> <html> <body&