JS 클로저에 대한 코드 예제 설명

이 기사는 js 클로저에 대한 코드 예제를 제공합니다. 이는 특정 참조 가치가 있으므로 도움이 될 수 있습니다.

정확하게 말하면 클로저는 일반적인 가비지 수집 처리 메커니즘을 기반으로 합니다. 즉, 일반적으로 함수(함수 범위)가 실행된 후 해당 함수에 선언된 모든 변수는 가비지 수집기에 의해 해제되고 재활용됩니다. 그러나 클로저는 함수가 실행된 후 범위의 변수가 저장되고 가비지 수집되지 않도록 하는 트릭을 사용합니다.

closure

Definition

MDNDefinition

javascriptkit

어휘 범위

scope chain#🎜 🎜# 함수를 실행하면 먼저 자신 내에서 변수를 찾습니다. 찾을 수 없으면 현재 함수가 생성된 범위(어휘 범위)에서 찾습니다. 이 시점부터 현재 상태에 주의하세요.

스코프 체인 블로그

스코프 체인에서 찾고 있는 함수와 변수가 함께 클로저를 형성합니다

정상에서 상황 클로저를 사용하는 주요 목적은

데이터 캡슐화

임시 데이터

일반적인 클로저 사례

function car(){
 var speed = 0
 function fn(){
 speed++
 console.log(speed)
 }
 return fn
}
var speedUp = car()
speedUp() //1
speedUp() //2

함수 내에서 다음 코드가 실행되지 않으면

function fn(){
 speed++
 console.log(speed)
 }
return fn

코드 실행이 완료된 후 전역 스칼라 speedUp이 항상 존재하기 때문에(현재 페이지가 닫혀 있으면 전역 변수는 항상 존재합니다. 그러면 함수 내부의 범위는 파괴될 수 없으며 그 안에 항상 사용되는 것이 있습니다. 이는 speedUp()을 실행하면 실행됩니다. 검색의 어휘 범위에서 fn이 함수에 반환되어 클로저가 형성됩니다.

var speed = 0
function fn(){
 speed++
 console.log(speed)
}

이 코드 조각이 클로저를 형성합니다. , 함수 내부의 지역 변수는 파괴됩니다.

즉시실행문과 즉시실행 함수를 사용하여 위의 코드가 어떻게 진화할 수 있는지 확인할 수 있습니다.

function car(){
 var speed = 0
 function fn(){
 speed++
 console.log(speed)
 }
 return fn
}
var speedUp = car()
//1
function car(){
 var speed = 0
 return function (){
 speed++
 console.log(speed)
 }
}
var speedUp = car()
//2
function car(speed){
 return function (){
 speed++
 console.log(speed)
 }
}
var speedUp = car(3)
//3
function car(){
 var speed = arguments[0]
 return function (){
 speed++
 console.log(speed)
 }
}
var speedUp = car()
//4
function car(){
 var speed = 0
 return function (){
 speed++
 console.log(speed)
 }
}
//5 car可以不写，则为匿名函数 
var speedUp = (function car(speed){
 return function (){
 speed++
 console.log(speed)
 }
}
)(3)

클로저 관련 사례다음 코드는 얼마나 출력되나요? 3을 출력하고 싶다면 코드를 어떻게 수정하나요?

var fnArr = [];
for (var i = 0; i < 10; i ++) {
 fnArr[i] = function(){
 return i
 };
}
console.log( fnArr[3]() ) // 10

동등한 진화

두 가지 수준의 루프만 있다고 가정:

var fnArr = []
for (var i = 0; i < 2; i ++) {
 fnArr[i] = (function(j){
 return function(){
 return j
 } 
 })(i)
}
fnArr[3]()
//1
var fnArr = [] 
fnArr[0] = (function(j){
 return function(){
 return j
 } 
 })(0)
}
fnArr[1] = (function(j){
 return function(){
 return j
 } 
 })(1)
}
fnArr[3]()
//2
var a = (function(j){
 return function(){
 return j
 } 
 })(0)
}
var b = (function(j){
 return function(){
 return j
 } 
 })(1)
}
b()
//3
var a = (function(j){
 return function(){
 return j
 } 
 })(0)
}
function fn2(j){
 return function(){
 return j
 }
}
var b = fn2(1)
//4
var a = (function(j){
 return function(){
 return j
 } 
 })(0)
}
function fn2(j){
 return function(){
 return j
 }
 return f
}
var b = fn2(1)
//5
var a = (function(j){
 return function(){
 return j
 } 
 })(0)
}
function fn2(j){
 var j = arguments[0]
 function f(){
 return j
 }
 return f
}
var b = fn2(1)

