js中call和apply的作用和用法
call和apply的用途是完全一样的。改变函数中this的指向:
为什么要改变this的指向呢?这个有什么用?有哪些场景呢?
首先this的指向总是在变的,this的指向是由函数执行时所在的环境决定的,而不是函数声明时的环境。
this都指向哪里?
1、在控制台中输入下面的代码,此时可以看到this指向a这个对象。
var a={
name:'a',
getName:function(){
return this.name;
}
}
console.info(a.getName());//a
2、此时this指向了window
window.name= 'window';
var a={
name:'a',
getName:function(){
return this.name;
}
} var b = a.getName;
console.info(b());//window
结论:
如果函数是作为一个对象的属性被调用的(用点的方式调用),此时函数内的this就指向这个对象。
如果是用变量或者名称的方式直接调用的(不是使用点调用),则指向window。
场景:
this的改变:在写代码时经常会遇到这种情况,将函数作为回调函数使用时,this的指向变为了window,这个不是我们预期的结果
window.name='window';
var a={
name:'a',
getName:function(callback){
return callback();//funcB使用非对象.的方式调用
},
funcB:function(){
return this.name;
}
}
console.info(a.getName(a.funcB));//window
这个时候就可以用call或者apply把this传递到callback中,callback中的this的指向就会被传入的this所替代。
当然,也可以传入其他对象覆盖当前this的指向。
window.name='window';
var b={
name:'b'
};
var a={
name:'a',
getName:function(callback){
return callback.call(b);//传入b
},
funcB:function(){
return this.name;
}
}
console.info(a.getName(a.funcB));//b
也可以借用这个对象的方法。
window.name='window';
var b={
name:'b',
getBName:function(){
return this.name;
}
};
var a={
name:'a',
getName:function(callback){
return callback.call(b);//传入b
},
funcB:function(){
return this.getBName();
}
}
console.info(a.getName(a.funcB));//b
使用这个功能可以实现类似继承的效果
var F=function(name){
this.name = name;
}
var S = function(){
this.age=arguments[];
F.apply(this,arguments);
}
S.prototype.getNameAndAge=function(){
console.info('名字是'+this.name+'年龄是'+this.age);
}
var s = new S('小红','9岁');
s.getNameAndAge();//名字是小红年龄是9岁
call和apply的区别:
传入的参数形式不一样
call(obj,参数1,参数2);
apply(obj,[参数1,参数2]);
js中call和apply的作用和用法的更多相关文章
- js中call、apply、bind的用法
原文链接:http://www.cnblogs.com/xljzlw/p/3775162.html var zlw = { name: "zlw", sayHello: funct ...
- JS中call()、apply()、bind()的用法
其实是一个很简单的东西,认真看十分钟就从一脸懵B 到完全 理解! 先看明白下面: 例1 obj.objAge; //17 obj.myFun() //小张年龄undefined 例2 shows( ...
- asp.net类似于js中的setTimeOut()的函数作用?
asp.net类似于js中的setTimeOut()的函数作用? 插入这行即可,定时2秒,再运行下一步: System.Threading.Thread.Sleep(); 加个随机数 Random r ...
- js中call和apply的实现原理
js中call和apply的实现原理 实现call的思路: /* 还有就是call方法是放在Function().prototype上的也就是构造函数才有的call方法 (我门可 ...
- js中哈希表的几种用法总结
本篇文章只要是对js中哈希表的几种用法进行了总结介绍,需要的朋友可以过来参考下,希望对大家有所帮助 1. <html> <head> <script type=" ...
- JS中 call() 与apply 方法
1.方法定义 call方法: 语法:call([thisObj[,arg1[, arg2[, [,.argN]]]]]) 定义:调用一个对象的一个方法,以另一个对象替换当前对象. 说明: call ...
- JS中call和apply
作用: 替换当前对象的方法中的this. 理解: call和apply是为了动态改变this出现的,当一个object没有某个方法,但是其他的有,我们可以借助call或apply用其它对象的方法来操作 ...
- js中call、apply、bind那些事
前言 回想起之前的一些面试,几乎每次都会问到一个js中关于call.apply.bind的问题,比如- 怎么利用call.apply来求一个数组中最大或者最小值 如何利用call.apply来做继承 ...
- js中的call,apply,bind区别
在JavaScript中,call.apply和bind是Function对象自带的三个方法,这三个方法的主要作用是改变函数中的this指向. call.apply.bind方法的共同点和区别:app ...
随机推荐
- 利用 Windows API Code Pack 修改音乐的 ID3 信息
朋友由于抠门 SD 卡买小了,结果音乐太多放不下,又不舍得再买新卡,不得已决定重新转码,把音乐码率压低一点,牺牲点音质来换空间(用某些人的话说,反正不是搞音乐的,听不出差别)… 结果千千静听(百度音乐 ...
- What's news in Visual Studio 2017
文字总结: 1.高级智能提示 在属性列表中输入 M C即可查询属性中包含字母m\c的属性 2.更快的导航查询,在Go To All中输入任意查询的字符,可快速查到任何包含关键字的文件 3.代码智能分 ...
- python之squid实现免费 IP代理 (windows win7 单机 本机 本地 正向代理 区分 HTTPS)
0.目录 1.思路2.windows安装3.相关命令行4.简单配置和初步使用5.问题:squid是否支持HTTPS6.问题:配置多个代理条目,相同ip不同port报错7.问题:根据代理请求区分HTTP ...
- bat处理复制文件
1.建bat文件自动执行复制,删除命令. 复制cd.dll文件至windows\system32的bat文件内容: @echo offset JtlDir=D:\apache-jmeter-3.0\t ...
- DataFrames和Kudu
Kudu为Kudu表提供了一个自定义的原生数据源.可以和DataFrame API紧密集成: 使用DataFrame的好处就是可以从很多的数据源创建dataframe,包括现有的RDD,Hive表或S ...
- FastJson 支持配置的PropertyNamingStrategy四种策略
摘要: FastJson默认使用CamelCase,在1.2.15版本之后,FastJson支持配置PropertyNamingStrategy,支持四种策略: CamelCase.PascalCas ...
- BZOJ3926 [Zjoi2015]诸神眷顾的幻想乡 字符串 SAM
原文链接https://www.cnblogs.com/zhouzhendong/p/BZOJ3926.html 题目传送门 - BZOJ3926 题意 给定一个有 $n$ 个节点,最多只有 $20$ ...
- Codeforces Gym100783H 最短路 其他
原文链接https://www.cnblogs.com/zhouzhendong/p/CF-Gym100783H.html 题目传送门 - CF-Gym100783H 题意 给定一个 $n$ 个节点 ...
- AtCoder Regular Contest 080 (ARC080) E - Young Maids 线段树 堆
原文链接http://www.cnblogs.com/zhouzhendong/p/8934377.html 题目传送门 - ARC080 E - Young Maids 题意 给定一个长度为$n$的 ...
- Clairewd’s message ekmp
给两个串第一个串是翻译表(密文可以通过翻译表翻译成明文),第二个串是由密文+明文组成,前面是密文(完整的),后面是明文(未必完整),问能不能把第二个串补全,输出最短的一种可能. 一开始 用的strin ...