찾다
웹 프론트엔드JS 튜토리얼JS 함수와 클로저에 대한 간략한 토론

함수가 선언될 때마다 범위가 생성됩니다. 외부 범위는 내부 범위에 액세스할 수 없지만(내부 변수 및 함수 숨기기) 내부 범위는 외부 범위에 액세스할 수 있습니다. 변수와 함수를 숨기는 데 매우 유용한 기술입니다.

JS 함수와 클로저에 대한 간략한 토론범위 숨기기에 기반한 방법을

최소 승인

또는 최소 노출 원칙이라고 합니다. 이 원칙은 소프트웨어 설계에 있어서 특정 모듈이나 객체의 API 설계와 같이 필요한 내용은 최소한으로 노출하고 그 내용은 숨겨야 한다는 의미입니다.

숨겨진 변수와 함수는 실수로 변수를 덮어쓸 수 있는 동일한 이름의 식별자 간의 충돌을 해결할 수 있습니다.

예:

var a = 2;
function foo(){
  var a = 3;
  console.log(a);
}
foo();
console.log(a);
이 기술은 일부 문제를 해결할 수 있지만 이상적이지 않으며 몇 가지 추가 문제를 일으킬 수 있습니다. 먼저 이름이 지정된 함수 foo()를 선언해야 합니다. 이는 foo라는 이름 자체가 두 번째로 이 함수는 함수 이름 foo()를 통해 명시적으로 호출되어 코드를 실행해야 합니다.

함수 이름이 필요하지 않고 자동으로 실행될 수 있는 함수라면 더욱 이상적일 것입니다. 다행스럽게도 js는 두 가지 문제에 대한 솔루션을 동시에 제공합니다. - (IIFE) 즉시 호출되는 함수 표현 -

즉시 함수 실행

var a = 2;
(function foo(){
    var a = 3;
    console.log(a);
})()
console.log(a);
우선, 즉시 함수 실행

을 수행하면 됩니다. 함수 선언으로 처리되지 않음

함수 표현식으로 처리됩니다. 함수 선언과 함수 표현식 구별하기:
함수가 선언의 첫 번째 단어인지 확인하세요. 첫 번째 단어이면 함수 선언이고, 그렇지 않으면 함수 표현식입니다. "(function" 함수의 즉각적인 실행은 " function "이 아니므로 함수 표현식입니다.

함수 선언함수 표현식 사이의 가장 중요한차이은 이름 식별자는 어디에 바인딩됩니까? 함수 선언의 함수 이름은 현재 범위에서 바인딩됩니다. 전역 범위에서 함수 선언을 생성하면 함수 이름에 액세스하여 전역 범위에서 실행할 수 있습니다. 함수 이름은 현재 범위가 아닌 자체 함수에 바인딩됩니다. 예를 들어 전역적으로 함수 표현식을 생성하는 경우 생성한 함수 표현식의 함수 이름을 직접 실행하면 오류가 보고됩니다. 스코프에는 그런 식별자가 없고, 함수 표현식의 스코프에서 함수 이름에 접근하면 함수에 대한 참조가 반환됩니다. 스코프 클로저, 뭐 "클로저"라는 두 단어는 조금 다릅니다. 이해하기 어렵고 (패키지가 닫혀 있고 내부에 신비한 것들이 숨겨져 있다고 상상할 수 있습니다) 클로저의 정의는 다음과 같습니다. 함수가 자신이 위치한 범위를 기억하고 액세스할 수 있으면 클로저가 발생합니다. 예를 들어(영어로 ㅋㅋ)

function foo() {
    var a = 2;
    function bar() {
        console.log(a);
    }
    bar();
}
foo();

위 코드 bar()는 위의 정의에 따른 것입니다. 기술적으로 말하면 그럴 수도 있지만 범위가 발견되지 않으면 위쪽으로 계속 검색하고, 발견되지 않으면 전역 범위까지 계속 검색한다는 것을 이해합니다. bar() 함수에는 foo()의 범위를 포괄하는 클로저가 있습니다.

function foo(){    var a  = 2;    function bar (){
        console.log(a);
    }    return bar;
}var baz = foo();
baz();

위 코드는

