讲师中心 微信公众号

工具推荐

视频效率加速
AniShort
AniShort

AI短剧协同制作平台

Seko
Seko

AI短剧一键生成成片

Laper
Laper

剧本策划到成片协作

立刻MV
立刻MV

低成本歌曲 MV、视频生成

javascript中的函数如何定义与调用_怎样理解作用域和闭包【教程】

梦伟吖_8659

梦伟吖_8659

发布时间:2026-01-25 14:22:50

|

978人浏览过

|

来源于php中文网

原创

函数定义有三种写法:函数声明(完全提升)、函数表达式(仅变量名提升)、箭头函数(不绑定this/arguments,不能new);this由调用方式决定;作用域为词法作用域;闭包是函数与其词法环境的组合。

javascript中的函数如何定义与调用_怎样理解作用域和闭包【教程】

函数定义的三种写法及其关键区别

JavaScript 中定义函数不止一种方式,不同写法直接影响提升(hoisting)行为和 this 绑定。最常用的是函数声明、函数表达式和箭头函数。

  • 函数声明:function foo() {} 会被完全提升,可在定义前调用
  • 函数表达式:const foo = function() {} 只有变量名 foo 被提升,赋值不会,提前调用报 TypeError: foo is not a function
  • 箭头函数:const foo = () => {} 不绑定自己的 this、arguments,也不能用 new 调用

注意:箭头函数在对象方法中容易踩坑——obj = { name: 'a', getName: () => this.name } 中的 this 指向外层作用域,不是 obj。

调用时传参与 this 指向的实际控制方式

函数调用本身不决定 this,而是取决于「怎么调」。常见调用形式对应不同 this 绑定规则:

  • 普通调用:foo() → 严格模式下 this 是 undefined,非严格下是全局对象(浏览器中为 window)
  • 方法调用:obj.foo() → this 指向 obj(但仅限直接点调用,若提取后调用会丢失)
  • 显式绑定:foo.call(obj, 1, 2) 或 foo.bind(obj) 可强制指定 this
  • 构造函数调用:new Foo() → this 指向新创建的实例

容易忽略的一点:事件回调、定时器回调中的函数默认以普通方式执行,this 很可能不是你期望的对象,需用 bind、箭头函数或包装函数处理。

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

作用域链如何实际影响变量查找

JavaScript 使用词法作用域(lexical scope),即作用域在函数定义时就确定,而非调用时。这意味着嵌套函数能访问外层函数的变量,即使外层函数已执行完毕。

CDP浏览器大师
CDP浏览器大师

CDP浏览器大师:通过Chrome DevTools Protocol驱动已登录浏览器实现自动化任务,解决反爬封号、选择器失效、SPA路由难导航、固定sleep不准四大痛点。核心能力包括UA伪装、WebGL/Canvas指纹混淆、智能等待、动态选择器以及可视化调试。

下载

