首先说下call的本质是一个函数

模仿

Function.prototype.call = function(context){
  // this表示某函数,函数里面的this先被替换成context,然后再执行
  this.bind(context)();
}

然后理解这个


Function.prototype.call.call(context);
// 相当于
this.bind(context)();
// this指Function.prototype.call,于是相当于
Function.prototype.call.bind(context)();
// 因为Function.prototype.call这个函数里面的this变成了context
context.bind(context)();

然后再理解理解这个

Function.prototype.call.call.call(context);
// 相当于
this.bind(context)();// this指Function.prototype.call.call,因为call本身就是函数,而任何函数的call属性相当于Function.prototype.call,也就是Function.prototype.call.call = Function.prototype.call,然后this实际还是指Function.prototype.call,重复上面的说
 Function.prototype.call.bind(context)(); 

// 因为Function.prototype.call这个函数里面的this变成了context 

context.bind(context)(); 

然后,看一个demo:

function fn1(){
  console.log(1)
}
function fn2(){
  console.log(2)
}
// Function.prototype.call(fn2);this指当前的实例fn1,fn1里面的this是fn2
fn1.call(fn2);
// Function.prototype.call.call(fn2);this指Function.prototype.call,Function.prototype.call里面的this是fn2
fn1.call.call(fn2);
// 相当于
fn2();
//其实只要超过一个call,都是fn2()

所以call函数执行,主要看call函数里面的this指哪个函数,这个函数自己里面的this换成指定context,然后执行

说另外一个好玩的,call可以改变函数的this的值,但在非严格模式下,fn.call(),fn.call(null),fn.call(undefined),这些写法将this的值指向window,严格模式下,指啥是啥

var obj = {
fn:function(){
console.log(this)
}
}
var n = {
name:"hua"
}
obj.fn.call(null); // window
obj.fn(); // obj

call的初步理解的更多相关文章

  1. javascript 原型及原型链的初步理解

    最近折腾了好久,终于是把js里面的原型和原型链做了个初步的理解: 在这里,我打个比喻: 我(child),我妈constructor(构造函数)生了我:别人问我老妈跟谁生的我,于是此时我妈会指向我爸爸 ...

  2. Spring学习笔记--环境搭建和初步理解IOC

    Spring框架是一个轻量级的框架,不依赖容器就能够运行,像重量级的框架EJB框架就必须运行在JBoss等支持EJB的容器中,核心思想是IOC,AOP,Spring能够协同Struts,hiberna ...

  3. Graph Cuts初步理解

    一些知识点的初步理解_8(Graph Cuts,ing...) Graph cuts是一种十分有用和流行的能量优化算法,在计算机视觉领域普遍应用于前背景分割(Image segmentation).立 ...

  4. 非常易于理解‘类'与'对象’ 间 属性 引用关系,暨《Python 中的引用和类属性的初步理解》读后感

    关键字:名称,名称空间,引用,指针,指针类型的指针(即指向指针的指针) 我读完后的理解总结: 1. 我们知道,python中的变量的赋值操作,变量其实就是一个名称name,赋值就是将name引用到一个 ...

  5. springBoot(1)---springboot初步理解

    springboot初步理解 在没有用SpringBoot之前,我们用spring和springMVC框架,但是你要做很多比如: (1)配置web.xml,加载spring和spring mvc 2) ...

  6. Mysql加锁过程详解(7)-初步理解MySQL的gap锁

    Mysql加锁过程详解(1)-基本知识 Mysql加锁过程详解(2)-关于mysql 幻读理解 Mysql加锁过程详解(3)-关于mysql 幻读理解 Mysql加锁过程详解(4)-select fo ...

  7. 关于THINKPHP5模型关联的初步理解

    初步理解的意思是,使用最常用的关联模型,然后可以正常运行 还是打个比方 文章表  和文章分类表 一个文章分类可以有多个文章  所以  文章分类模型和文章建立 hasMany的关联 而文章和文章分类表则 ...

  8. spfa+差分约束系统(C - House Man HDU - 3440 )+对差分约束系统的初步理解

    题目链接:https://cn.vjudge.net/contest/276233#problem/C 题目大意:有n层楼,给你每个楼的高度,和这个人单次的最大跳跃距离m,两个楼之间的距离最小是1,但 ...

  9. Android-自定义控件-继承View与ViewGroup的初步理解

    继承View需要走的流程是: 1.构造实例化, public ChildView(Context context, @Nullable AttributeSet attrs) 2.测量自身的高和宽on ...

  10. 初步理解IOC和DI和AOP模式

    初步理解IOC和DI和AOP模式 控制反转(IOC) 控制反转(IOC,Inversion of Control)是一种转主动为被动关系的一种编程模式,有点类似于工厂模式,举个栗子, 下面这个这不是I ...

随机推荐

  1. Mysql删除数据后磁盘空间未释放的解决办法【转】

    转自 Mysql删除数据后,磁盘空间未释放的解决办法 - 今日头条(TouTiao.com)http://toutiao.com/a6303087712678412546/?tt_from=mobil ...

  2. Struts2 程序步骤

    1. 新建一个web project, 手动导入包: D:\Java\jar\struts-2.3.24.1\apps\struts2-blank\WEB-INF\lib copy到 WEB-INF/ ...

  3. C#编写Windows服务程序图文教程

    安装服务程序C:\WINDOWS\Microsoft.NET\Framework\v4.0.30319\InstallUtil.exe  要安装的服务程序路径(如F:\***.exe)卸载服务程序C: ...

  4. 素数路(prime)

    素数路(prime) 题目描述 已知一个四位的素数,要求每次修改其中的一位,并且要保证修改的结果还是一个素数,还不能出现前导零.你要找到一个修改数最少的方案,得到我们所需要的素数. 例如把1033变到 ...

  5. 填写信息的文章区域text_area

    <!DOCTYPE html><html> <head> <meta charset="utf-8"> <title>& ...

  6. Struts2.3.16日志(中)

    Result Configuration --Result 配置 当一个操作类方法完成后,它将返回一个字符串.字符串的值是用来选择一个元素的结果.一个操作映射的结果往往会有一组代表不同的可能的结果.一 ...

  7. sql server 日期转换函数 convert()

    --内容来自:http://hi.baidu.com/muqingz/item/8fb7b3ca8a485b0cac092f7b Select CONVERT(varchar(100), GETDAT ...

  8. js优化原则

    首先,与其他语言不同,JS的效率很大程度是取决于JS engine的效率.除了引擎实现的优劣外,引擎自己也会为一些特殊的代码模式采取一些优化的策略.例如FF.Opera和Safari的JS引擎,都对字 ...

  9. how to enable #ifdef macro in the command line of make?

    Compilers normally use the -D flags eg Code: test.o: test.cpp $(CC) $(CFLAGS) -DTEST1 test.cpp -o $@

  10. 【HighCharts系列教程】十、图例属性——legend

    一.legend属性说明 Legend是HighCharts图表的图例属性,如图 默认情况下,HighCharts都会有图例,无特殊情况,默认即可满足需求,所以一般不用配置Legend属性. 二.la ...