每个函数都包含两个非继承而来的方法,apply()和call(),这两方法的用途都是在特定的作用域中调用函数,实际上等于设置函数数体内的this对象的值。
apply()和call()第一个参数都一样,运行函数的作用域
apply()第二个参数是数组,call()其余参数直接传给函数。
function() sum(num1, num2){
return num1 + num2;
}
function() callSum1(num1, num2){
return sum.apply(this, arguments); //传入arguments对象
}
function callSum2(num1, num2){
retrun sum.apply(this, [num1, num2]);
} alert(callSum1(10,10)); //
alert(callSum2(10,10)); //

在上面例子中,callSum1在执行sum()函数传入了this值(因为是在全局作用域中调用的,所以传入的就是window对象)和arguments对象。callSum2同样也调用了sum()函数,但传入的是this 和一个参数数组。

call()方法和apply()方法的作用相同,它们的区别仅在于接收参数的的方式不同,对于call()方法而言,第一个参数是this值没有变化,变化的是其余参数都是直接传递给函数,在使用call()方法时,传递给函数的参数必须逐个列举出来。 如下列子所示。

function sum(num1, num2){
return sum1 + num2;
} function callSum(num1, num2){
return sum.call(this, num1, num2);
} alert(callSum(10, 10)) //

传递参数并非apply()和call()真正的用武之地,它们真正强大的地方是能够扩充函数赖以运行的作用域。

window.color = 'red';
var o = { color: 'bule' };
function sayColor() {
alert(this.color);
} sayColor(); //red
sayColor.call(this); //red
sayColor.call(window); //red
sayColot.call(o); //bule

这个例子是在前面说明this对象的示例基础上修改而成的,这一次,sayColor()也是作为全局函数定义的,而且在全局作用域中调用它时,它的确会显示'red'——因为对this.color的求值会转换成window.color的求值。而sayColor.call(this)和sayColor.call(window),则是两种显示地在全局作用域中调用灌输的方式,结果当然都会显示“red”.但是当运行sayColor.call(o)时,函数执行环境就不一样, 因为此时函数体内的this对象指向了o,于是结果显示的是‘blue’。

使用call()和apply()来扩充作用域的最大好处,就是对象不需要与方法耦合关系。

es5还定义了一个方法,bind()。这个方法会创建一函数实例,其this值会被绑定到bind()函数的值。

window.color = 'red';
var o = { color: 'blue' } ;
functuon sayColor(){
alert(this.color);
} var objSayColor = sayColor.bind(o);
objSayColor(); //blue

sayColor()调用bind()并传入对象哦,创建了objSayColor()函数。 objSayColor()函数的this值等于哦,因此即使在全局作用域中调用这个函数,也会看到‘blue’

一个简单bind()函数接受一个函数和一个环境,并返回一个在给定环境中调用给定的函数,并且将所有参数原封不动传递过去。语法如下

function bind(fn, context){
return function(){
return fn.apply(context, arguments);
}
}

这个函数似乎很简单,但其功能是非常的强大,在bind()中创建了一个闭包,闭包使用apple()调用传入的函数,并给apply()传递context对象和参数。注意这里使用的arguments对象是内部函数的,而非bind()的。当调用返回函数时,它会在给定环境中执行被传入的函数并给出所有参数。

