一、call原理

1、使用JQuery的call功能

var add(c,d){
return this.a+this.b+c+d
}
var obj={a:1,b:2} add.Call(obj,3,4);
//结果: 10 观察:
var o={
  a:1,
b:2,
add:function(c,d){
    return this.a+this.b+c+d;
}
}
o.add(3,4);

2、原理分析

//先来看一下网上找的案例,建议跟着敲两边
var add(c,d){
return this.a+this.b+c+d
}
var obj={a:1,b:2}; Function.prototype.es6Call=function(context)
{
var context=context || window;
context.fn=this;
var args=[];
for (var i=1,len=arguments;i<len;i++){
args.push(arguments[i]);
}
return context.fn(...args);
} //调用
add.es6Call(obj,3,4); //结果:10

3、思考

在网上看到这样的一种语句
function fn1(){
console.log("这是FN1");
}
function fn2(){
console.log("这是FN2");
} //第一种:
fn1.es6Call(fn2); //结果: 这是FN1
分析:this本身指向的是fn1,fn1本身就是一个函数方法,那么就确定context.fn=fn1,所以无论是否有其他参数,那么都会执行fn1这个函数
//第二种:
fn1.es6Call.es6Call(fn2); //结果: 这是FN2
分析:在调试过程中,context 指向的是 fn2, 但是 context.fn=this(此时,this就是 fn1.es6Call)这句话,让context.fn(...args) 返回值为undefine,也就是说this=fn.es6Call只是指向Funtion.prototype.es6Call本身,仅仅表示对象 //有人会想,执行 fn1.es6Call().es6Call() //结果:报错

  

  

  

javascript 之 call,apply原理的更多相关文章

  1. JavaScript中new实现原理

    JavaScript中new实现原理 1.创建一个空对象 obj 2.将该对象 obj 的原型链 __proto__ 指向构造函数的原型 prototype, 并且在原型链 __proto__ 上设置 ...

  2. 由浅入深,带你用JavaScript实现响应式原理(Vue2、Vue3响应式原理)

    由浅入深,带你用JavaScript实现响应式原理 前言 为什么前端框架Vue能够做到响应式?当依赖数据发生变化时,会对页面进行自动更新,其原理还是在于对响应式数据的获取和设置进行了监听,一旦监听到数 ...

  3. javascript call与apply关键字的作用

    apply接受两个参数.第一个参数指定函数体内this对象的指向,第二个参数为一个带下标的集合. call则是apply的语法糖,如果参数数量固定,则可以不用带下标的集合传第二个参数. 1 2 3 4 ...

  4. JavaScript实现DDoS攻击原理,以及保护措施。

    DDos介绍 最普遍的攻击是对网站进行分布式拒绝服务(DDoS)攻击.在一个典型的DDoS攻击中,攻击者通过发送大量的数据到服务器,占用服务资源.从而达到阻止其他用户的访问. 如果黑客使用JavaSc ...

  5. JavaScript中的计时器原理

    理解John Resig 在 How JavaScript Timers Work. 原理分析 timer(setInterval,setTimeout)有一个很重要的概念,时间延迟的长短是不稳定的. ...

  6. 《JavaScript总结》apply、call和bind方法

    在JavaScript中,apply.call.bind这个三个方法,它们的作用都是为了改变某个函数运行时的上下文, 也就是改变函数体内的this指向. 在一个函数里,存在“定义时上下文”.“运行时上 ...

  7. javascript中call,apply,bind的用法对比分析

    这篇文章主要给大家对比分析了javascript中call,apply,bind三个函数的用法,非常的详细,这里推荐给小伙伴们.   关于call,apply,bind这三个函数的用法,是学习java ...

  8. JavaScript定时器的工作原理(翻译)

    JavaScript定时器的工作原理(翻译) 标签(空格分隔): JavaScript定时器 最近在看ajax原理的时候,看到了一篇国外的文章,讲解了JavaScript定时器的工作原理,帮助我很好的 ...

  9. JavaScript 中 this 的原理

    一.问题 学习 JavaScript 其中一个标志就是理解下面两种写法,会输出有不一样的结果. var obj = { foo: function () {} }; var foo = obj.foo ...

随机推荐

  1. Spring 接口日志 AOP

    接口日志记录AOP实现-LogAspect - 91博客it技术开发者 - 博客园https://www.cnblogs.com/007sx/p/5810818.html Spring AOP(一) ...

  2. linux内核是在哪里创建1号进程的?

    1. 请看rest_init的完整代码(不看也没关系,内核版本为5.2, init/main.c) noinline void __ref rest_init(void) { struct task_ ...

  3. 将移远通信的EC20驱动移植到NUC972上(转)

    源: 将移远通信的EC20驱动移植到NUC972上

  4. typescript装饰器 方法装饰器 方法参数装饰器 装饰器的执行顺序

    /* 装饰器:装饰器是一种特殊类型的声明,它能够被附加到类声明,方法,属性或参数上,可以修改类的行为. 通俗的讲装饰器就是一个方法,可以注入到类.方法.属性参数上来扩展类.属性.方法.参数的功能. 常 ...

  5. openresty开发系列29--openresty中发起http请求

    openresty开发系列29--openresty中发起http请求 有些场景是需要nginx在进行请求转发 用户浏览器请求url访问到nginx服务器,但此请求业务需要再次请求其他业务:如用户请求 ...

  6. 1. Tomcat之startup.sh

    #判断操作系统os400=falsecase "`uname`" inOS400*) os400=true;;esac # 取脚本名称PRG="$0" # 判断 ...

  7. jsp、freemarker、velocity、thymeleaf

    1.概述在java领域,表现层技术主要有三种, (1)jsp; (2)freemarker; (3)velocity; (4)thymeleaf; 2.jsp优点: 1.功能强大,可以写java代码 ...

  8. 【Mybatis】MyBatis之Generator自动生成代码(九)

    MyBatis Generator 简介 MyBatis Generator 连接数据库表并生成MyBatis或iBatis文件.这有助于最大限度地减少使用MyBatis时为数据库文件创建简单CRUD ...

  9. django项目mysite

    项目建立 建立项目mysite 各文件和目录解释: 外层的mysite/目录与Django无关,只是你项目的容器,可以任意重命名. manage.py:一个命令行工具,用于与Django进行不同方式的 ...

  10. PBU流速权

    PBU概念 PBU是“Participant Business Unit”的英文缩写,中文全称是“参与者交易业务单元”. 在新版交易规则中对此有定义:“参与者交易业务单元”是指交易参与人据此参与本所证 ...