bar() 함수의 범위를 더 잘 보여줍니다(현재 전역 범위에서 실행됨). ) foo() 함수가 실행된 후에는 일반적으로 foo()의 전체 내부 범위가 파괴될 것으로 예상합니다. 왜냐하면 엔진에 더 이상 릴리스되지 않는

가비지 수집기

가 있다는 것을 알고 있기 때문입니다. foo()가 실행되었으므로 해당 내용은 다시 사용되지 않을 것으로 보이므로 재활용을 위해 정렬을 고려하는 것이 당연합니다. , baz 변수는 baz 실행 시 console.log(a)에 대한 참조를 저장합니다. 클로저를 이해하지 못하는 사람들은 실제로 오류가 보고될 것이라고 생각할 수 있습니다. foo() 함수 범위가 실행 후에 파괴되었나요? 어떻게 여전히 변수에 접근할 수 있나요? - 이것은 클로저입니다.

当foo()执行后,bar函数被返回全局作用域下,但是bar函数还保留着当时的词法作用域(当时写代码是的顺序就已经定义了作用域,这个作用域叫词法作用域--外面函数套着里面的函数的那种)甚至直到全局作用域。所以bar还留有foo()函数的引用。使得foo()函数没有被回收。

闭包可以说不出不在,只是你没有发现认出他。在定时器,事件监听器,ajax请求,跨窗口通信或者任何其他的异步(或者同步)任务中,只要使用了回调函数,实际上就是使用闭包。

for instance

function wait(message) {
    setTimeout(function timer() {
        console.log(message);
    }, 1000);
}
wait("hello");

在上面的代码中将一个内部函数(名为timer)传递给setTimerout(...).timer具有涵盖wait(...)的作用域的闭包。因此还保有对变量message的引用。wait()执行1000毫秒后,它的内部作用域不会消失,timer函数依然保有wait()作用域的闭包。

而闭包和立即执行函数息息相关。

循环和闭包

