JS之call、apply、bind的区别与实现

本文详细探讨了JavaScript中的call、apply、bind方法,它们的主要作用是改变函数内部的this指向。call和apply的主要区别在于参数传递方式,call接收参数列表,apply接收数组或类数组。bind则返回一个新函数,保留原函数的this并允许延迟传参。需要注意,当bind返回的函数用作构造函数时,绑定的this会失效。文中还给出了call、apply、bind的实现原理及示例,帮助开发者更深入地掌握这些概念。
摘要由CSDN通过智能技术生成

call、apply、bind的区别

  • call、apply、bind相同点:都是改变this的指向,传入的第一个参数都是绑定this的指向,在非严格模式中,如果第一个参数是nul或者undefined,会把全局对象(浏览器是window)作为this的值,要注意的是,在严格模式中,null 就是 null,undefined 就是 undefined
  • call和apply唯一的区别是:call传入的是参数列表,apply传入的是数组,也可以是类数组
  • bind和call、apply的区别: bind返回的是一个改变了this指向的函数,便于稍后调用,不像call和apply会立即调用;bind和call很像,传入的也是参数列表,但是可以多次传入,不需要像call,一次传入
  • 值得注意:当 bind 返回的函数 使用new作为构造函数时,绑定的 this 值会失效,this指向实例对象,但传入的参数依然生效 (new调用的优先级 > bind调用)

call实现

对象context想调用一个它没有的方法f 怎么办呢?f.call(context) 通过call来借用方法f ,怎么做到的呢?

1.对象context添加f方法
2.对象context执行f方法

Function.prototype.myCall = function(context, ...arg) {// 如果第一个参数传入的是undefined和null,context为window对象context = context || window;// 为context对象添加函数barcontext.fn = this; // this:bar,this指向调用myCall的bar // context对象执行函数bar,并返回结果returncontext.fn(...arg); 
}

// 测试一下
var value = 2;

var obj = {value: 1
}
function bar(name, age) {console.log(this.value);return {value: this.value,name: name,age: age}
}

bar.myCall(null); // 2

console.log(bar.myCall(obj, 'kevin', 18)); //1
// Object {
//value: 1,
//name: 'kevin',
//age: 18
// } 

apply实现

apply和call唯一的区别是:call传入的是参数列表,apply传入的是数组,也可以是类数组

