原文链接 http://www.jb51.net/article/30883.htm

想要理解透彻apply()和call() ,还要需要理解this  作用域 局部变量  全局变量

js apply()和call()

1、每个函数都包含两个非继承而来的方法:apply()和call()。
2、他们的用途相同,都是在特定的作用域中调用函数。
3、接收参数方式不同
    apply()接收两个参数,一个是函数运行的作用域(this),另一个是参数数组。
    call()方法第一个参数与apply()方法相同,但传递给函数的参数必须列举出来。
例1:
复制代码 代码如下:
window.firstName = "diz";
window.lastName = "song";
var myObject = { firstName: "my", lastName: "Object" };
function HelloName() {
  console.log("Hello " + this.firstName + " " + this.lastName, " glad to meet you!");
}
HelloName.call(window); //huo .call(this);
HelloName.call(myObject); 运行结果为:
Hello diz song glad to meet you!
Hello my Object glad to meet you!
例2:
复制代码 代码如下:
function sum(num1, num2) {
return num1 + num2;
}
console.log(sum.call(window, 10, 10)); //20
console.log(sum.apply(window,[10,20])); //30
分析:在例1中,我们发现apply()和call()的真正用武之地是能够扩充函数赖以运行的作用域 如果我们想用传统的方法实现,请见下面的代码:
window.firstName = "diz";
window.lastName = "song";
var myObject = { firstName: "my", lastName: "Object" };
function HelloName() {
console.log("Hello " + this.firstName + " " + this.lastName, " glad to meet you!");
}
HelloName(); //Hello diz song glad to meet you!
myObject.HelloName = HelloName;
myObject.HelloName(); //Hello my Object glad to meet you! 
要想让HelloName()函数的作用域在对象myObject上,
需要动态创建myObject的HelloName属性,此属性作为指针指向HelloName()函数,
这样,当我们调用myObject.HelloName()时,函数内部的this变量就指向myObjecct,也就可以调用该对象的内部其他公共属性了。

再看一看函数中定义函数时,this变量的情况

function temp1() {
console.log(this); //Object {}
function temp2() {
console.log(this); //Window
}
temp2();
}
var Obj = {};
temp1.call(Obj); //运行结果见上面绿色的注释!!!! 执行结果与下面的相同:
function temp1() {
console.log(this);
temp2();
}
function temp2() {
console.log(this);
}
var Obj = {};
temp1.call(Obj);  

4、bind()方法
  支持此方法的浏览器有IE9+、Firefox4+、Safari5.1+、Opera12+、Chrome。它是属于ECMAScript5的方法。直接看例子:

window.color = "red";
var o = { color: "blue" };
function sayColor(){
alert(this.color);
}
var OSayColor = sayColor.bind(o); //这里使用的函数名,没有带括号
OSayColor(); //blue

这里,sayColor()调用bind()方法,并传入o对象,返回了OSayColor()函数,在OSayColor()中,this的值就为o对象。

