javascript apply()和call()
原文链接 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); //运行结果见上面绿色的注释!!!!
执行结果与下面的相同:
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()的更多相关文章
- JavaScript apply函数小案例
//回调函数1 function callback(a,b,c) { alert(a+b+c); } //回调函数2 function callback2(a,b) { alert(a+b); } / ...
- javascript:apply方法 以及和call的区别 (转载)
javascript:apply方法 1. apply和call的区别在哪里 2. 什么情况下用apply,什么情况下用call 3. apply的其他巧 ...
- JavaScript apply
https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Function/apply The ...
- 深入学习JavaScript: apply 方法 详解(转)——非常好
主要我是要解决一下几个问题: 1. apply和call的区别在哪里 2. 什么情况下用apply,什么情况下用call 3. apply的其他巧妙用法(一般 ...
- [每天解决一问题系列 - 0001] Javascript apply和 call对比
相同点: 每个函数都包含这两个原生的方法 他们两个的效果是一样的,用于在特定的作用域下执行函数,本质上是设置函数内this对象的值. 不同点: 传入的参数类型不同 . apply(函数作用域,arra ...
- javascript:apply方法
1. apply和call的区别在哪里 2. 什么情况下用apply,什么情况下用call 3. apply的其他巧妙用法(一般在什么情况下可以使用apply ...
- JavaScript: apply 方法 详解(转)——非常好
转载自 http://www.cnblogs.com/KeenLeung/archive/2012/11/19/2778229.html 我在一开始看到javascript的函数apply和call ...
- 深入学习JavaScript: apply 方法 详解
我在一开始看到javascript的函数apply和call时,非常的模糊,看也看不懂,最近在网上看到一些文章对apply方法和call的一些示例,总算是看的有点眉目了,在这里我做如下笔记,希望和大家 ...
- JavaScript: apply , call 方法
我在一开始看到javascript的函数apply和call时,非常的模糊,看也看不懂,最近在网上看到一些文章对apply方法和call的一些示例,总算是看的有点眉目了,在这里我做如下笔记,希望和大家 ...
- JavaScript apply使用
call 和 apply 作用: 都是为了改变某个函数运行的context上下文而存在的,为了改变函数体内部 this的指向 JavaScript函数存在定义时上下文和运行时上下文, 上下文(cont ...
随机推荐
- 清浮动,防止上下margin重叠(浏览器顶部空白崩溃)
清浮动 父级添加类别! .clearfix{zoom:1;//兼容ie6,7} .clearfix:after{ content:"."; display: "block ...
- tomcat6.0的安装
这里我比较推荐用安装版,因为解压版需要配置很多环境变量,没那么方便. 双击安装包 选择安装目录,next 这里选择之前安装好的jdk的jre目录 安装完后,检查是否安装完成 打开安装程序 进入bin目 ...
- Storm 1.0.0
Storm 1.0.0版本增加了很多新的特性,可用性以及性能也得到了很大的改善,该版本是Storm发展历程上一个里程碑式的版本,主要特点如下. 性能提升 Storm 1.0.0版本最大的亮点就是性能提 ...
- Ubuntu中Qt+opencv图像显示
先抛出一个疑问,知道的希望留言解答下 (创建Application->Qt Console Application,代码与下面2.3一样,运行有时会显示图片,但大多数不显示,为什么?) 1.打开 ...
- C++内存池
内存池是一种内存分配方式.通常我们习惯直接使用new.malloc等API申请分配内存,这样做的缺点在于:由于所申请内存块的大小不定,当频繁使用时会造成大量的内存碎片.并由于频繁的分配和回收内存会降低 ...
- bat脚本-set(setlocal enabledelayedexpansion) 学习
设置本地为延迟扩展.其实也就是:延迟变量,全称延迟环境变量扩展. 事件一: @echo off set a=4 set a=5&echo %a% pause 解说:为什么是4而不是5呢?在ec ...
- 拿来之笔 希望铭记 笔记 出处 http://www.jianshu.com/p/acb8885283dc
最近有机会对不同岗位的应聘者进行面试,其中有架构师.技术经理.开发岗位.谈谈几个印象深刻的. 面试者一,女性.重点大学硕士,从事软件技术工作十四年,应聘架构师岗位.按照套路问了下对于软件架构的认识和理 ...
- CodeForces 670C Cinema
简单题. 统计一下懂每种语言的人分别有几个,然后$O(n)$扫一遍电影就可以得到答案了. #pragma comment(linker, "/STACK:1024000000,1024000 ...
- document对象相关的几个常用的方法
方法 描述 var newP=createElement("p"); 创建了一个p标签,p也可替换为div,span等 var oldTxt=createTextNode(&qu ...
- 图片上传插件用法,JS语法【三】
注意点: 作为文件域(<input type="file">)必须要有name属性,如果没有name属性,上传之后服务器是获取不到图片的.如:正确的写法是<inp ...