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

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

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. 都是函数对象的方法。


  1. 都可以改变this指向。


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


不同点


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


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


this指向的四种情况总结


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


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


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


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

目录
相关文章
|
4月前
|
前端开发 JavaScript 开发者
JavaScript:无处不在的Web语言
JavaScript:无处不在的Web语言
|
5月前
|
并行计算 前端开发 JavaScript
Web Worker:让前端飞起来的隐形引擎
在现代 Web 开发中,前端性能优化是一个至关重要的课题,尤其是对于计算密集型的应用,如图像处理、视频处理、大规模数据分析等任务。单线程的 JavaScript 引擎常常成为性能瓶颈,导致应用变得迟缓。Web Worker,作为一种强大的技术,使得前端能够在后台进行并行计算,从而实现高效的任务处理,不影响主线程的运行和用户的交互体验。
491 108
|
4月前
|
前端开发 JavaScript 开发者
JavaScript:构建动态Web的核心力量
JavaScript:构建动态Web的核心力量
|
5月前
|
JavaScript 前端开发 Java
前端框架选择之争:jQuery与Vue在现代Web开发中的真实地位-优雅草卓伊凡
前端框架选择之争:jQuery与Vue在现代Web开发中的真实地位-优雅草卓伊凡
580 72
前端框架选择之争:jQuery与Vue在现代Web开发中的真实地位-优雅草卓伊凡
|
4月前
|
JavaScript 前端开发 开发者
JavaScript:驱动现代Web的核心引擎
JavaScript:驱动现代Web的核心引擎
|
8月前
|
前端开发 算法 API
构建高性能图像处理Web应用:Next.js与TailwindCSS实践
本文分享了构建在线图像黑白转换工具的技术实践,涵盖技术栈选择、架构设计与性能优化。项目采用Next.js提供优秀的SSR性能和SEO支持,TailwindCSS加速UI开发,WebAssembly实现高性能图像处理算法。通过渐进式处理、WebWorker隔离及内存管理等策略,解决大图像处理性能瓶颈,并确保跨浏览器兼容性和移动设备优化。实际应用案例展示了其即时处理、高质量输出和客户端隐私保护等特点。未来计划引入WebGPU加速、AI增强等功能,进一步提升用户体验。此技术栈为Web图像处理应用提供了高效可行的解决方案。
|
4月前
|
JavaScript 前端开发 物联网
JavaScript:驱动现代Web的核心引擎
JavaScript:驱动现代Web的核心引擎
|
10月前
|
JSON 自然语言处理 前端开发
【01】对APP进行语言包功能开发-APP自动识别地区ip后分配对应的语言功能复杂吗?-成熟app项目语言包功能定制开发-前端以uniapp-基于vue.js后端以laravel基于php为例项目实战-优雅草卓伊凡
【01】对APP进行语言包功能开发-APP自动识别地区ip后分配对应的语言功能复杂吗?-成熟app项目语言包功能定制开发-前端以uniapp-基于vue.js后端以laravel基于php为例项目实战-优雅草卓伊凡
544 72
【01】对APP进行语言包功能开发-APP自动识别地区ip后分配对应的语言功能复杂吗?-成熟app项目语言包功能定制开发-前端以uniapp-基于vue.js后端以laravel基于php为例项目实战-优雅草卓伊凡
|
9月前
|
JavaScript 前端开发 API
|
7月前
|
移动开发 前端开发 JavaScript
前端web创建命令
本项目使用 Vite 搭建 Vue + TypeScript 开发环境,并基于 HTML5 Boilerplate 提供基础模板,快速启动现代前端开发。
93 2