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是指定的那个对象

目录
相关文章
|
7天前
|
前端开发 JavaScript API
探索现代Web开发中的动态数据交互——前端与后端整合实战
本文探讨了现代Web开发中前端与后端整合的关键技术点,通过实际案例演示了如何利用JavaScript和Node.js实现动态数据交互,全面解析从数据请求到响应的全过程。
|
4天前
|
JSON 前端开发 Java
一文读Web开发 之接口后端接口、类与前端请求、拦截器编写
一文读Web开发 之接口后端接口、类与前端请求、拦截器编写
21 6
|
6天前
|
缓存 前端开发 安全
探索现代Web开发中的前端架构模式
【6月更文挑战第23天】随着互联网技术的飞速发展,前端架构在Web开发中扮演着越来越重要的角色。本文将深入探讨现代Web开发中使用的几种主流前端架构模式,包括单页面应用(SPA)、微前端架构和JAMStack等,并分析它们的优势与应用场景。通过实例演示,我们将看到如何根据项目需求选择合适的前端架构,以及如何利用这些架构模式提升开发效率和应用性能。
|
7天前
|
设计模式 前端开发 JavaScript
关于写好前端JS代码的一些建议
关于写好前端JS代码的一些建议
17 2
|
2天前
|
前端开发 计算机视觉
视觉智能开放平台操作报错合集之人脸对比1:1,采用web前端直接调用,使用了base64处理图片,提示http错误码414,该如何处理
在使用视觉智能开放平台时,可能会遇到各种错误和问题。虽然具体的错误代码和消息会因平台而异,但以下是一些常见错误类型及其可能的原因和解决策略的概述,包括但不限于:1. 认证错误、2. 请求参数错误、3. 资源超限、4. 图像质量问题、5. 服务不可用、6. 模型不支持的场景、7. 网络连接问题,这有助于快速定位和解决问题。
|
3天前
|
前端开发 程序员 API
视觉智能开放平台产品使用合集之web前端拉起人脸识别该如何操作
视觉智能开放平台是指提供一系列基于视觉识别技术的API和服务的平台,这些服务通常包括图像识别、人脸识别、物体检测、文字识别、场景理解等。企业或开发者可以通过调用这些API,快速将视觉智能功能集成到自己的应用或服务中,而无需从零开始研发相关算法和技术。以下是一些常见的视觉智能开放平台产品及其应用场景的概览。
|
4天前
|
移动开发 前端开发 JavaScript
快速上手web前端开发(超详细教程)
快速上手web前端开发(超详细教程)
|
5天前
|
前端开发 JavaScript
web开发前端适配
web开发前端适配
10 0
|
4天前
|
JavaScript 程序员 应用服务中间件
快速入门Web开发(上) 黑马程序员JavaWeb开发教程(2)
快速入门Web开发(上) 黑马程序员JavaWeb开发教程(2)
17 7
|
4天前
|
XML 存储 JavaScript
快速入门Web开发(上) 黑马程序员JavaWeb开发教程(1)
快速入门Web开发(上) 黑马程序员JavaWeb开发教程(1)
15 5