JavaScript call和apply有何区别_它们如何改变this?

call和apply都显式指定函数执行时this的值并立即调用;区别仅在传参方式:call用逗号分隔参数,apply用数组传参。

javascript call和apply有何区别_它们如何改变this?

call 和 apply 都是用来**显式指定函数执行时 this 的值**,并立即调用该函数;它们的核心区别只在**传参方式不同**:call 用逗号分隔的参数列表,apply 用一个数组(或类数组)传参。

call:逐个传参

call 的第一个参数是 this 指向的对象,后续每个参数按顺序传给原函数。

例如:

function greet(greeting, punctuation) {  return `${greeting}, ${this.name}${punctuation}`;}const person = { name: 'Alice' };greet.call(person, 'Hello', '!'); // "Hello, Alice!"

说明:this 绑定到 person,’Hello’ 和 ‘!’ 分别作为 greeting 和 punctuation 传入。

立即学习“Java免费学习笔记(深入)”;

apply:用数组传参

apply 的第一个参数也是 this 值,第二个参数必须是一个数组(或类数组对象),数组元素会依次作为参数传入函数。

同样例子:

greet.apply(person, ['Hi', '?']); // "Hi, Alice?"

说明:[‘Hi’, ‘?’] 被“展开”为两个独立参数,效果等价于 call(person, ‘Hi’, ‘?’)。

它们如何改变 this?

函数默认的 this 取决于调用方式(如 obj.fn() 中 this 是 obj,独立调用时 this 是全局或 undefined)。call/apply 不依赖调用位置,而是**强制把 this 设为你传入的第一个参数**——哪怕传 null 或 undefined,在非严格模式下也会被自动转为全局对象(浏览器中是 window)。

传普通对象(如 {name: ‘Bob’})→ this 就是那个对象 传 null / undefined → 非严格模式下 this 指向全局对象;严格模式下就是 null/undefined 传原始值(如 42、’str’)→ 会被自动包装成对应对象(Number、String 实例)

实用小技巧

apply 常用于「借用方法」或「展开参数」场景,比如:

求数组最大值:Math.max.apply(null, [1, 5, 3]) 合并数组:Array.prototype.push.apply(arr1, arr2) ES6 后更推荐用扩展运算符替代 apply:Math.max(...[1, 5, 3])

call 更适合已知参数个数、想清晰传递的情形,比如初始化构造函数或调试时临时绑定上下文。

基本上就这些。不复杂但容易忽略:真正起作用的是“第一个参数决定 this”,其余只是传参形式差异。

以上就是JavaScript call和apply有何区别_它们如何改变this?的详细内容,更多请关注创想鸟其它相关文章!

版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。
如发现本站有涉嫌抄袭侵权/违法违规的内容, 请发送邮件至 chuangxiangniao@163.com 举报,一经查实,本站将立刻删除。
发布者:程序猿,转转请注明出处:https://www.chuangxiangniao.com/p/1542408.html

(0)
打赏 微信扫一扫 微信扫一扫 支付宝扫一扫 支付宝扫一扫
上一篇 2025年12月21日 14:10:33
下一篇 2025年12月21日 14:10:49

