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

简介: 文章目录每日推荐正文开始call()和apply()bind()()call、apply和bind方法的区别相同点不同点this指向的四种情况总结

正文开始

call()和apply()

  • 这两个方法都是函数对象的方法,需要通过函数对象来调用
    1.当不传递参数时,call和apply和函数调用的效果并无区别,this永远指向window

image.png

2.在调用call()和apply()可以将一个对象指定为第一个参数,此时这个对象将会成为函数执行时的this

image.png

3.call()方法可以将实参在对象之后依次传递

image.png

image.png

bind()()

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

  • bind方法也是函数对象的方法,需要通过函数对象来调用。
    1.当不传递参数时,this永远指向window

image.png

image.png

image.png

call、apply和bind方法的区别

相同点

都是函数对象的方法。

都可以改变this指向。

通过这三个方法调用函数时,传入一个对象作为第一个参数时,this指向这个对象,若不传入任何参数,this指向则与函数调用时的一样,指向window

不同点

call和apply是直接执行函数调用,而bind会返回一个新的方法,需要再次调用。

在传入一个对象作为第一个参数时,call和bind方法在该对象后面传入以逗号分隔的参数列表,而apply传入的时一个数组对象。

this指向的四种情况总结

1.以函数形式调用时,this永远都是window

2.以方法的形式调用时,this是调用方法的对象

3.以构造函数的形式调用时,this是新创建的那个对象

4.使用call、apply和bind调用时,this是指定的那个对象


相关文章
|
12天前
|
搜索推荐 前端开发 数据可视化
【优秀python web毕设案例】基于协同过滤算法的酒店推荐系统,django框架+bootstrap前端+echarts可视化,有后台有爬虫
本文介绍了一个基于Django框架、协同过滤算法、ECharts数据可视化以及Bootstrap前端技术的酒店推荐系统,该系统通过用户行为分析和推荐算法优化,提供个性化的酒店推荐和直观的数据展示,以提升用户体验。
|
4天前
|
开发框架 前端开发 Java
【前端学java】SpringBootWeb极速入门-实现一个简单的web页面01
【8月更文挑战第12天】SpringBootWeb极速入门-实现一个简单的web页面01
15 3
【前端学java】SpringBootWeb极速入门-实现一个简单的web页面01
|
11天前
|
存储 前端开发 搜索推荐
Web前端网站(三)- 记事本
【8月更文挑战第8天】多种颜色搭配的动态粒子背景特效(粒子会随着鼠标的移动进行吸附,好看又好玩),左右摆动的文字特效,并且使用localStorage进行数据的持久化存储,使记事本的内容可以长期的保存在浏览器中,功能包括添加留言、显示留言、删除留言。每一行代码都有详细注释~~~大家可以尽情创作
32 5
Web前端网站(三)- 记事本
|
11天前
|
前端开发 搜索推荐 JavaScript
Web前端网站(四)- 音乐播放器
【8月更文挑战第9天】页面整体色调背景采用柔和渐变的方式呈现,与主页面的“毒药水式”色彩搭配形成了强烈的对比;周边花瓣缓缓飘落到水面之上形成涟漪。整体给人一种温馨、浪漫的感觉,还可以通过中间的3个按钮来控制音乐的切换和播放效果。每一行代码都有详细注释~~~大家可以尽情创作
14 2
Web前端网站(四)- 音乐播放器
|
1天前
|
缓存 前端开发 JavaScript
高效开发现代 Web 应用:从前端到后端的最佳实践
在开发现代 Web 应用时,前端和后端技术的选择对项目的性能、可维护性和用户体验至关重要。本文将探讨如何通过现代工具和框架来优化前端和后端开发流程。我们将分析前端技术(如 React 和 Vue.js)与后端技术(如 Node.js 和 Django)的集成,并提供实际案例来展示如何实现高效开发。无论是对新手还是经验丰富的开发者,本指南都提供了宝贵的洞见和实用的技巧,以帮助提高开发效率并构建出色的 Web 应用。
|
1天前
|
缓存 编解码 前端开发
优化Web应用性能的前端技巧:从加载时间到用户体验
在现代Web开发中,提升前端性能不仅仅是为了缩短页面加载时间,更是为了提供更流畅的用户体验。本文将探讨几种有效的前端优化技术,包括懒加载、代码拆分、资源压缩以及浏览器缓存策略。通过具体实例和最佳实践,读者将能够掌握如何系统地提高Web应用的响应速度,减少资源消耗,并最终改善用户的整体体验。
|
6天前
|
前端开发 JavaScript
Web前端项目(一)- 迷宫游戏
【8月更文挑战第13天】本项目采用HTML页面,结合了JS和CSS创建一个简单的迷宫游戏,游戏特色包括自动寻路功能和可进行迷宫路线的更新。页面整体采用“毒药水式”的色彩搭配,给人一种迷幻,科技之感。并且为了大家能够二次创作,我在代码中标明了详细的注释
30 0
Web前端项目(一)- 迷宫游戏
|
15天前
|
存储 前端开发 JavaScript
揭秘!JavaScript本地存储的四大绝技:从Cookie到IndexedDB,让你的Web应用秒变数据存储高手,轻松应对各种挑战!
【8月更文挑战第4天】JavaScript为核心前端技术,提供多样本地存储方案以优化用户体验与减少服务器负载。首先,Cookie虽用于基本数据如登录状态,但受大小限制及安全性影响。接着,Web Storage中的LocalStorage持久存储不变数据,SessionStorage则限于单次会话。更进一步,IndexedDB作为全面数据库解决方案,支持复杂数据操作但使用较复杂。每种方式根据应用需求各有优势。
34 9
|
11天前
|
数据采集 数据可视化 关系型数据库
【优秀python web设计】基于Python flask的猫眼电影可视化系统,可视化用echart,前端Layui,数据库用MySQL,包括爬虫
本文介绍了一个基于Python Flask框架、MySQL数据库和Layui前端框架的猫眼电影数据采集分析与可视化系统,该系统通过爬虫技术采集电影数据,利用数据分析库进行处理,并使用Echart进行数据的可视化展示,以提供全面、准确的电影市场分析结果。
|
14天前
|
缓存 监控 前端开发
WEB前端三大主流框架:React、Vue与Angular
在Web前端开发中,React、Vue和Angular被誉为三大主流框架。它们各自具有独特的特点和优势,为开发者提供了丰富的工具和抽象,使得构建复杂的Web应用变得更加容易。
41 6

热门文章

最新文章