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 ...
随机推荐
- TMCache
TMCache设计的目的是用于存储临时持久化对象的开源iOS/OS key/value缓存类库,减少重复创建像下载数据.缓慢的处理结果这样的昂贵性能花销.TMCache由两个本身相似的存储组成,一个 ...
- SpringMVC @ResponseStatus 的用法
@ResponseStatus 用于修饰一个类或者一个方法,修饰一个类的时候,一般修饰的是一个异常类,如下, 声明一个异常类在类上面加上ResponseStatus注解,就表明,在系统运行期间,抛出A ...
- 深入.NET平台和C#编程
第一章 深入.NET框架 1.Microsoft.NET框架概述: 1).NET介绍 2)为什么需要.NET框架 通过如下两个问题说明为什么需要.NET框架 01,C#程序可以再不同平台(PDA,P ...
- python学习——DAY1
日期:20170113 一.个人体会: 零基础学python,是艰辛的,需要付出和坚持. 关于流程图.我最开始画的是从上到下,再从左到右,画了很多重复的内容,单线程的流程图,看起来很容易理解,但是自己 ...
- express mongoose 新手上路 问题记录
1.npm start启动报错,提示端口占用 app.js中添加了app.listen(3000),删掉即可 2.跳转到html页面 //ejs改为html app.engine('.html', r ...
- 关于angularjs+typeahead的整合
和angularjs-xeditable的基本相似,主要区别在于前者用于普通input中,后者用于xeditable中 在angularjs-xeditable需要自动提示的地方要用e-uib-typ ...
- jQuery中操作Ajax方法小结
有时候,越深入去了解一个点,越发觉得自己无知,而之前当自己晓得一两个片面的点还洋洋自得,殊不知,这是多么讽刺 jQery对Ajax操作进行了封装,常见的 ajax()属于最底层的方法,使用频率很高的 ...
- 2016NOMS全国运营峰会——史上更强嘉宾阵容提前揭晓!
参加2016NOMS全国运营峰会的演讲嘉宾来自运营领域的各个方面,包括用户运营.内容运营.活动运营.数据运营等.自大会消息一出立刻受到业界的广泛关注,并吸引了众多业内人士踊跃报名.日前,这一运营界峰会 ...
- docker容器安全
title: docker容器安全 tags: Docker,容器,安全策略 grammar_cjkRuby: true --- Docker容器的安全性 1.安全策略-Cgroup 1.限制Cpu ...
- 等比缩放之自适应神器——css3的rem
1.rem简介 rem是CSS3中新增加的一个单位值,他和em单位一样,都是一个相对单位.不同的是em是相对于元素的父元素的font-size进行计算:rem是相对于根元素html的font-si ...