Function.prototype.myApply = function(context, arg) {// 如果第一个参数传入的是undefined和null,contex
最低0.47元/天 解锁文章
Web_boom
关注 关注
  • 1
    点赞
  • 8
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
原生JS实现 call apply bind
01-08
call apply bind区别 call apply方法都是在调用之后立即执行的,而bind是返回原函数,需要再调用一次才能执行 传参方式的区别 var newFn1 = fn1.bind(newObj,arg1,arg2....); bind 第一个参数为需改变的新指向...
js代码-JavaScript的call/apply/bind函数实现
07-15
JavaScript中,`call()`, `apply()`, 和 `bind()` 是三个非常重要的函数,它们都与函数调用有关,但各自有不同的应用场景。本文将深入探讨这三个函数的实现原理及其使用方式。 首先,`call()` 函数允许我们调用一...
javascriptapply、call和bind的使用区别
11-28
JS中,这三者都是用来改变函数的this对象的指向的,他们有什么样的区别呢。 在说区别之前还是先总结一下三者的相似之处: 1、都是用来改变函数的this对象的指向的。 2、第一个参数都是this要指向的对象。 3、都可以利用后续参数传参。 那么他们的区别在哪里的,先看一个例子。 var xw = { name : "小王", gender : "男", age : 24, say : function() { alert(this.name + "
jsapply、call和bind区别
輕描淡寫的博客
11-03 263
JS中,这三者都是用来改变函数的this对象的指向的,他们有什么样的区别呢。 在说区别之前还是先总结一下三者的相似之处: 1、都是用来改变函数的this对象的指向的。 2、第一个参数都是this要指向的对象。 3、都可以利用后续参数传参。 那么他们的区别在哪里的,先看一个例子。 var xw = { name : "小王", gender : "男", age : 24, say : function() { alert(this.name + " , " + t...
Js中call、applybind区别
最新发布
qq_45464944的博客
09-12 700
call、applybind函数的区别
JSbind、call、apply区别
魏晋-
05-10 857
和call/apply的功能类似,只不过bind修改this指向之后,返回的新函数不会自动执行,如果有需要,需要手动执行;而call和apply改变this之后,返回的新函数会自动执行。方法的功能:修改原函数的this指向,并执行这个新函数。call和aply的第二个(或大于2个)参数为fn传入的参数。用来修改函数的执行上下文(this)。执行时一个对象可以使用另一个对象的方法。
js中call、applybind区别,附加详细的例子,一看就会
zyf_baby的博客
09-06 5268
JS中,这三者都是用来改变函数的this对象的指向的,他们有什么样的区别呢。 在说区别之前还是先总结一下三者的相似之处: 1、都是用来改变函数的this对象的指向的。 2、第一个参数都是this要指向的对象。 3、都可以利用后续参数传参。 二、apply、call和bind区别1 var xw = { name: "小王", gender: "男", age: 24, say: function() { console.log(this.name + "
jsbind、call、apply区别
枫树林
04-06 719
这三个方法都是写到Function对象的原型上的,也就是写到Function.prototype上的;其中bind方法是ES5里新增的。 bind方法 bind方法第一个参数是指定this,其他是直接传递给函数的参数。 用来固定某个函数的this和参数并返回一个函数等待后续调用。 function demo(a, b) { console.log(this, a, b); ...
开启Javascriptapply、call、bind的用法之旅模式
10-23
为了控制函数的this指向,JavaScript提供了apply、call以及bind方法。以下详细解释了apply、call以及bind的用法,并通过实例加深理解。 1. apply()和call()方法 apply()和call()方法都用于指定函数体内this的值。...
Javascript中call,applybind方法的详解与总结
10-20
本文针对JavaScript中三个重要的函数方法——call、applybind,进行详尽的分析,并在文章的结尾部分对这三个方法之间的联系和区别进行了概括,以便于读者更深入地理解它们的用途和应用场景。 首先,我们来探讨...
bind、call、apply区别实现原理
热门推荐
Chengbo_X的博客
10-17 2万+
1、简单说一下bind、call、apply区别 三者都是用于改变函数体内this的指向,但是bindapply和call的最大的区别是:bind不会立即调用,而是返回一个新函数,称为绑定函数,其内的this指向为创建它时传入bind的第一个参数,而传入bind的第二个及以后的参数作为原函数的参数来调用原函数。 var obj = {}; function test() { cons...
浅谈js中call,apply,bind区别
依古比古的博客
06-02 695
Call、 apply 区别,原生实现 bind Call、applybind都是改变this指向的,其中call的话是通过第一个参数来 改变this指向,函数在传参的时候一个一个进行传参,apply也是通过第一个参 数改变this指向,函数传参的时候通过数组或是一组的形式进行传参,而且他 只能用于函数的调用时候,而bind呢不能用于函数的标准调用传参,只能是事 件或是方法的后边进行改变this的指向 他们都是用来改变this指向的。 call:改变this指向 函数被执行了 call(上下文环境,参
JS中call、applybind区别
m0_49266584的博客
11-24 657
call()、apply()、bind()这三个方法都是改变this的指向。 先说一下这三种有什么区别 call(this的值,参数1,参数2); apply(this的值,[参数1,参数2]); bind不会调用指定函数,它会把一个函数作为一个返回值返回出来,它不是一个立即执行函数。 call和apply的传参方式不一样。apply把需要传递给函数的参数放到一个数组(或者类数组)中传递进去,虽然写的是一个数组,但是也相当于给函数一个个的传递。 举个例子: fn.call(obj, 1, 2); fn.ap
js中call(),apply()和bind()的区别
weixin_43152611的博客
08-01 271
call,applybind都是js中强制改变this指向的方法。具体用法以及差异如下: 1. call() 用法: call(this指向对象,参数1,参数2……) 例:在直接调用方法时,this指向window 使用call改变this指向后:this指向对象obj1 call有参数传递时:参数依次用逗号排在对象后 2. apply() 用法: apply(this 指向对象,[参数1,参数2……]) 例同上:在直接调用方法时,this指向window 使用apply改变this指向后
Jsbindapply,call三者的区别
weixin_45346457的博客
07-28 577
apply()方法调用一个具有给定this值的函数,以及以一个数组(或类数组对象)的形式提供的参数。(使用 apply 方法改变this指向后原函数会立即执行,且此方法只是临时改变this指向一次。) call()方法使用一个指定的this值和单独给出的一个或多个参数来调用一个函数。 (使用 call 方法改变this指向后原函数会立即执行,且此方法只是临时改变this指向一次。) bind()方法创建一个新的函数,在bind()被调用时,这个新函数的this被指定为bin...
js中call,apply ,bind三者之间的区别与联系
qq_61856312的博客
08-15 199
新人上路,批评指正!
jsapply、call和bind区别
rich_c的博客
07-14 477
JavaScriptapply、call和bind区别
js中call,apply,bind三者有什么区别
qq_29705009的博客
01-15 546
js中call,apply,bind三者有什么区别
js call,applybind区别和使用场景
gqk01的博客
03-04 4361
js中,所有的函数再被调用的时候都会默认传入两个参数,一个是this,还有一个是arguments。在默认情况下this都是指当前的调用函数的对象。但是有时候我们需要改变this的指向,也就是说使函数可以被其他对象来调用,那么我们应该怎样做呢?这时候我们就可以使用call,applybind方法了。 this指向 = 谁调用,指向谁(这是错误的!!!)this永远指向最后一个调用它的那个对象(正解) 如何解决this指向问题? 1.使用ES6中箭头函数 2.函数内部使用_this = this 3.使用
写文章

热门文章

  • 成功入职字节跳动Android岗,定级2-2,入职就是30K-16薪,全靠这份PDF! 16057
  • 【uniapp】HbuilderX发布微信小程序 15399
  • vue3+vite用proxy解决跨域及proxy原理解析 14961
  • “你们程序员不就是修电脑的吗,你牛什么牛?” 确实,我一开始也这么认为! 14235
  • 一篇就够了,全网最全计算机网络基础总结攻略 12589

分类专栏

  • 移动开发 10篇
  • 程序员 51篇
  • Android 61篇
  • 性能优化 19篇
  • framework 13篇
  • NDK 4篇
  • 大厂面试 22篇
  • jetpack 2篇
  • 源码 4篇
  • 组件化
  • 插件化
  • 网络访问框架 1篇
  • 编程 5篇

最新评论

  • Taro3+Vue3.0做实战项目的总结和方法

    chenhui32: 这是妥妥的偷别人文章,字都不改的表情包

  • [Android进阶】Handler机制原理解析

    敲键盘的小夜猫: 这篇博客真是写得太棒了!让读者能够从中获取丰富的知识和灵感。 【我也写了一些相关领域的文章,希望能够得到博主的指导,共同进步!】

  • vue3+vite用proxy解决跨域及proxy原理解析

    高山我梦口香糖: 那前端应用是不是得和代理服务器运行在同一个端口下?

最新文章

  • AIGC绘画设计基础教学:一篇文章看懂AIGC基本概念
  • AIGC绘画设计基础AI整活!万物皆可建筑设计
  • AIGC绘画设计基础——“这是我学一天AI设计后的作品,效率真的高。”
2024
09月 22篇
08月 34篇
07月 2篇
2023年101篇
2022年273篇
2021年33篇
2020年25篇

目录

目录

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值

玻璃钢生产厂家珠海户外景观玻璃钢雕塑渭南玻璃钢景观雕塑珠海玻璃钢彩绘雕塑定制清远玻璃钢劳动人物雕塑北京商场美陈价钱方形玻璃钢花盆价格惠安公园玻璃钢雕塑河南开业商场美陈研发曲阳玻璃钢音符雕塑郑州镜面校园玻璃钢雕塑广东玻璃钢鹿雕塑贵州农耕文化玻璃钢人物雕塑定制动物玻璃钢卡通雕塑设计厂家美陈玻璃钢卡通雕塑供应商深圳人物卡通玻璃钢雕塑东莞玻璃钢子母座椅雕塑商场美陈雕塑制作厂焦作玻璃钢雕塑价格河北通用玻璃钢花盆周口人物玻璃钢雕塑玻璃钢雕塑推荐惠新复材123深圳玻璃钢仿铜雕塑佛山玻璃钢雕塑批发定制呈贡玻璃钢雕塑产品厂家贵不贵随州玻璃钢雕塑小品定制白城玻璃钢雕塑工程施工标准舟山景观玻璃钢雕塑生产厂家临沂玻璃钢牛雕塑太原园林玻璃钢雕塑制作商场 美陈 包柱香港通过《维护国家安全条例》两大学生合买彩票中奖一人不认账让美丽中国“从细节出发”19岁小伙救下5人后溺亡 多方发声单亲妈妈陷入热恋 14岁儿子报警汪小菲曝离婚始末遭遇山火的松茸之乡雅江山火三名扑火人员牺牲系谣言何赛飞追着代拍打萧美琴窜访捷克 外交部回应卫健委通报少年有偿捐血浆16次猝死手机成瘾是影响睡眠质量重要因素高校汽车撞人致3死16伤 司机系学生315晚会后胖东来又人满为患了小米汽车超级工厂正式揭幕中国拥有亿元资产的家庭达13.3万户周杰伦一审败诉网易男孩8年未见母亲被告知被遗忘许家印被限制高消费饲养员用铁锨驱打大熊猫被辞退男子被猫抓伤后确诊“猫抓病”特朗普无法缴纳4.54亿美元罚金倪萍分享减重40斤方法联合利华开始重组张家界的山上“长”满了韩国人?张立群任西安交通大学校长杨倩无缘巴黎奥运“重生之我在北大当嫡校长”黑马情侣提车了专访95后高颜值猪保姆考生莫言也上北大硕士复试名单了网友洛杉矶偶遇贾玲专家建议不必谈骨泥色变沉迷短剧的人就像掉进了杀猪盘奥巴马现身唐宁街 黑色着装引猜测七年后宇文玥被薅头发捞上岸事业单位女子向同事水杯投不明物质凯特王妃现身!外出购物视频曝光河南驻马店通报西平中学跳楼事件王树国卸任西安交大校长 师生送别恒大被罚41.75亿到底怎么缴男子被流浪猫绊倒 投喂者赔24万房客欠租失踪 房东直发愁西双版纳热带植物园回应蜉蝣大爆发钱人豪晒法院裁定实锤抄袭外国人感慨凌晨的中国很安全胖东来员工每周单休无小长假白宫:哈马斯三号人物被杀测试车高速逃费 小米:已补缴老人退休金被冒领16年 金额超20万

玻璃钢生产厂家 XML地图 TXT地图 虚拟主机 SEO 网站制作 网站优化