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 <= 5; i++){
    setTimeout(function timer(){
        console.log(i);
    },i*1000);
}

上面代码我们以为输出的会是1-5，可事实上输出的是5个6，这是为啥啊 -- 闭包啊。

延迟函数的回调会在循环结束时执行。事实上，当定时器运行时即使每个迭代的是setTimerout(...,0),所有的回调函数依然是循环结束后才会执行。我猜是跟js执行机制有关系吧。至于为什么都是6. 因为即使5个函数是在各个迭代中分别定义的，但是他们又被封闭在一个共享的全局作用域中因此实际上只有一个i.而怎么解决呢，立即执行函数来了！！！

for (var i = 1; i <= 5; i++) {
    (function (i) {
        setTimeout(function timer() {
            console.log(i);
        }, i * 1000);
    })(i)

}

打印出来1,2,3,4,5了欧，这回是你想要的数了。解释一下，5次循环创建了5个立即执行函数，这5个函数的作用域都不相同，立即函数接收的参数是当前循环的i.所以当timer执行时访问的就是自己立即执行函数对应的作用域。也就是说5个timer函数分别对应5个作用域，每个作用域保存的变量i都不同，解决啦！！！

你懂闭包了吗？

js执行机制

JavaScript语言的一大特点就是单线程，也就是说，同一个时间只能做一件事。那么，为什么JavaScript不能有多个线程呢？这样能提高效率啊。JavaScript的单线程，与它的用途有关。作为浏览器脚本语言，JavaScript的主要用途是与用户互动，以及操作DOM。这决定了它只能是单线程，否则会带来很复杂的同步问题。比如，假定JavaScript同时有两个线程，一个线程在某个DOM节点上添加内容，另一个线程删除了这个节点，这时浏览器应该以哪个线程为准所以，为了避免复杂性，从一诞生，JavaScript就是单线程，这已经成了这门语言的核心特征，将来也不会改变。

单线程就意味着，所有任务需要排队，前一个任务结束，才会执行后一个任务。如果前一个任务耗时很长，后一个任务就不得不一直等着。JavaScript语言的设计者意识到这个问题，将所有任务分成两种，一种是同步任务（synchronous），另一种是异步任务（asynchronous）。同步任务指的是，在主线程上排队执行的任务，只有前一个任务执行完毕，才能执行后一个任务；异步任务指的是，不进入主线程、而进入"任务队列"（task queue）的任务，只有"任务队列"通知主线程，某个异步任务可以执行了，该任务才会进入主线程执行。

主线程从"任务队列"中读取事件，这个过程是循环不断的，所以整个的这种运行机制又称为Event Loop（事件循环）。只要主线程空了，就会去读取"任务队列"，这就是JavaScript的运行机制。

哪些语句会放入异步任务队列及放入时机一般来说，有以下四种会放入异步任务队列：setTimeout 和 setlnterval  ，DOM事件，ES6中的Promise，Ajax异步请求

 本文来自 js教程 栏目，欢迎学习！

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