javascript 之 call,apply原理

浅浅的花香味﹌ 2023-08-17 15:17 92阅读 0赞

一、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()   //结果：报错

转载于:https://www.cnblogs.com/zmztya/p/11340584.html

发表评论取消回复

表情：

评论列表（有 0 条评论，92人围观）

还没有评论，来说两句吧...

相关阅读

相关 javascript 之 call,apply原理

一、call原理 1、使用JQuery的call功能 var add(c,d){ return this.a+this.b+c+d }

浅浅的花香味﹌/ 2023年08月17日 15:17/ 0 赞/ 93 阅读

相关 javascript引擎工作原理

javascript引擎工作原理 1. 什么是JavaScript解析引擎？　　简单地说，JavaScript解析引擎就是能够“读懂”JavaScript代码

深藏阁楼爱情的钟/ 2023年07月09日 02:26/ 0 赞/ 1 阅读

相关 JavaScript动画基本原理

JavaScript动画基本原理在现在做页面很多时候都会用上动画效果。比如下拉菜单，侧边搜索栏，层的弹出与关闭等等。通常我们实现这些动画效果可以采用 JavaScr

小咪咪/ 2022年08月23日 00:51/ 0 赞/ 136 阅读

相关 javascript动态创建元素原理之节点操作

来源：[javascript动态创建元素原理之节点操作][javascript] 对于一个好的页面，为了让用户体验做到极致，动态创建页面元素是必不可少的。下面就来讲讲动态创建

阳光穿透心脏的1/2处/ 2022年08月06日 02:10/ 0 赞/ 167 阅读

相关浅析 JavaScript 执行原理

JavaScript 从定义到执行，JS引擎在实现层做了很多初始化工作，因此在学习 JS 引擎工作机制之前，我们需要引入几个相关的概念：执行环境栈、全局对象、执行环境、变量对象

水深无声/ 2022年06月03日 04:25/ 0 赞/ 240 阅读

相关 javascript的堆栈原理

首先说明一下Javascript的堆栈概念堆&栈两者都是存放临时数据的地方。栈是先进后出的，就像一个桶，后进去的先出来，它下面本来有的东西要等其他出来

た入场券/ 2022年05月31日 00:30/ 0 赞/ 172 阅读

相关 JavaScript 的 this 原理

一、问题的由来学懂 JavaScript 语言，一个标志就是理解下面两种写法，可能有不一样的结果。 var obj = { foo: functi

小咪咪/ 2022年05月19日 09:37/ 0 赞/ 186 阅读

相关深入Javascript原理

> call、apply、bind、new、instanceof 实现原理 call 模拟实现 > 更改函数的 this 指向并执行函数。 Function.

刺骨的言语ヽ痛彻心扉/ 2022年05月01日 13:56/ 0 赞/ 139 阅读

相关 JavaScript 跨域原理

1. 同源与跨域 1.1 基调一般情况下，禁止一个域从另一个域读取数据，却可以使用某些从其他域拿到的资源。比如说，允许一个域执行、渲染、应用从其他域获取到的脚本、

骑猪看日落/ 2021年09月15日 08:30/ 0 赞/ 368 阅读

相关 JavaScript 异步操作原理

JavaScript 异步操作原理与异步操作对应的是同步操作。所谓同步操作，就是同一时刻只能做一件事情，如果要多件事情需要处理，需要排队。异步操作是同一时刻能够做...

小灰灰/ 2020年06月01日 13:03/ 0 赞/ 736 阅读