• web前端-JavaScript中的call、apply和bind方法(改变this指向)


    🐚作者简介:苏凉(专注于网络爬虫,数据分析,正在学习前端的路上)
    🐳博客主页:苏凉.py的博客
    🌐系列总专栏:web前端基础教程
    👑名言警句:海阔凭鱼跃,天高任鸟飞。
    📰要是觉得博主文章写的不错的话,还望大家三连支持一下呀!!!
    👉关注✨点赞👍收藏📂

    每日推荐

    给大家推荐一款神器。无论你是学生党还是上班族都可以使用,这里涵盖了面试题库,在线刷题,各个大厂的面试/笔试真题等。如果你还是学生,最重要的一点就是模拟面试功能,智能AI1v1面试,帮助你早日拿到大厂offer!点击链接即可直达!=>牛客网-找工作神器
    在这里插入图片描述

    正文开始

    call()和apply()

    • 这两个方法都是函数对象的方法,需要通过函数对象来调用
      1.当不传递参数时,call和apply和函数调用的效果并无区别,this永远指向window
      在这里插入图片描述
      2.在调用call()和apply()可以将一个对象指定为第一个参数,此时这个对象将会成为函数执行时的this
      在这里插入图片描述
      3.call()方法可以将实参在对象之后依次传递
      在这里插入图片描述
      4.apply()方法需要将实参封装到一个数组中统一传递
      在这里插入图片描述

    bind()()

    为什么bind方法会有两个小括号?因为使用bind方法会返回一个新的方法,需要重新调用才行。除此之外,bind方法个call方法一致。

    • bind方法也是函数对象的方法,需要通过函数对象来调用。
      1.当不传递参数时,this永远指向window
      在这里插入图片描述
      2.将一个对象作为第一个参数,this指向传入的对象。
      在这里插入图片描述
      3.bind方法可以将实参在对象之后依次传递
      在这里插入图片描述

    call、apply和bind方法的区别

    相同点

    1. 都是函数对象的方法。
    2. 都可以改变this指向。
    3. 通过这三个方法调用函数时,传入一个对象作为第一个参数时,this指向这个对象,若不传入任何参数,this指向则与函数调用时的一样,指向window

    不同点

    1. call和apply是直接执行函数调用,而bind会返回一个新的方法,需要再次调用。
    2. 在传入一个对象作为第一个参数时,call和bind方法在该对象后面传入以逗号分隔的参数列表,而apply传入的时一个数组对象。

    this指向的四种情况总结

    1.以函数形式调用时,this永远都是window
    2.以方法的形式调用时,this是调用方法的对象
    3.以构造函数的形式调用时,this是新创建的那个对象
    4.使用call、apply和bind调用时,this是指定的那个对象

    更多题库和知识点总结,面试技巧请看=>牛客网,快来和我一起刷题吧!

  • 相关阅读:
    rabbitmq代码
    中小河流水文监测系统
    MFC扩展库BCGControlBar Pro v33.6新版亮点 - 图形管理器改造升级
    vue2使用change事件监听不了回车事件的问题
    vue3后台管理系统之登录界面和业务的实现
    第七章第三节:散列表(Hash Table)
    一文搞定POI,再也不怕excel导入导出了
    Pandas数据分析23——pandas时间偏移和周期
    MySql 查询优化
    sqlserver 语句执行了多长时间
  • 原文地址:https://blog.csdn.net/weixin_46277553/article/details/125515333