변환 후(문장의 즉각적인 실행, 진화 과정) #🎜 🎜#

var fnArr = []
for (var i = 0; i < 10; i ++) {
 fnArr[i] = (function(j){
 return function(){
 return j
 } 
 })(i)
}
console.log( fnArr[3]() ) // 3
var fnArr = []
for (var i = 0; i < 10; i ++) {
 (function(i){
 fnArr[i] = function(){
 return i
 } 
 })(i)
}
console.log( fnArr[3]() ) // 3
var fnArr = []
for (let i = 0; i < 10; i ++) {
 fnArr[i] = function(){
 return i
 } 
}
console.log( fnArr[3]() ) // 3

# 🎜🎜#자동차 객체 캡슐화

var Car = (function(){
 var speed = 0;
 function set(s){
 speed = s
 }
 function get(){
 return speed
 }
 function speedUp(){
 speed++
 }
 function speedDown(){
 speed--
 }
 return {
 setSpeed: setSpeed,
 get: get,
 speedUp: speedUp,
 speedDown: speedDown
 }
})()
Car.set(30)
Car.get() //30
Car.speedUp()
Car.get() //31
Car.speedDown()
Car.get() //3

다음 코드는 얼마를 출력합니까? 0,1,2,3,4를 연속으로 출력하는 방법

for(var i=0; i<5; i++){
 setTimeout(function(){
 console.log(&#39;delayer:&#39; + i )
 }, 0)
}

출력 결과는 다음과 같습니다: Delayer:5 (5개 연속 출력) setTimeout이 실행되면 코드가 작업 대기열에 정지됩니다. , 순회가 완료된 후 i를 기다리고 있으며 이때 i = 5이므로 출력 지연기: 5(연속 출력 5개)

수정 후

for(var i=0; i<5; i++){
 (function(j){
 setTimeout(function(){
 console.log(&#39;delayer:&#39; + j )
 }, 0)//1000-1000*j 
 })(i)
}

or

for(var i=0; i<5; i++){
 setTimeout((function(j){
 return function(){
 console.log(&#39;delayer:&#39; + j )
 }
 }(i)), 0) 
}

#🎜 🎜#다음 코드는 얼마나 출력되나요?

function makeCounter() {
 var count = 0
 return function() {
 return count++
 };
}
var counter = makeCounter()
var counter2 = makeCounter();
console.log( counter() ) // 0
console.log( counter() ) // 1
console.log( counter2() ) // 0
console.log( counter2() ) // 1

이름, 나이, 필드별로 배열을 정렬하는 코드 완성

var users = [
 { name: "John", age: 20, company: "Baidu" },
 { name: "Pete", age: 18, company: "Alibaba" },
 { name: "Ann", age: 19, company: "Tecent" }
]
users.sort(byName) 
users.sort(byAge)
users.sort(byField('company'))

Answer

function byName(user1, user2){
 return user1.name > user2.name
}
function byAge (user1, user2){
 return user1.age > user2.age
}
function byFeild(field){
 return function(user1, user2){
 return user1[field] > user2[field]
 }
}
users.sort(byField('company'))

합계 함수를 작성하여 팔로우콜 Way

console.log( sum(1)(2) ) // 3
console.log( sum(5)(-1) ) // 4

위 내용은 JS 클로저에 대한 코드 예제 설명의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!