首先说下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. zepto学习之路--核心函数$()的实现

    $()可以说是jquery的精华了,为dom操作带来了极大的灵活和方便.zepto号称“移动版的jquery”,那么它是怎么来实现这个核心函数呢?我们来详细探讨下. 1.首先,我们看下zepto中它是 ...

  2. cordova插件开发-1

    这是初级编,实现了js调用Android代码 首先需要编写java代码: public class AppUpdate extends CordovaPlugin { @Override public ...

  3. bat脚本:自动压缩n天前的文件【转载】

    原文如下: bat脚本:自动压缩n天前的文件-中原小伙-ChinaUnix博客http://blog.chinaunix.net/uid-24946452-id-1651762.html     磁盘 ...

  4. 后台前台json传递数据的方式两种方式 $.get, $.getJSON

    第一种getJSON方式: 前台调用: <td><input type="text" class="t" id="edutitle& ...

  5. Android系统权限及签名

    Android系统权限及签名   2015-03-23 19:13:33CSDN-chen52671-点击数:50     Android权限及签名 引子 现象:系统中的一个定制Service,服务是 ...

  6. linux下libreoffice安装测试

    一.Linux安装 wget http://download.documentfoundation.org/libreoffice/stable/4.4.6/rpm/x86_64/LibreOffic ...

  7. 消除SDK更新时的“https://dl-ssl.google.com refused”异常--(转)

    SDK更新时的“https://dl-ssl.google.com refused”错误 Download interrupted: hostname in certificate didn't ma ...

  8. brbustoj 1818 石子合并问题--直线版

    比较经典且基础的区间dp,转移方程为 dp_max[i][j] = max(dp_max[i][j],dp_max[i][k] + dp_max[k+1][j] + sum[j]-sum[i-1]); ...

  9. Sping中的IOC四种注解的简单记录

    @Component 通用注解,不推荐使用,要用的话,任何类的头上都能使用,但是这个类到底是干嘛用得就不知道了. @Controller 控制层使用,也就是MVC中的C,主要的时候使用的时候注意配合@ ...

  10. Selenium IDE安装

    1. 网上下载firefox30版本 http://www.9ht.com/xz/78637.html#addressWrap Selenium IDE 2.9.0下载   http://www.pc ...