call(),apply(),bind()区别?的更多相关文章

  1. call apply bind 区别?

    call apply bind 区别? 例:定义一个计算器,没绑定bind的为公共计算器,call可以调用,绑定bind的为私人计算器,别人调用不了, //ps:用bind绑定的call强制作借用不好 ...

  2. call, apply, bind 区别

    #call, apply, bind 区别及模拟实现call apply bind 三者都可以用来改变this的指向,但是在用法上略有不同  首先说一下call和apply的区别 call和apply ...

  3. js中的call,apply,bind区别

    在JavaScript中,call.apply和bind是Function对象自带的三个方法,这三个方法的主要作用是改变函数中的this指向. call.apply.bind方法的共同点和区别:app ...

  4. call(),apply(),bind() 区别和用法

    call call 方法第一个参数是要绑定给this的值,后面传入的是一个参数列表.当第一个参数为null.undefined的时候,默认指向window. var arr = [1, 2, 3, 8 ...

  5. js 中arguments,call,apply,bind的使用

    //对于 arguments和this, 每个函数都有自己独有的arguments和this, 且不进行链式查找 //arguments是什么? //答:1:arguments是收到的实参副本 //2 ...

  6. bind,apply,call区别总结

    <!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8" ...

  7. JavaScript中call,apply,bind方法的区别

    call,apply,bind方法一般用来指定this的环境. var a = { user:"hahaha", fn:function(){ console.log(this.u ...

  8. javascript中的call(),apply(),bind()方法的区别

    之前一直迷惑,记不住call(),apply(),bind()的区别.不知道如何使用,一直处于懵懂的状态.直到有一天面试被问到了这三个方法的区别,所以觉得很有必要总结一下. 如果有不全面的地方,后续再 ...

  9. apply、call、bind区别、用法

    apply和call都是为了改变某个函数运行时的上下文而存在的(就是为了改变函数内部this的指向):   如果使用apply或call方法,那么this指向他们的第一个参数,apply的第二个参数是 ...

  10. bind、call、apply的区别与实现原理

    1.简单说一下bind.call.apply的区别 三者都是用于改变函数体内this的指向,但是bind与apply和call的最大的区别是:bind不会立即调用,而是返回一个新函数,称为绑定函数,其 ...

随机推荐

  1. 【大数据安全】基于Kerberos的大数据安全验证方案

    1.背景 互联网从来就不是一个安全的地方.很多时候我们过分依赖防火墙来解决安全的问题,不幸的是,防火墙是假设"坏人"是来自外部的,而真正具有破坏性的攻击事件都是往往都是来自于内部的 ...

  2. c++性能测试工具:google benchmark入门(一)

    如果你正在寻找一款c++性能测试工具,那么这篇文章是不容错过的. 市面上的benchmark工具或多或少存在一些使用上的不便,那么是否存在一个使用简便又功能强大的性能测试工具呢?答案是google/b ...

  3. .NET垃圾回收机制 GC

    线程栈 stuck:存值类型,和引用类型的引用  先进后出,链表形式,连续摆放 CLR(公共语言运行库(Common Language Runtime))启动进程,main函数为一个线程入口 进程堆h ...

  4. 回顾曾经的自己,献给java初学者的建议

    要不惜代价投资自己,任何对自己的投资都是值得的 要多学习数据结构, 习惯看源码! 一份知识经过n个人的传递早已经不成样子了 遇到问题不要直接百度,百度上那些花里胡哨的东西有用的很少,对症下药才是王道, ...

  5. 非常易于理解‘类'与'对象’ 间 属性 引用关系,暨《Python 中的引用和类属性的初步理解》读后感

    关键字:名称,名称空间,引用,指针,指针类型的指针(即指向指针的指针) 我读完后的理解总结: 1. 我们知道,python中的变量的赋值操作,变量其实就是一个名称name,赋值就是将name引用到一个 ...

  6. jsp:set/getProperty底层实现的探究

    关于jsp:set/getProperty底层实现的探究 今天上课讲到<jsp:useBean>时涉及到了<jsp:setProperty>和<jsp:getProper ...

  7. Html5 Canvas介绍

    1. 获取绘图上下文 var mycanvas = document.getElementById('mycanvas'); var context = mycanvas.getContext('2d ...

  8. 该用Python还是SQL?4个案例教你节省时间

    在数据分析行业,对数据提出的每一个问题都可以用多种潜在的语言和工具包来回答.每种语言都有其优势,它们之间也存在着不同的区别.不能否认的是,有些操作用Python执行起来要比SQL更加高效.这篇文章分享 ...

  9. .net core 命令行(仅作记录)

    命令大全:dotnet 命令 创建NuGet包:如何使用 .NET Core 命令行接口 (CLI) 工具创建 NuGet 包

  10. c/c++ 继承与多态 文本查询的小例子(非智能指针版本)

    问题:在上一篇继承与多态 文本查询的小例子(智能指针版本)在Query类里使用的是智能指针,只把智能指针换成普通的指针,并不添加拷贝构造方法,会发生什么呢? 执行时,代码崩掉. 分析下面一行代码: Q ...