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的作用和用法的更多相关文章

  1. js中call、apply、bind的用法

    原文链接:http://www.cnblogs.com/xljzlw/p/3775162.html var zlw = { name: "zlw", sayHello: funct ...

  2. JS中call()、apply()、bind()的用法

    其实是一个很简单的东西,认真看十分钟就从一脸懵B 到完全 理解! 先看明白下面: 例1 obj.objAge;  //17 obj.myFun()  //小张年龄undefined 例2 shows( ...

  3. asp.net类似于js中的setTimeOut()的函数作用?

    asp.net类似于js中的setTimeOut()的函数作用? 插入这行即可,定时2秒,再运行下一步: System.Threading.Thread.Sleep(); 加个随机数 Random r ...

  4. js中call和apply的实现原理

    js中call和apply的实现原理            实现call的思路: /* 还有就是call方法是放在Function().prototype上的也就是构造函数才有的call方法 (我门可 ...

  5. js中哈希表的几种用法总结

    本篇文章只要是对js中哈希表的几种用法进行了总结介绍,需要的朋友可以过来参考下,希望对大家有所帮助 1. <html> <head> <script type=" ...

  6. JS中 call() 与apply 方法

    1.方法定义 call方法: 语法:call([thisObj[,arg1[, arg2[,   [,.argN]]]]]) 定义:调用一个对象的一个方法,以另一个对象替换当前对象. 说明: call ...

  7. JS中call和apply

    作用: 替换当前对象的方法中的this. 理解: call和apply是为了动态改变this出现的,当一个object没有某个方法,但是其他的有,我们可以借助call或apply用其它对象的方法来操作 ...

  8. js中call、apply、bind那些事

    前言 回想起之前的一些面试,几乎每次都会问到一个js中关于call.apply.bind的问题,比如- 怎么利用call.apply来求一个数组中最大或者最小值 如何利用call.apply来做继承 ...

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

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

随机推荐

  1. Centos7编译安装GCC7.2

    通常编译的时候可能需要新版本的gcc,本文就说明下基于低版本的gcc升级为gcc7.2 wget 'http://mirrors-usa.go-parts.com/gcc/releases/gcc-7 ...

  2. 【AtCoder】ARC076

    ARC076 C - Reconciled? 如果\(N = M\) 答案是\(2N!M!\) 如果\(|N - M| = 1\) 答案是\(N!M!\) 否则答案是0 #include <bi ...

  3. spring cloud (一、服务注册demo_eureka)

    首先我的博客记理论知识很少,大家对spring boot.spring cloud  .分布式 .微服务什么的一点概念都没有的还请先去百度看看理论,知道了是做什么用的,然后再写下demo ,这样学起来 ...

  4. TCP/UDP 协议,和 HTTP、FTP、SMTP,区别及应用场景

    一.OSI 模型 OSI 模型主要作为一个通用模型来做理论分析,而TCP/IP 协议模型是互联网的实际通讯协议,两者一般做映射分析,以下不做严格区分和声明(好吧,比较懒): OSI 整个模型层次大致可 ...

  5. 026 UI调试

    读了这篇文档,感觉蛮好玩的.粘贴一下链接: http://www.cnblogs.com/Wayou/p/chrome-console-tips-and-tricks.html

  6. 2018-03-11 20165235祁瑛《Java程序设计》第二周学习总结

    2018-03-11 20165235祁瑛<Java程序设计>第二周学习总结 教材学习内容总结 第二章要点: 在这一章中我学到了很多东西: (1)布尔类型boolean,布尔类型的赋值只能 ...

  7. JavaEE 之 Mybatis

    1.Mybatis a.定义:MyBatis 是支持普通 SQL查询,存储过程和高级映射的优秀持久层框架 b.步骤: ①在src下创建 SqlMapConfig.xml 及 datasource.pr ...

  8. Tree Reconstruction Gym - 101911G(构造)

    ---恢复内容开始--- Monocarp has drawn a tree (an undirected connected acyclic graph) and then has given ea ...

  9. poj 1966(求点连通度,边连通度的一类方法)

    题目链接:http://poj.org/problem?id=1966 思路:从网上找了一下大牛对于这类问题的总结:图的连通度问题是指:在图中删去部分元素(点或边),使得图中指定的两个点s和t不连通  ...

  10. HDU 1022 火车进站【栈】

     题目链接:http://acm.hdu.edu.cn/showproblem.php?pid=1022 题目大意: 题目大概意思:有N辆火车,以序列1方式进站,判断是否能以序列2方式出栈.进站不一定 ...