查找变量时,引擎从当前作用域开始,逐级向上搜索,直到全局作用域。一旦找到就停止,不会继续找同名变量。

  • 函数内部声明的 var 变量会被提升到函数顶部,但 let/const 有暂时性死区(TDZ),在声明前访问会报 ReferenceError
  • for (let i = 0; i 中的 <code>i 每次循环都生成新绑定,所以 setTimeout(() => console.log(i), 0) 会输出 0、1、2;而用 var 就只会输出 3(三次都共享同一个 i)

闭包的本质是“函数记住了它诞生时的词法环境”

闭包不是某种特殊语法,而是函数对象与其词法作用域的组合。只要一个函数在定义它的作用域之外被调用,并且还引用了该作用域中的变量,就形成了闭包。

典型例子:

function createCounter() {
  let count = 0;
  return function() {
    count++;
    return count;
  };
}
const inc = createCounter();
console.log(inc()); // 1
console.log(inc()); // 2

这里 inc 是闭包:它持有对 count 的引用,而 count 存在于已执行完的 createCounter 的作用域中。这个变量不会被垃圾回收,直到 inc 不再存在。

容易被忽略的复杂点:闭包捕获的是变量的“引用”,不是值。多个闭包共享同一变量时(比如在循环中用 var 创建函数),它们会共用最后的值——这正是很多“循环中绑定事件失效”问题的根源。

热门AI工具

更多
WorkBuddy

一款AI办公效率工具,主要用于腾讯云推出的AI原生桌面智能体工作台,适合需要提升相关任务效率的用户。

DeepSeek

DeepSeek是一款面向对话、写作、编程和推理场景的AI大模型工具。

讯飞绘文

讯飞绘文是一款由科大讯飞推出的一站式 AIGC 内容运营平台。

Atoms
Atoms Hot

Atoms是一款AI智能体工具,第一支自动构建真实业务的 AI 团队。

Flowith
Flowith Hot

Flowith是一款基于画布和智能体工作流的 AI 协作工作空间。

豆包大模型

豆包大模型是一款由字节跳动推出的企业级大语言模型服务平台。

火山引擎

火山引擎是一款面向企业的云计算与AI服务平台。

二狗PPT
二狗PPT Hot

一款AI演示文稿工具,主要用于专为中式职场打造的AI PPT生成工具,适合需要提升相关任务效率的用户。

超级简历WonderCV

一款AI办公效率工具,主要用于免费求职简历模版下载制作,应届生职场人必备简历制作神器,适合需要提升相关任务效率的用户。

相关专题

更多
counta和count的区别
counta和count的区别

Count函数用于计算指定范围内数字的个数,而CountA函数用于计算指定范围内非空单元格的个数。本专题为大家提供相关的文章、下载、课程内容,供大家免费下载体验。

3928

2023.11.20

c语言const用法
c语言const用法

const是关键字,可以用于声明常量、函数参数中的const修饰符、const修饰函数返回值、const修饰指针。详细介绍:1、声明常量,const关键字可用于声明常量,常量的值在程序运行期间不可修改,常量可以是基本数据类型,如整数、浮点数、字符等,也可是自定义的数据类型;2、函数参数中的const修饰符,const关键字可用于函数的参数中,表示该参数在函数内部不可修改等等。

2458

2023.09.20

go语言闭包相关教程大全
go语言闭包相关教程大全

本专题整合了go语言闭包相关数据,阅读专题下面的文章了解更多相关内容。

5193

2025.07.29

console接口是干嘛的
console接口是干嘛的

console接口是一种用于在计算机命令行或浏览器开发工具中输出信息的工具,提供了一种简单的方式来记录和查看应用程序的输出结果和调试信息。本专题为大家提供console接口相关的各种文章、以及下载和课程。

956

2023.08.08

console.log是什么
console.log是什么

console.log 是 javascript 函数,用于在浏览器控制台中输出信息,便于调试和故障排除。想了解更多console.log的相关内容,可以阅读本专题下面的文章。

7123

2024.05.29

undefined是什么
undefined是什么

undefined是代表一个值或变量不存在或未定义的状态。它可以作为默认值来判断一个变量是否已经被赋值,也可以用于设置默认参数值。尽管在不同的编程语言中,undefined可能具有不同的含义和用法,但理解undefined的概念可以帮助我们更好地理解和编写程序。本专题为大家提供undefined相关的各种文章、以及下载和课程。

12385

2023.07.31

网页undefined是什么意思
网页undefined是什么意思

网页undefined是指页面出现了未知错误的意思,提示undefined一般是在开发网站的时候定义不正确或是转换不正确,或是找不到定义才会提示undefined未定义这个错误。想了解更多的相关内容,可以阅读本专题下面的文章。

5547

2024.08.14

网页undefined啥意思
网页undefined啥意思

本专题整合了undefined相关内容,阅读下面的文章了解更多详细内容。后续继续更新。

2516

2025.12.25

Go-Zero API开发使用教程
Go-Zero API开发使用教程

本专题聚焦Go-Zero的API开发,拆解.api描述文件的语法结构、路由与分组定义、参数绑定与校验规则,说明统一响应体、JWT鉴权、跨域与接口文档生成的落地方式,并给出网关聚合与接口测试的实践建议。

40

2026.11.12

热门下载

更多
网站特效
/
网站源码
/
网站素材
/
前端模板

精品课程

更多
相关推荐
/
热门推荐
/
最新课程
WebStorm 官方调试文档
WebStorm 官方调试文档

共0课时 | 0人学习

React 教程
React 教程

共58课时 | 12.5万人学习

TypeScript 教程
TypeScript 教程

共19课时 | 6.8万人学习

关于我们 免责申明 举报中心 意见反馈 讲师合作 广告合作 最新更新
php中文网:公益在线php培训,帮助PHP学习者快速成长!
关注服务号
PHP中文网订阅号
每天精选资源文章推送

Copyright 2014-2026 https://www.php.cn/ All Rights Reserved | php.cn