for(var i = 1; i <p>上面代码我们以为输出的会是1-5,可事实上输出的是5个6,这是为啥啊 -- 闭包啊。</p><p>延迟函数的回调会在循环结束时执行。事实上,当定时器运行时即使每个迭代的是setTimerout(...,0),所有的回调函数依然是循环结束后才会执行。我猜是跟js执行机制有关系吧。至于为什么都是6. 因为即使5个函数是在各个迭代中分别定义的,但是他们又被封闭在一个共享的全局作用域中因此实际上只有一个i.而怎么解决呢,立即执行函数来了!!!</p><pre class="brush:php;toolbar:false">for (var i = 1; i <p>打印出来1,2,3,4,5了欧,这回是你想要的数了。解释一下,5次循环创建了5个立即执行函数,这5个函数的作用域都不相同,立即函数接收的参数是当前循环的i.所以当timer执行时访问的就是自己立即执行函数对应的作用域。也就是说5个timer函数分别对应5个作用域,每个作用域保存的变量i都不同,解决啦!!!</p><p>你懂闭包了吗?</p><p><strong>js执行机制</strong></p><p><span class="bjh-p">JavaScript语言的一大特点就是单线程,也就是说,<span class="bjh-strong">同一个时间只能做一件事。那么,为什么JavaScript不能有多个线程呢?这样能提高效率啊。</span></span><span class="bjh-p">JavaScript的单线程,与它的用途有关。作为浏览器脚本语言,JavaScript的主要用途是与用户互动,以及操作DOM。这决定了它只能是单线程,否则会带来很复杂的同步问题。比如,假定JavaScript同时有两个线程,一个线程在某个DOM节点上添加内容,另一个线程删除了这个节点,这时浏览器应该以哪个线程为准</span><span class="bjh-p">所以,为了避免复杂性,从一诞生,JavaScript就是单线程,这已经成了这门语言的核心特征,将来也不会改变。</span></p><p><span class="bjh-p">单线程就意味着,所有任务需要排队,前一个任务结束,才会执行后一个任务。如果前一个任务耗时很长,后一个任务就不得不一直等着。JavaScript语言的设计者意识到这个问题,将所有任务分成两种,<span class="bjh-strong">一种是同步任务(synchronous),另一种是异步任务(asynchronous)。同步任务指的是,在主线程上排队执行的任务,只有前一个任务执行完毕,才能执行后一个任务;异步任务指的是,不进入主线程、而进入"任务队列"(task queue)的任务,只有"任务队列"通知主线程,某个异步任务可以执行了,该任务才会进入主线程执行。</span></span></p><p><span class="bjh-p">主线程从"任务队列"中读取事件,这个过程是循环不断的,所以整个的这种运行机制又称为Event Loop(事件循环)。只要主线程空了,就会去读取"任务队列",这就是JavaScript的运行机制。</span></p><p><span class="bjh-h3">哪些语句会放入异步任务队列及放入时机</span><span class="bjh-p">一般来说,有以下四种会放入异步任务队列:</span><span class="bjh-ol"><span class="bjh-li"><span class="bjh-p">setTimeout 和 setlnterval  ,<span class="bjh-li"><span class="bjh-p">DOM事件,<span class="bjh-li"><span class="bjh-p">ES6中的Promise,<span class="bjh-li"><span class="bjh-p">Ajax异步请求</span></span></span></span></span></span></span></span></span></p><p> 本文来自 <a href="https://www.php.cn/js-tutorial.html" target="_blank">js教程</a> 栏目,欢迎学习!</p>

위 내용은 JS 함수와 클로저에 대한 간략한 토론의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!

성명
이 기사는 cnblogs에서 복제됩니다. 침해가 있는 경우 admin@php.cn으로 문의하시기 바랍니다. 삭제
Python vs. JavaScript : 개발자를위한 비교 분석Python vs. JavaScript : 개발자를위한 비교 분석May 09, 2025 am 12:22 AM

Python과 JavaScript의 주요 차이점은 유형 시스템 및 응용 프로그램 시나리오입니다. 1. Python은 과학 컴퓨팅 및 데이터 분석에 적합한 동적 유형을 사용합니다. 2. JavaScript는 약한 유형을 채택하며 프론트 엔드 및 풀 스택 개발에 널리 사용됩니다. 두 사람은 비동기 프로그래밍 및 성능 최적화에서 고유 한 장점을 가지고 있으며 선택할 때 프로젝트 요구 사항에 따라 결정해야합니다.

Python vs. JavaScript : 작업에 적합한 도구 선택Python vs. JavaScript : 작업에 적합한 도구 선택May 08, 2025 am 12:10 AM

Python 또는 JavaScript를 선택할지 여부는 프로젝트 유형에 따라 다릅니다. 1) 데이터 과학 및 자동화 작업을 위해 Python을 선택하십시오. 2) 프론트 엔드 및 풀 스택 개발을 위해 JavaScript를 선택하십시오. Python은 데이터 처리 및 자동화 분야에서 강력한 라이브러리에 선호되는 반면 JavaScript는 웹 상호 작용 및 전체 스택 개발의 장점에 없어서는 안될 필수입니다.

파이썬 및 자바 스크립트 : 각각의 강점을 이해합니다파이썬 및 자바 스크립트 : 각각의 강점을 이해합니다May 06, 2025 am 12:15 AM

파이썬과 자바 스크립트는 각각 고유 한 장점이 있으며 선택은 프로젝트 요구와 개인 선호도에 따라 다릅니다. 1. Python은 간결한 구문으로 데이터 과학 및 백엔드 개발에 적합하지만 실행 속도가 느립니다. 2. JavaScript는 프론트 엔드 개발의 모든 곳에 있으며 강력한 비동기 프로그래밍 기능을 가지고 있습니다. node.js는 풀 스택 개발에 적합하지만 구문은 복잡하고 오류가 발생할 수 있습니다.

JavaScript의 핵심 : C 또는 C에 구축 되었습니까?JavaScript의 핵심 : C 또는 C에 구축 되었습니까?May 05, 2025 am 12:07 AM

javaScriptisNotBuiltoncorc; it'SangretedLanguageThatrunsonOngineStenWrittenInc .1) javaScriptWasDesignEdasAlightweight, 해석 hanguageforwebbrowsers.2) Endinesevolvedfromsimpleplemporectreterstoccilpilers, 전기적으로 개선된다.

JavaScript 응용 프로그램 : 프론트 엔드에서 백엔드까지JavaScript 응용 프로그램 : 프론트 엔드에서 백엔드까지May 04, 2025 am 12:12 AM