相关推荐

  • 什么是JavaScript的Web Workers_它如何实现多线程编程?

    Web Workers 是基于消息传递的后台线程机制,实现主线程不阻塞的多线程编程;其通过 postMessage/onmessage 通信,数据经结构化克隆复制,支持 Transferable Objects 零拷贝,天然规避竞态条件。 Web Workers 是 JavaScript 提供的一种…

    2025年12月21日
    000
  • javascript能做什么_前端开发中它有哪些常见应用场景

    JavaScript是现代前端开发的核心驱动力,实现用户交互、单页应用、异步通信、多媒体操控等全方位动态功能。 JavaScript 能让网页“活”起来——它不是只能做弹窗或轮播图,而是现代前端开发的核心驱动力。没有它,网站基本就是静态文档;有了它,才能实现交互、实时更新、复杂界面和接近原生体验的应…

    2025年12月21日
    000
  • JavaScript new操作符做了什么_它如何创建实例?

    new操作符执行四步:1.创建空对象;2.绑定原型到构造函数prototype;3.以该对象为this执行构造函数,若返回对象则用其替换实例,否则返回实例;4.返回最终对象。 new 操作符不是简单地“分配内存”或“调用构造函数”,而是一套有明确顺序的四步操作:它先创建空对象,再绑定原型,接着执行构…

    2025年12月21日
    000
  • 如何用Javascript进行数据可视化?

    JavaScript数据可视化核心是选库、理清数据流程、渲染图表;推荐Chart.js或Plotly.js入门,D3.js用于高度定制;需准备结构化数据、处理常见格式坑、绑定DOM容器并动态更新。 用 JavaScript 做数据可视化,核心是选对库、理清数据流程、再把图表渲染出来。不需要从零画 C…

    2025年12月21日
    000
  • JavaScript代码覆盖率_javascript测试指标

    JavaScript代码覆盖率反映测试中已执行代码的比例,包括语句、函数、分支和行覆盖率。常用工具如Istanbul(nyc)、Jest和Karma可生成报告,其中Jest通过配置collectCoverage和coverageReporters生成HTML可视化结果。解读时应关注未覆盖的分支、错误…

    2025年12月21日
    000
  • javascript中的函数式编程是什么_它有哪些核心概念

    JavaScript函数式编程强调纯函数、不可变数据和函数组合,避免副作用与可变状态,借助高阶函数及工具如pipe/compose提升代码可读性、可测试性与复用性。 JavaScript 中的函数式编程(Functional Programming,FP)是一种编程范式,强调用纯函数、不可变数据和函…

    2025年12月21日
    000
  • Javascript如何与硬件设备交互?

    JavaScript不能直接控制硬件,但可通过WebUSB/WebSerial在浏览器中授权访问USB/串口设备,或借助Node.js的serialport、node-hid等模块及系统命令对接硬件,工业场景中常作为MQTT/HTTP中间层桥接固件与前端。 JavaScript 本身不能直接控制硬件…

    2025年12月21日
    000
  • javascript的performance api是什么_如何测量性能?

    Performance API 是浏览器原生高性能监控工具,支持微秒级精度测量代码执行、页面生命周期、资源加载、渲染指标及长任务,无需第三方库。 Performance API 是浏览器提供的一套原生接口,用来精确获取页面运行时的性能数据,比如加载时间、渲染帧率、资源加载耗时、内存使用、长任务等。它…

    2025年12月21日
    000
  • 如何用JavaScript实现一个通知系统_如何显示和自动隐藏消息?

    通知系统用原生JS实现:创建右下角绝对定位容器,通过JS动态填充内容并设display为block显示,配合setTimeout定时3秒后设display为none隐藏,支持手动关闭清除定时器,可扩展队列或多条堆叠。 用 JavaScript 实现一个通知系统,核心是控制消息元素的显示、内容填充和定…

    2025年12月21日
    000
  • javascript的Next.js是什么_它如何实现服务端渲染?

    Next.js通过getServerSideProps在服务端动态获取数据并渲染HTML,实现SSR,提升首屏性能与SEO;它非React替代品,而是增强层,自动处理路由、数据获取等,区别于CSR的空HTML+JS渲染。 Next.js 是一个基于 React 的轻量级框架,它让构建服务端渲染(SS…

    2025年12月21日
    000
  • 什么是JavaScript的Symbol类型_它如何创建唯一的对象键呢

    Symbol是JavaScript中唯一且不可变的原始类型,用于创建不冲突的对象属性键;其值唯一、不隐式转字符串、不可枚举,可通过Symbol.for()全局共享,常用于安全扩展对象行为。 Symbol 是 JavaScript 中一种原始数据类型,专门用来创建唯一、不可变的值,常用于对象属性键,避…

    2025年12月21日
    000
  • javascript中的箭头函数是什么_与传统函数有何不同?

    箭头函数是JavaScript中语法更简洁的函数定义方式,无自身this、arguments、super和new.target,继承外层作用域;适用于回调和数组方法,但不可用作构造函数。 箭头函数是 JavaScript 中定义函数的一种简洁语法,它没有自己的 this、arguments、supe…

    2025年12月21日
    000
  • javascript的node.js是什么_如何搭建服务器?

    Node.js是基于V8引擎的服务器端JavaScript运行时,具单线程事件循环、非阻塞I/O、丰富内置模块和强大npm生态;可用原生http模块或Express框架快速搭建HTTP服务。 Node.js 不是 JavaScript 的一种新语言,而是让 JavaScript 能在服务器端运行的运…

    2025年12月21日
    000
  • javascript错误处理如何实现_try catch怎样捕获异常?

    try…catch用于捕获同步错误,语法为try块放可能出错代码、catch块处理Error对象(含message/name/stack),finally块必执行;它无法捕获异步错误、语法错误和未处理的Promise拒绝。 JavaScript 中的 try…catch 是最基础也最…

    2025年12月21日
    000
  • 如何用javascript处理日期和时间_Date对象有哪些方法?

    JavaScript Date对象是处理日期时间的核心工具,支持创建、获取(如getFullYear、getMonth)、设置(如setFullYear、setTime)和格式化(如toISOString、toLocaleString)操作,关键需注意月份从0开始及 getTime 与 toISOS…

    2025年12月21日
    000
  • 什么是JavaScript的Svelte_它如何编译时优化应用呢

    Svelte 是一个编译型前端框架,将 .svelte 组件在构建时转化为高效原生 JS,无虚拟 DOM、无运行时响应式系统;通过静态分析实现零开销更新、作用域 CSS 和按需绑定,显著减小体积、提升性能。 Svelte 不是 JavaScript 的一个“版本”或“分支”,而是一个前端编译型框架,…

    2025年12月21日
    000
  • 为什么javascript函数是一等公民_这带来哪些灵活性?

    JavaScript中函数是一等公民,可赋值、传参、返回和参与表达式,支撑回调、事件驱动与函数式编程等核心范式。 因为 JavaScript 中的函数可以像普通值一样被赋值、传参、返回和存储,所以它是一等公民。这种设计让函数不再只是“执行一段代码的工具”,而是真正参与程序数据流的核心角色。 能赋值给…

    2025年12月21日
    000
  • 为什么javascript模块循环依赖有问题_如何解决?

    JavaScript模块循环依赖不会语法报错但会导致undefined或不完整对象,因ESM静态求值和CommonJS执行时机问题;修复首选重构拆分、次选延迟获取、三选CommonJS动态赋值。 JavaScript 模块循环依赖本身不会直接报错,但会导致模块导出值为 undefined 或不完整对…

    2025年12月21日
    000
  • javascript的ES6是什么_它带来了哪些重要的新特性?

    ES6是JavaScript在2015年发布的重大更新,核心包括let/const(块级作用域、无变量提升)、解构赋值(数组/对象一键提取)、箭头函数(简洁语法、继承外层this),显著提升代码质量与开发效率。 ES6,全称 ECMAScript 2015(也叫 ES2015),是 JavaScri…

    2025年12月21日
    000
  • 前端存储方案_javascript本地存储

    Cookie 适合存储小量关键数据如 token,但容量小且有安全风险;2. Web Storage(localStorage/sessionStorage)提供较大存储空间,用于保存用户偏好或临时状态;3. IndexedDB 支持大量结构化数据存储,适用于离线应用;4. 配合 Cache API…

    2025年12月21日
    000

发表回复

登录后才能评论
关注微信