Codebeispiel-Erklärung des js-Abschlusses

Dieser Artikel enthält Codebeispiele zu js-Verschlüssen. Freunde in Not können darauf verweisen.

Um genau zu sein, basieren Schließungen auf dem normalen Verarbeitungsmechanismus der Garbage Collection. Mit anderen Worten: Nach der Ausführung einer Funktion (Funktionsbereich) werden im Allgemeinen alle darin deklarierten Variablen vom Garbage Collector freigegeben und recycelt. Der Abschluss verwendet jedoch einen Trick, um zu ermöglichen, dass die Variablen im Bereich gespeichert und nicht durch Müll gesammelt werden, nachdem die Funktion ausgeführt wurde.

Abschluss

Definition

MDN-Definition

javascriptkit

lexikalischer Bereich

Bereichskette

Während der Ausführung der Funktion zuerst Wenn Sie können Wenn Sie die Variable nicht in sich selbst finden, suchen Sie sie im Bereich (lexikalischer Bereich), in dem die aktuelle Funktion erstellt wird. Achten Sie ab diesem Zeitpunkt auf den aktuellen Status der Variablen

im Bereich Kette. Die Funktion blog

bildet zusammen mit der Variable, nach der Sie in ihrer Gültigkeitsbereichskette suchen, zusammen einen Abschluss

Im Allgemeinen werden Abschlüsse hauptsächlich zum

Verkapseln von Daten verwendet

Temporäre Daten

Ein typischer Abschlussfall

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

Wenn der folgende Code nicht innerhalb der Funktion ausgeführt wird

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

Nachdem die Codeausführung abgeschlossen ist, im Inneren Die Funktion Die lokale Variable speed wird zerstört Da der globale Skalar speedUp immer existiert (sofern die aktuelle Seite nicht geschlossen ist, existiert die globale Variable immer), kann der Bereich innerhalb der Funktion nicht zerstört werden, und es gibt Dinge darin Wird immer verwendet. Der Garbage-Collection-Mechanismus des Browsers ist ähnlich. Wenn wir speedUp() ausführen, wird eine fn in der Funktion zurückgegeben, wodurch ein Abschluss gebildet wird einfach verstanden als

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

Dieser Codeteil bildet einen Abschluss. Wenn fn nicht zurückgegeben wird, werden die lokalen Variablen innerhalb der Funktion zerstört.

Wir können einen Blick darauf werfen, wie sich der obige Code mithilfe von Anweisungen zur sofortigen Ausführung und Funktionen zur sofortigen Ausführung weiterentwickeln kann:

Verwandte Fälle von

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)

-Abschluss

Wie viel gibt der folgende Code aus? Wenn Sie 3 ausgeben möchten, wie ändern Sie den Code?

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

Gleiche Evolution

Angenommen, es gibt nur zwei Schleifenebenen:

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)

Nach der Transformation (sofortige Ausführung von Anweisungen, Evolutionsprozess)

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

Kapselung ein Autoobjekt

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

Wie viel gibt der folgende Code aus? So geben Sie kontinuierlich 0,1,2,3,4 aus

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

Das Ausgabeergebnis ist: Delayer:5 (5 aufeinanderfolgende Ausgaben) Wenn setTimeout ausgeführt wird, bleibt der Code im mittleren Bereich hängen Führen Sie dann die Task-Warteschlange aus, bis die i-Durchquerung abgeschlossen ist, und zu diesem Zeitpunkt ist i = 5, also der Ausgabeverzögerer:5 (5 aufeinanderfolgende Ausgaben)

Nach der Änderung

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

oder

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

Wie viel gibt der folgende Code aus?

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

Vervollständigen Sie den Code, um das Array nach Name, Alter und einem beliebigen Feld zu sortieren

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'))

Antworten

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'))

Schreiben Sie eine Summenfunktion und implementieren Sie die folgende Aufrufmethode

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

Das obige ist der detaillierte Inhalt vonCodebeispiel-Erklärung des js-Abschlusses. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!