javascript apply()和call()的更多相关文章

  1. JavaScript apply函数小案例

    //回调函数1 function callback(a,b,c) { alert(a+b+c); } //回调函数2 function callback2(a,b) { alert(a+b); } / ...

  2. javascript:apply方法 以及和call的区别 (转载)

    javascript:apply方法   1.        apply和call的区别在哪里 2.        什么情况下用apply,什么情况下用call 3.        apply的其他巧 ...

  3. JavaScript apply

    https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Function/apply The ...

  4. 深入学习JavaScript: apply 方法 详解(转)——非常好

    主要我是要解决一下几个问题: 1.        apply和call的区别在哪里 2.        什么情况下用apply,什么情况下用call 3.        apply的其他巧妙用法(一般 ...

  5. [每天解决一问题系列 - 0001] Javascript apply和 call对比

    相同点: 每个函数都包含这两个原生的方法 他们两个的效果是一样的,用于在特定的作用域下执行函数,本质上是设置函数内this对象的值. 不同点: 传入的参数类型不同 . apply(函数作用域,arra ...

  6. javascript:apply方法

    1.        apply和call的区别在哪里 2.        什么情况下用apply,什么情况下用call 3.        apply的其他巧妙用法(一般在什么情况下可以使用apply ...

  7. JavaScript: apply 方法 详解(转)——非常好

    转载自  http://www.cnblogs.com/KeenLeung/archive/2012/11/19/2778229.html 我在一开始看到javascript的函数apply和call ...

  8. 深入学习JavaScript: apply 方法 详解

    我在一开始看到javascript的函数apply和call时,非常的模糊,看也看不懂,最近在网上看到一些文章对apply方法和call的一些示例,总算是看的有点眉目了,在这里我做如下笔记,希望和大家 ...

  9. JavaScript: apply , call 方法

    我在一开始看到javascript的函数apply和call时,非常的模糊,看也看不懂,最近在网上看到一些文章对apply方法和call的一些示例,总算是看的有点眉目了,在这里我做如下笔记,希望和大家 ...

  10. JavaScript apply使用

    call 和 apply 作用: 都是为了改变某个函数运行的context上下文而存在的,为了改变函数体内部 this的指向 JavaScript函数存在定义时上下文和运行时上下文, 上下文(cont ...

随机推荐

  1. js导出execl兼容ie Chrome Firefox各种主流浏览器(js export execl)

    第一种导出table布局的表格 <html> <head> <meta charset="utf-8"> <script type=&qu ...

  2. CodeVS 3415-最小和

    原题 题目描述 Description      小浣熊松松来到文具店,选择了K支自己喜欢的水彩笔,并抄下了它们的价格.可是到结算时,他发现自己抄价格时抄得太密集,以至于所有价格连成了一个数字串(你可 ...

  3. LIst去重,重写方法,继承接口。

    调用: ]).ToList(); var dic = dataThis.Distinct( new repDic()).ToList();var repList = ""; for ...

  4. mysql数据一致性检查及修复

    percona-toolkit-2.2.20-1.noarchmysql 5.6.29-logmaster:192.168.166.129slave:192.168.166.131 一.创建数据库校验 ...

  5. windows环境自动获取SVN仓库当前版本

    如果我们的软件能够自动引入SVN修订号(仓库版本号),那么我们开发软件的时候就能快速定位bug出自哪个SVN版本.那么如何让软件直接自动生成并引用SVN版本号呢? 我们可以使用SVN info命令,在 ...

  6. Tiny6410之MMU开启

    存储管理单元存储管理单元MMU概述 在ARM系统中,存储管理单元MMU主要完成以下工作:1.虚拟存储空间到物理存储空间的映射.在ARM中采用页式虚拟存储管理.他把虚拟地址空间分成一个个固定大小的块,每 ...

  7. PhpMyAdmin隐藏数据库设置同前缀失效的问题

    用PhpMyAdmin默认会把所有数据库都显示出来,一些如 MySQL,information_schema之类的也会显示,这样既不安全看着也不爽,隐藏掉最好. 修改 config.inc.php 或 ...

  8. CodeForces 687C The Values You Can Make

    $dp$,背包. $f[i][j][s]$表示前$i$个物品,凑出$j$价格的情况下,能否凑出$s$价格,$f[i][j][s]=1$表示能,否则不能. 转移很简单:如果$f[i][j][s]=1$, ...

  9. RSA算法记录----摘抄

    RSA算法原理(一)   "公钥加密算法". 因为它是计算机通信安全的基石,保证了加密数据不会被破解.你可以想象一下,信用卡交易被破解的后果. 进入正题之前,我先简单介绍一下,什么 ...

  10. Sipdroid实现SIP(三): 消息接收处理

    I. 注册回调 RegisterAgent类 在TransactionClient Fail/Success的回调中, 调用RegisterAgentListener的Register Fail/Su ...