简单刨析JS中Call()的执行原理

最新推荐文章于 2022-10-14 00:07:52 发布
最新推荐文章于 2022-10-14 00:07:52 发布
阅读量269 收藏
点赞数
分类专栏： 实战项目 文章标签： js es6/es7 es6 javascript 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_47724586/article/details/107991505
版权

简单刨析JS中Call()的执行原理

最近发现许多同学反映对于call这个函数的理解总是一头雾水，其实如果简单梳理call的执行思路，就会发现，其实并不是那么晦涩难懂，在这篇文章中，会用最能让人理解的"人话"，帮助大家理解这个函数，但是注意，这并不等于我在刨析call的源码。
首先我们要明白，call的作用是什么，其实很简单，就是把调用call方法的对象所传递的形参变成方法的this，熟读一下三句话就能明白了:
// 把当前调用的对象以类似属性名的方式放在参数中
// 谁调用，this就是谁，所以参数反客为主成为this，并且执行调用者
// 执行后把调用者删除
// delete obj.fn;
如下图所示:
在这里插入图片描述
！！谨记，如果出现两个及以上的call，最后就会让传进去的实参执行
类似这种:
在这里插入图片描述

胖达爱打代码
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
利用javascript中的call实现继承
10-31
在JavaScript中，`call`和`apply`方法是两种非常重要的函数调用方式，它们允许我们改变函数执行时的上下文（即`this`的指向）以及传递参数。在这里，我们将详细讨论如何利用`call`实现继承，并结合提供的代码示例...
js中apply与call简单用法详解
11-30
call, apply都属于Function.prototype的一个方法,它是JavaScript引擎内在实现的,因为属于Function.prototype,所以每个Function对象实例,也就是每个方法都有call, apply属性.既然作为方法的属性,那它们的使用就当然是...
js call原理，apply原理
sstraybird的专栏
10-14 169
js call 和 apply原理
js中call方法的原理
平平无奇小码农的博客
09-14 205
内部实现： Function.prototype.myCall = function(param) { // 这个this就是调用myCall函数的，在这里是fun函数 if(typeof this !== 'function'){ return new TypeError('Not a Function'); } param = param || window; param.fn = this; // arguments是类数组，用Array.from()转一下 let arg
深度解析 JavaScript 中call方法原理
qq_44410862的博客
11-19 2041
一丶深度解析 JavaScript 中call方法原理 call 方法是 Function 类原型上的一个公共方法，我们知道所有的函数都是 Function 类的一个实例(对象)，当然，call函数本身也是Function类的一个实例。 任何一个函数都可以调用call方法，包括call方法本身。函数调用call方法时，是把函数作为Function的实例也就是对象身份的。 function fn1() {} console.log(Function.prototype.call.__proto__ === F
js-函数的call方法原理是怎样的
inksnowHL的博客
09-08 129
注意，这里只是去演示原理，实际上，这个call方法内部实现方式可能会有细微差别，但原理就是这个样子。 // 直接在Function的原型上添加 Function.prototype.callfunc = function (context) { // 按照js函数接收参数的规则，这个context就是第一个传入的参数 // 也就是传入的要作为this 的对象 不传入，就是window var content = context || window
【面试需要】掌握JavaScript中的this，call，apply的原理
程序员哆啦A梦，蓝胖子
01-10 1292
作者 | Jeskson 掘金 | https://juejin.im/user/5a16e1f3f265da43128096cb 2020年01月10日 前言，为什么要学习在掌握JavaScript中的this，call，apply，因为面试官会问啊！所以我们 必须掌握才能答啊!那么this是什么，Function.prototype.call和 Function.prot...
javascript中call()、apply()的区别
10-17
主要介绍了javascript中call()、apply()的区别，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
javascript中call和apply方法浅谈
10-26
我们可以将call和apply看做是某个对象的方法，通过调用方法的形式来间接调用函数
JavaScript call函数原理
huahuahua__的博客
03-15 423
Function.prototype.fakeCall = function (context) { var content = context || window; context.fn = this; //保存函数 var args = [...argements].slice(1); var result = content.f...
js中的call、apply和bind函数实现的原理
时清云的博客
07-20 1561
有空的时候都会看一下掘金社区，里面的文章都很棒，也学到了很多，其实我写博客主要是让自己记个笔记，俗话说好记性不如个烂笔头，有时候会忘记，所以遇到解决问题的方法我都会记载下来，都归于项目总结这一类了。慢慢我发现我写的东西还能帮助到更多的人，这更让我开心了，同时我也告诉自己要更加严谨了，可不能误人子弟。 好了，刚刚有感而发，说了那么多开场白，下面进入正题吧。 我们先看一下call函数实现的方法 Fun...
手写js中的call 方法（原理分析）
qq_48959471的博客
04-03 741
我们通常使用call 来 修改某个对象的指向，但是你了解其中的原理吗？ 1.首先所有构造函数都能使用，说明什么？ 其实call 本身是构造函数原型上的一个方法 即（Function.prototype上的方法） 2.为什么能使用传入的对象中的属性呢？ 实则是在传入的对象中，又声明了此构造函数（函数），则构造函数中就能使用此对象中的属性啦 明白了这两点，我们就开始实现咯，上代码！ Function.prototype.newCall =function(obj,...args){
JS中call和Apply原理分析研究
刘运召的博客
05-14 1750
call和apply都是为了改变某个函数运行时内部this的指向，会立即调用该函数
理解JavaScript Call()函数原理。
嘿嘿
08-25 435
最近在做面试题的过程中偶然碰到关于call函数的问题。然后再百度上查了查。偶然看到一篇文章：JavaScript中的call、apply、bind深入理解抛开其对call函数基本概念的介绍还有其他原理的介绍。其中一段函数吸引了我。 function fn1(){ console.log(1); } function fn2(){ console.log(2); } fn1.call(fn2); //输出 1 fn1.call.call(fn2); //输出 2 .
什么是call，使用js模拟一个call的原理
weixin_45935688的博客
08-09 275
什么是call，使用js模拟一个call的原理 让.call前面的函数立即执行 函数的this指向call的第一个参数 // ==========call的基本使用 function fn(){ console.log(this) } fn();//window fn.call()//call没有传参，fn也会执行，fn中的this指向window fn.call(123)//传基本数据类型，call内部会包装成对象 {123} let obj={name:'hanhan'}; fn.ca
js call()函数原理 以及与bind（）函数的区别
xzl159的专栏
08-18 450
call（）函数是用于调用函数用的，没错，就是函数名加一个括号，调用函数，但是它当然有自己特殊的地方了 例子：     （这个例子是基于你懂得了this的用法，因为call（）原理就是改变this的指向） var a ={       c:function(){             this.name = 'betty';       }, }; var d={   na
关于call的使用和原理分析
文摘资讯
12-12 533
call()方法使用一个指定的this值和单独给出的一个或多个参数来调用一个函数。注意：该方法的语法和作用与apply()方法类似，只有一个区别，就是call()方法接受的...
JS call方法原理
liubangbo的专栏
11-15 8014
原文转自：https://blog.csdn.net/u010377383/article/details/80646415 前言 本来计划是, 先把深入React技术栈过完,  但是，现在在满足RN app开发情况下，我还是先深入js一个系列。 （一）call源码解析 首先上一个call使用 function add(c, d) {   return this.a + this.b + c...
js call方法实现原理
qq_41999592的博客
07-30 1255
前言 我们知道call方法可以改变this的指向 使用方法如下 const book = '《十万个为什么》' function log() { console.log('这本书是' + this.book)// this默认指向全局window对象 } log() // 这本书是《十万个为什么》 const instance = {book:'《从你的全世界路过》'} // 改变this指向instance log.call(instance)// 这本书是《从你的全世界路过》 log函数中使
简述JS 脚本的执行原理
最新发布
07-22
JS 脚本的执行原理可以概括为以下几个步骤： 1. 解析：浏览器首先会对 JS 脚本进行解析，将其转换为可执行的代码。解析过程包括词法分析和语法分析，将代码分解为词法单元并构建语法树。 2. 创建全局上下文：在执行之前，浏览器会创建一个全局执行上下文（Global Execution Context），用来存储全局变量、函数声明等信息。 3. 执行代码：按照从上到下的顺序执行代码。遇到函数调用时，会创建一个新的函数执行上下文，并将其加入调用栈（Call Stack）中。 4. 变量与函数声明提升：在代码执行前，会进行变量与函数声明的提升。变量声明会被提升到作用域的顶部，但是初始化的赋值操作不会提升。函数声明会被整体提升到作用域的顶部，可以在声明之前进行调用。 5. 作用域与作用域链：JavaScript采用词法作用域，函数和变量的访问权限由它们在代码中的位置决定。每个函数都会创建一个新的作用域，作用域之间通过作用域链进行连接。 6. 变量赋值与运算：在执行过程中，会进行变量的赋值操作和各种运算操作。JavaScript中的运算符包括数学运算符、逻辑运算符、赋值运算符等。 7. 垃圾回收：当 JS 引擎确定某个对象不再被引用时，会自动触发垃圾回收机制，将其占用的内存释放回来。 通过以上步骤，JS 脚本的代码会被逐行执行，从而实现相应的功能。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值