JavaScript는 프론트 엔드 및 백엔드 개발에 사용할 수 있습니다. 프론트 엔드는 DOM 작업을 통해 사용자 경험을 향상시키고 백엔드는 Node.js를 통해 서버 작업을 처리합니다. 1. 프론트 엔드 예 : 웹 페이지 텍스트의 내용을 변경하십시오. 2. 백엔드 예제 : node.js 서버를 만듭니다.

Python vs. JavaScript : 어떤 언어를 배워야합니까?Python vs. JavaScript : 어떤 언어를 배워야합니까?May 03, 2025 am 12:10 AM

Python 또는 JavaScript는 경력 개발, 학습 곡선 및 생태계를 기반으로해야합니다. 1) 경력 개발 : Python은 데이터 과학 및 백엔드 개발에 적합한 반면 JavaScript는 프론트 엔드 및 풀 스택 개발에 적합합니다. 2) 학습 곡선 : Python 구문은 간결하며 초보자에게 적합합니다. JavaScript Syntax는 유연합니다. 3) 생태계 : Python에는 풍부한 과학 컴퓨팅 라이브러리가 있으며 JavaScript는 강력한 프론트 엔드 프레임 워크를 가지고 있습니다.

JavaScript 프레임 워크 : 현대적인 웹 개발 파워JavaScript 프레임 워크 : 현대적인 웹 개발 파워May 02, 2025 am 12:04 AM

JavaScript 프레임 워크의 힘은 개발 단순화, 사용자 경험 및 응용 프로그램 성능을 향상시키는 데 있습니다. 프레임 워크를 선택할 때 : 1. 프로젝트 규모와 복잡성, 2. 팀 경험, 3. 생태계 및 커뮤니티 지원.

JavaScript, C 및 브라우저의 관계JavaScript, C 및 브라우저의 관계May 01, 2025 am 12:06 AM

서론 나는 당신이 이상하다는 것을 알고 있습니다. JavaScript, C 및 Browser는 정확히 무엇을해야합니까? 그들은 관련이없는 것처럼 보이지만 실제로는 현대 웹 개발에서 매우 중요한 역할을합니다. 오늘 우리는이 세 가지 사이의 밀접한 관계에 대해 논의 할 것입니다. 이 기사를 통해 브라우저에서 JavaScript가 어떻게 실행되는지, 브라우저 엔진의 C 역할 및 웹 페이지의 렌더링 및 상호 작용을 유도하기 위해 함께 작동하는 방법을 알게됩니다. 우리는 모두 JavaScript와 브라우저의 관계를 알고 있습니다. JavaScript는 프론트 엔드 개발의 핵심 언어입니다. 브라우저에서 직접 실행되므로 웹 페이지를 생생하고 흥미롭게 만듭니다. 왜 Javascr

See all articles

핫 AI 도구

Undresser.AI Undress

Undresser.AI Undress

사실적인 누드 사진을 만들기 위한 AI 기반 앱

AI Clothes Remover

AI Clothes Remover

사진에서 옷을 제거하는 온라인 AI 도구입니다.

Undress AI Tool

Undress AI Tool

무료로 이미지를 벗다

Clothoff.io

Clothoff.io

AI 옷 제거제

Video Face Swap

Video Face Swap

완전히 무료인 AI 얼굴 교환 도구를 사용하여 모든 비디오의 얼굴을 쉽게 바꾸세요!

뜨거운 도구

SublimeText3 Linux 새 버전

SublimeText3 Linux 새 버전

SublimeText3 Linux 최신 버전

ZendStudio 13.5.1 맥

ZendStudio 13.5.1 맥

강력한 PHP 통합 개발 환경

에디트플러스 중국어 크랙 버전

에디트플러스 중국어 크랙 버전

작은 크기, 구문 강조, 코드 프롬프트 기능을 지원하지 않음

Eclipse용 SAP NetWeaver 서버 어댑터

Eclipse용 SAP NetWeaver 서버 어댑터

Eclipse를 SAP NetWeaver 애플리케이션 서버와 통합합니다.

맨티스BT

맨티스BT

Mantis는 제품 결함 추적을 돕기 위해 설계된 배포하기 쉬운 웹 기반 결함 추적 도구입니다. PHP, MySQL 및 웹 서버가 필요합니다. 데모 및 호스팅 서비스를 확인해 보세요.