JavaScript-funktioner er interessante og vigtige.

Artikel under udvikling!

En artikel, hvor vi vil overveje, hvad en funktion er, samt den traditionelle (klassiske) version af at arbejde med den. Derudover vil vi analysere, hvad argumenterne (parametrene) for funktionen og returoperatoren er.

Hvad er en funktion?

En funktion er et sæt instruktioner, der kan gives et navn og derefter tilgås med det navn fra et hvilket som helst sted i programmet.

Et klassisk eksempel på brug af en funktion. Websiden har JavaScript-kode, et fragment, hvori gentages flere gange. For at undgå dette kan du designe dette fragment som en funktion og derefter kalde det ind på de rigtige steder kode efter navnet på denne funktion. At kalde denne funktion vil betyde at udføre instruktionerne i den.

Hvordan organiserer man udførelsen af ​​en opgave i JavaScript ved hjælp af funktioner? For at gøre dette gør du normalt:

• opdele opgaven i dens bestanddele (delopgaver);
• delopgaver formaliseres gennem funktioner;
• udvikle hovedkoden ved hjælp af kald til de oprettede funktioner.

Som følge heraf bliver et sådant program mere struktureret. Det er nemmere at tilføje forskellige ændringer og tilføje nye funktioner.

Erklære og kalde en funktion

Operationer med en funktion i JavaScript kan opdeles i 2 trin:

• erklæring (oprettelse) af en funktion.
• kalde (udføre) denne funktion.

Funktionserklæring. Oprettelse af en funktion i JavaScript begynder med at skrive nøgleordsfunktionen, derefter angives navnet på funktionen, derefter angives parametre i parentes x, hvis det er nødvendigt, derefter angives instruktioner, som er indesluttet i seler.

// funktionserklæring someName funktion someName() ( alert("Du kaldte funktion someName!"); ) JavaScript - Syntaks for funktionserklæring

Funktioner af denne art i JavaScript kaldes funktionserklæringer. Ud over denne type skelner JavaScript også fungere definitionsudtryk og pilfunktionsudtryk.

Funktionsnavnet er sammensat efter de samme regler som variabelnavnet. De der. det kan indeholde bogstaver, tal (0-9), "$" og "_" tegn. Det anbefales kun at bruge bogstaver i det engelske alfabet (a-z, A-Z) som bogstaver. Navnet på en funktion, ligesom navnet på en variabel, kan ikke begynde med et tal.

En funktion kan have så mange parametre som ønsket eller slet ingen. Parentes er under alle omstændigheder inkluderet. Hvis der er flere parametre, skal de adskilles med et komma. Funktionsparametre tilgås af deres navn.

Et sæt instruktioner omgivet af krøllede klammer er den funktionskode, der vil blive udført, når den kaldes.

Funktionsopkald. Selve den erklærede funktion vil ikke blive udført. For at køre det, skal det kaldes. En funktion kaldes ved at angive dens navn og to parenteser. Argumenter angives i parentes, hvis det er nødvendigt.

// kalder funktionen givet i det foregående eksempel someName(); JavaScript - Funktionsopkaldssyntaks

Er en funktion et objekt i JavaScript?

Funktioner i JavaScript er objekter. I JavaScript er alt et objekt undtagen de seks primitive datatyper. Og hvis funktionen er et objekt, så kan en reference til den gemmes i en variabel.

// funktionserklæring someName function someName() ( alert("Du kaldte funktionen someName!"); ) var reference = someName;

Herefter kan du kalde funktionen sådan:

Reference();

Funktionsparametre og argumenter

Funktionsargumenter er værdier, der sendes til en funktion, når den kaldes. Argumenter adskilles fra hinanden ved hjælp af et komma.

// kald sayWelcome-funktionen og sender to argumenter til den sayWelcome("Ivan", "Ivanov"); // endnu et kald til sayWelcome-funktionen med to argumenter sayWelcome("Petr", "Petrov");

Funktionsparametre er en af ​​måderne i JavaScript, hvorpå du kan få adgang til argumenter i en funktion. Parametrene for funktionen på tidspunktet for dens erklæring er beskrevet i parentes.

Funktionsparametre er med andre ord lokale variabler, der oprettes automatisk, når funktionen startes. Parametrene modtager som værdier de tilsvarende argumenter, der sendes til funktionen under dens opkald. Du kan kun få adgang til parametrene inden for denne funktion; uden for den findes de ikke.

// erklæring af en funktion sayWelcome, som har to parametre funktion sayWelcome (userFirstName, userLastName) ( // en instruktion, der viser værdierne af parametrene "userFirstName" og "userLastName" til konsollen console.log("Welcome, " + brugerEfternavn + " " + brugerFornavn); )

I Java sprog Script når en funktion kaldes, behøver antallet af argumenter ikke svare til antallet af parametre. Parametre, der ikke blev sat til værdi, da de blev kaldt, vil være lig med udefineret.

Lad os for eksempel kalde funktionen fra eksemplet ovenfor uden at angive en eller to parametre:

// kalder sayWelcome-funktionen og sender et argument til den sayWelcome("Peter"); // Velkommen, udefinerede Peter // kalder sayWelcome-funktionen uden at sende nogen argumenter til den sayWelcome(); // Velkommen, udefineret udefineret

Et eksempel på en funktion, der blot udsender de argumenter, der sendes til den til browserkonsollen:

// funktionserklæring funktion outputParam(param1, param2, param3) ( console.log(param1 + "; " + param2 + "; " + param3); ) // kalder til funktionen outputParam og sender den et andet antal parametre outputParam( "Regn", "Sne", "Tåge"); // Regn; Sne; Tåge outputParam(17); // 17; udefineret; udefineret outputParam(24,33); // 24; 33; udefineret outputParam(); // udefineret; udefineret; udefineret

En anden måde at få adgang til argumenter i en funktion er at bruge objektet specielle argumenter. Argumenter tilgås via argumenter på samme måde som elementer i et regulært array, dvs. efter deres serienumre. Således vil argument - give dig mulighed for at få det første argument, argumenter - det andet argument osv.

// funktionserklæring sum funktion sum(tal1, tal2) ( /* num1 eller argumenter – få værdien af ​​argument 1 num2 eller argumenter – få værdien af ​​argument 2 */ var sum1 = num1 + tal2, sum2 = argumenter + argumenter; return "Sum, opnået ved 1. metode er lig med " + sum1 + "; summen opnået ved 2. metode er " + sum2; ) /* udlæs resultatet af sumfunktionen til konsollen 7 - det første argument (det kan tilgås enten med navnet num1 eller ved hjælp af argumenter) 4 - det andet argument (det kan tilgås enten med navnet num2 eller ved hjælp af argumenter) */ console.log(sum(7,4));

Den største forskel mellem disse metoder er, at den første af dem kun giver dig adgang til de argumenter, der blev givet navne på funktionsdeklarationsstadiet. Den anden metode giver dig mulighed for at få værdien af ​​ethvert argument, selvom det ikke har et navn (af serienummer). Dette er en mulighed JavaScript sprog giver dig mulighed for at skabe universelle fleksible funktioner.

Udover at modtage argumenter giver arguments-objektet dig også mulighed for at kende deres nummer. Dette gøres ved hjælp af egenskaben længde.

Du kan iterere over de argumenter, der er sendt til funktionen, f.eks for sløjfe eller for ... af .

// funktionserklæring sum funktion sum() ( var i = 0; console.log("Output alle argumenter ved hjælp af en for-løkke"); for (i; i< arguments.length; i++) { console.log(i + 1 + " аргумент равен " + arguments[i]); } console.log("Вывод всех аргументов с помощью цикла for...of"); for (arg of arguments) { console.log(arg); } } // вызов функции sum sum(7, 4, 3, 1);

En funktion, der viser alle de argumenter, der er sendt til konsollen, og deres nummer:

// funktionsdeklaration funktion myFunction () ( var i; console.log("Antal parametre passeret = " + arguments.length); // lad os gennemgå alle parametrene ved hjælp af en for-løkke for (i = 0; i< arguments.length; i++) { console.log(i + " параметр = " + arguments[i]); } } // вызовы функции myFunction myFunction(3, 7, 27, "JavaScript"); myFunction(); myFunction("Яблоки", "Груши", "Апельсины");

En funktion, der udfører tilføjelsen af ​​alle argumenter, der sendes til den (deres antal er ukendt på forhånd):

// funktionserklæring var myCalc = function() ( // lad os gennemgå alle parametrene ved hjælp af for-løkken var i, sum = 0; for (i = 0; i lt; arguments.length; i++) ( sum += argumenter [i] ; ) // returner summen som et resultat returner sum; ) // funktionskald (output til konsollen) console.log(myCalc(4, 20, 17, -6));

Som et resultat kan du ved hjælp af arguments-objektet implementere følgende i funktionsteksten:

• kontrol af antallet af beståede argumenter;
• behandle et vilkårligt antal parametre.

Ud over selve funktionen har andre funktioner, der er placeret i den, også adgang til de argumenter, der sendes til den på opkaldsstadiet.

Funktion mainF(p1, p2) ( funktion childF() ( console.log("p1 = " + p1 + "; p2 = " + p2); ) childF(); ) mainF(3, 5); // p1 = 3; p2 = 5 hovedF(4, 7); //p1 = 4; p2 = 7

Standardindstillinger

Fra og med ECMAScript 2015 (6) kan en funktionsparameter indstilles til standardværdien.

Lad os f.eks. indstille "farve"-parameteren til dens standardværdi, lig med "#009688":

Funktion sætBGColor(farve = "#009688") ( document.body.style.backgroundColor = farve; ) setBGColor(); // baggrundsfarven vil være #009688 setBGColor("rød"); // baggrundsfarven vil være rød

Før ECMAScript 2015 kunne du indstille parameteren til dens standardværdi, for eksempel sådan:

Funktion sætBGColor(farve) (farve = farve !== udefineret ? farve: "#009688"; // sæt farve til standardværdien for "#009688" document.body.style.backgroundColor = farve; )

Resterende parametre

Hvis du, når du kalder en funktion, sender flere argumenter til den, end den har parametre, så kan du få de resterende ved hjælp af de såkaldte rest-patametre. Denne mulighed dukkede op på det sprog, der starter med ECMAScript 2015.

// ...nums - de resterende parametre, der kan tilgås i I dette tilfælde ved navn nums funktion doMath(mathAction, ...nums) ( var result = 0; nums.forEach(function(value) (switch (mathAction) (case "sum": resultat += værdi; break; case "sumCube ": resultat += værdi**3; break; case "sumSquare": resultat += værdi**2; break; standard: resultat = 0; ) )) returnerer resultat; ) console.log(doMath("sum", 3, 4, 21, -4)); // 24 (3 + 4 + 21 + (-4)) console.log(doMath("sumSquare", 1, 4)); // 17 (1^2 + 4^2) console.log(doMath("sumCube", 3, 2, 4)); // 99 (3^3 + 2^3 + 4^3)

returopgørelse

Return-sætningen er beregnet til at returnere en værdi eller resultatet af evaluering af et udtryk nuværende funktion. Værdien eller udtrykket skal adskilles fra returneringen med et mellemrum. Derudover stopper return-sætningen udførelsen af ​​funktionen, dvs. alle instruktioner efter den vil ikke blive udført.

En funktion i JavaScript returnerer altid et resultat, uanset om en return-sætning bruges eller ej.

// funktion, der returnerer resultatfunktionen sayWelcome (userFirstName, userLastName) ( if ((!userFirstName) || (!userLastName)) returnerer "Velkommen, anonym bruger"; ellers returnerer "Velkommen, " + brugerEfternavn + " " + brugerFornavn ; ) // variabel erklæring person var person; // tildel resultatet af sayWelcome-funktionen til personvariablen person = sayWelcome("Ivan","Ivanov"); // udskriv værdien af ​​variablen til konsollen console.log(person); //Instruktion, der vil udsende resultatet af sayWelcome-funktionen console.log(sayWelcome("Petr","Petrov")); //Instruktion, der vil udsende resultatet af sayWelcome-funktionen console.log(sayWelcome("Sidorov"), til konsollen); JavaScript - Funktion med parameterkontrol

En funktion i JavaScript returnerer altid et resultat som et resultat af dets udførelse, selvom det ikke er eksplicit defineret ved hjælp af return-sætningen. Dette resultat er udefineret.

// 1. funktion, der ikke returnerer nogen resultatfunktion sayWelcome (userFirstName, userLastName) ( console.log("Welcome, " + userLastName + " " + userFirstName); ) // lad os prøve at få resultatet fra en funktion, der gør ikke returnere noget console .log(sayWelcome("Ivan", "Ivanov")); // 2. funktion, der indeholder en retursætning uden en værdifunktion sayDay (dag) ( day = "Today," + day; return; //denne instruktion vil ikke blive udført, fordi den kommer efter returneringssætningen console.log(day) ; ) // lad os prøve at få resultatet fra en funktion, der indeholder en retursætning uden en værdi console.log(sayDay("21. februar 2016")); JavaScript - Få værdi fra en funktion, der ikke returnerer noget

Det samme resultat opnås, hvis returopgørelsen ikke angiver en returværdi.

Funktionsoverbelastning i JavaScript

Funktionsoverbelastning i programmering er evnen til at erklære flere funktioner med samme navne i ét omfang. Sådanne funktioner adskiller sig fra hinanden i typen og antallet af argumenter. Hver funktion har sin egen programlogik. Funktionsoverbelastning bruges, så lignende handlinger kan udføres ved brug af et enkelt funktionsnavn.

JavaScript-sproget understøtter ikke funktionsoverbelastning på samme måde, som det er implementeret for eksempel i C-lignende sprog. De der. I JavaScript kan du ikke oprette flere funktioner med de samme navne, der er i samme omfang.

Lignende funktionalitet kan implementeres i JavaScript ved hjælp af følgende trin:

• For at kontrollere, om et argument er bestået eller ej, skal du bruge en betingelse, der kontrollerer dets værdi for undefined .
• For at kontrollere antallet af argumenter, der sendes til en funktion, skal du bruge egenskaben arguments length for objektet.
• For at finde ud af typen af ​​den beståede argumentværdi skal du bruge typen af ​​eller forekomst af operatorer.
• At arbejde med variabelt antal argumenter, brug arguments-objektet.
• Fra og med ECMAScript6 kan du angive standardværdier for argumenter.

Lad os for eksempel oprette en funktion, der kan kaldes med et eller to argumenter:

//erklæring af en funktion, der skifter farve baggrund elements funktion setBgColor(bgColor,elements) ( //hvis elements-parameteren ikke er angivet, når der kaldes if (elements=== undefined) ( //indstil derefter dens værdi til "div" elementer = "div"; ) //hent alle elements elementer = $(elementer); //iterer gennem alle elementer og sæt dem til den angivne baggrundsfarve elements.each(function())( $(this).css("baggrundsfarve",bgColor); )); ) /*Kald funktionen setBgColor , og specificer én parameter. Fordi 2 parameter ikke er angivet, så vil denne funktion ændre baggrundsfarven for alle div-elementer.*/ setBgColor("grøn"); /*Kald setBgColor-funktionen, og specificer 2 parametre. Fordi 2 parameter er specificeret, så denne funktion vil kun ændre baggrundsfarven for knapelementerne.*/ setBgColor("#ff0000","button");

Lad os foretage nogle ændringer i ovenstående kode. Vi angiver nemlig standardværdien for den anden parameter:

//deklaration af en funktion, der ændrer baggrundsfarven på elementer //elements-parameteren har værdien "div" som standard funktion setBgColor(bgColor,elements = "div") ( //hent alle elementer elementer = $(elementer); //iterate alle elementer og indstil dem til den angivne baggrundsfarve elements.each(function())( $(this).css("baggrundsfarve",bgColor); )); ) //kald funktionen setBgColor, angiv en parameter setBgColor("grøn" ); //kald funktionen setBgColor, angiv 2 parametre setBgColor("#ff0000","button");

Et eksempel på, hvordan du i JavaScript kan implementere en "overbelastet" funktion, der beregner antallet af kalorier, en person har brug for pr. dag:

// beskrivelse af funktionen funktion countCal(køn, højde) ( // parametre: køn (køn) og højde (højde) var resultat; if ((køn === 0) || (køn === "mand") ) ( resultat = (højde - 100) * 20; ) else if ((køn === 1) || (køn === "kvinde")) ( resultat = (højde - 105) * 19; ) if (resultat ) ( // argumenter - aktivitetsniveau if (argumenter) ( resultat *= argumenter; ) console.log("Mængde kcal for normal levetid: " + resultat); ) else ( console.log("Ugyldige parametre"); ) ) / * kalder en funktion og sender 2 argumenter til den (1 - "mand", den kan tilgås ved at bruge navnet sex og argumenter; 2 - værdien 185, den kan tilgås ved at bruge navnet sex og argumenter) */ countCal ("mand", 185); /* kalder en funktion og sender 3 parametre til den, selvom kun 2 er til stede i funktionsbeskrivelsen (i dette tilfælde kan du kun få værdien af ​​den 3. parameter som argumenter) */ countCal(0, 185, 2);

Rekursion

Rekursion er et kald i kroppen af ​​en eller anden funktion til sig selv.

En funktion kaldes normalt afhængigt af, hvordan den er erklæret ved navn eller af en variabel, der indeholder en reference til funktionen.

Funktion fakta(n) ( if (n === 1) ( return 1; ) return fact(n-1) * n; ) console.log(fakta(5)); // 120

Du kan kalde en funktion inde i dens krop ikke kun ved navn, men også ved at bruge callee-egenskaben for arguments-objektet. Men denne ejendom Det er bedre ikke at bruge det, fordi... den er forældet. Desuden i strengt regime det virker slet ikke.

Hvad er indbyggede (standard) funktioner?

JavaScript har et stort sæt indbyggede (standard) funktioner. Disse funktioner er allerede beskrevet i selve browsermotoren. Næsten alle af dem er metoder til et eller andet objekt.

For eksempel, for at kalde den indbyggede funktion (metode) alarm, behøver den ikke at blive erklæret først. Det er allerede beskrevet i browseren. Opkald advarselsmetode gøres ved at angive et navn, parenteser og et argument inde i dem. Denne metode designet til at vise en besked på skærmen i form af en dialogboks. Tekstbesked er taget fra parameterværdien for denne funktion.

// kalder alarmfunktionen alert("Noget tekst"); JavaScript - Kalder advarselsfunktionen

For hurtigt at udføre handlinger i browseren og ikke at gentage dem, er der udviklet specielle JavaScript-funktioner, der væsentligt forenkler arbejdet med forskellige dokumenter.

Ved brug af et specifikt program, skal du ofte gentage den samme handling flere gange. For eksempel, hver gang en besøgende besøger et websted, skal du løbe smukt vindue hilsener eller farvel, hvis brugeren forlader siden.

Og for ikke konstant at gentage en handling, blev der oprettet specielle JavaScript-funktioner. Det er straks værd at bemærke, at disse funktioner er programmets vigtigste byggemateriale.

JavaScript-funktioner - grundlæggende information

Funktioner er et sæt af specifikke kommandoer, der udfører en bestemt handling, for eksempel: subtrahere tal, summere tal, fremhæve kvadrat rod. Den kode, som funktionen indeholder, vil kun blive udført, hvis den kaldes.

Det er værd at bemærke, at en JavaScript-funktion kan kaldes overalt på siden, såvel som fra andre sider, forudsat at selve funktionen er i formatet som en ekstern .js-fil.

Funktioner kan placeres enten i en afdeling kaldet , eller i en afdeling - dette er hoveddelen af ​​dokumentet. Men for at være 100 % sikker på, at din browser kan læse funktionen, før den kaldes, er det bedst at placere den i et afsnit.

Nogen strengfunktioner JavaScript er fuldgyldige objekter, der tilhører den indbyggede funktionsklasse. På grund af denne funktion har funktioner deres egne specifikke egenskaber, og de kan også tildeles variabler.

For at udføre handlinger i et program, kan du ikke kun bruge indbyggede funktioner såsom alarm(meddelelse), prompt(meddelelse, standard) og bekræfte(spørgsmål), men også oprette din egen.

Det er vigtigt at huske, at der er to typer funktioner:

• Anonym;
• Som hedder.

Forskellen er, at navngivne funktioner er synlige og tilgængelige i ethvert omfang, mens anonyme funktioner først bliver synlige, når de er kaldt.

For eksempel skal du vise beskeden "Hej alle sammen! " For at gøre dette, angiver du helt i begyndelsen af ​​dokumentet søgeord funktion , som skal placeres charmerende, når du opretter en funktion, hvorefter du skal angive navnet samt funktionens krop:

funktion showMessage () ( alert("Hej alle sammen!"); ) showMessage () ;

Sådan kalder du en JavaScript-funktion

I dag er der en del måder at kalde en JavaScript-funktion på, men denne artikel vil kun diskutere 2 af dem, som er de enkleste. Det er værd at bemærke, at der kun er 1 funktionsoperatør.

• Funktionsopkald - Funktionsopkald;
• Ansøg og ring opkald

I det første tilfælde foretages opkaldet ved hjælp af () operatoren, og dette mønster er bundet til det globale objekt . Men hvis du løbende binder på denne måde, kan konteksten blive ødelagt:

var værdi = 500; //Global variabel var obj = ( værdi: 0, inkrement: function() ( this.value++; var innerFunction = function() ( alert(this.value); ) innerFunction(); //Function invocation pattern ) ) obj. stigning(); //Metodekaldelsesmønster

Den største fordel ved den anden metode er, at den giver dig mulighed for ikke kun at køre en funktion, men også at give den visse parametre.

I dette tilfælde bruges to parametre: objektet, som dette skal bindes til, samt et array, der er knyttet til parametrene:

var add = funktion(tal1, tal2) ( returner tal1+tal2; ) matrix = ; add.apply(nul,array); //7

Foretage et opkald PHP funktioner fra JavaScript

Syntaksen for en PHP-funktion er praktisk talt ikke forskellig fra en JS-funktion. Mange brugere har ofte spørgsmålet om, hvordan man kalder en PHP-funktion fra JavaScript.

Det er værd at bemærke, at det ikke er muligt at gøre dette direkte, da disse funktioner behandles forskellige programmer. Men hvis du har brug for at lave et PHP-funktionskald, kan du bruge AJAX:

$.ajax(( url:"script.php", data:"id=2", success:function(prin)( $(".data").html(prin); ) ))

I ovenstående eksempel er PHP-funktionskaldet fra JavaScript lavet fra en anden fil. I dette tilfælde PHP script en variabel sendes, og alt efter hvad det er, køres funktionen.

Vi håber, du fandt denne artikel nyttig! Held og lykke!

God dårlig

Udgivelsesdato: 15/05/2013

At skrive noget i Java er ikke så let, og uden grundlæggende viden er det usandsynligt, at du kan gøre det. Men hvis du kunne lide en applikation skrevet på dette sprog, så kan du downloade den og installere den på din hjemmeside. Hvad det vil tjene, er op til dig at beslutte; måske vil det tiltrække brugere, måske vil det bare dekorere, eller måske vil det udføre nogle handlinger. Lad os sige, at du har downloadet det, nu mest hovedspørgsmål, hvordan man kører et JS-script. I denne artikel vil vi forsøge at besvare dette spørgsmål.

For at oprette forbindelse til Javascrip skal du have adgang til simpel html sidekode. En af de mest enkle måder– skriv en kommando i et tag hvor som helst på siden.

Hvordan forbinder man scriptet hvor som helst på webstedet?

Behandle Java-skærme Scriptet starter fra det tidspunkt, hvor browseren viser din html-side, når den støder på et tag, begynder det at åbne alt, der er skrevet i det, og udføre dets kode. Samtidig fortsætter browseren med at åbne alt materiale på siden.
I i dette eksempel Vi vil vise, hvordan browseren vil udføre advarselsfunktionen tre gange, og først efter at have udført denne kommando, vil den vise resten.

01
02
03 Tælling af kaniner
04
05
06 for(var i=1; i udefineret advarsel(typeof window.makeArray); // => funktion
Det vil sige at kalde makeArray("one", "to"); svarer til at kalde window.makeArray("one", "to"); .

Det gør mig ked af, at dette er den mest almindelige måde at kalde funktioner på, fordi det indebærer tilstedeværelsen af ​​en global funktion. Og vi ved alle, at globale funktioner og variabler ikke er den bedste form inden for programmering. Dette gælder især for JavaScript. Undgå globale definitioner, og du vil ikke fortryde det.

Funktionskaldende regel #1: Hvis en funktion kaldes direkte, uden at angive et objekt (f.eks. myFunction()), vil værdien af ​​dette være det globale objekt (vindue, hvis koden udføres i browseren).

Kald en metode Lad os skabe et simpelt objekt og gøre makeArray til dets metode. Lad os erklære objektet ved hjælp af bogstavelig notation og derefter kalde vores metode:
// oprette et objekt var arrayMaker = ( someProperty: "en vis værdi", make: makeArray ); // kald make()-metoden arrayMaker.make("one", "to"); // => [ arrayMaker, "en", "to" ] // alternativ syntaks, brug firkantede parenteser arrayMaker["make"]("one", "to"); // => [ arrayMaker, "en", "to" ]
Kan du se forskellen? Værdien af ​​dette i dette tilfælde er selve objektet. Hvorfor ikke vindue , som i det foregående tilfælde, da funktionsdeklarationen ikke er ændret? Hemmeligheden er, hvordan funktioner overføres i JavaScript. Funktion er standard type JavaScript, som faktisk er et objekt, og ligesom ethvert andet objekt kan funktioner overføres og kopieres. I dette tilfælde har vi i det væsentlige kopieret hele funktionen, inklusive argumentlisten og brødteksten, og tildelt det resulterende objekt til arrayMaker-objektets make-egenskab. Dette svarer til en erklæring som denne:
var arrayMaker = ( someProperty: "Nogle værdi"; make: function (arg1, arg2) (retur [dette, arg1, arg2]; ) );
Funktionskaldsregel #2: I en funktion kaldet ved hjælp af metodekaldssyntaks, såsom obj.myFunction() eller obj["myFunction"]() , vil denne have værdien obj .

Misforståelse af dette generelt simple princip fører ofte til fejl ved behandling af hændelser:
function buttonClicked())( var text = (dette === vindue) ? "window" : this.id; alert(text); ) var button1 = document.getElementById("btn1"); var button2 = document.getElementById("btn2"); button1.onclick = buttonClicked; button2.onclick = function())( buttonClicked(); );
Hvis du klikker på den første knap, vises en besked "btn1" fordi vi i dette tilfælde kalder en funktion som en metode, og denne inde i funktionen vil få værdien af ​​det objekt, som denne metode tilhører. Klik på den anden knap vil give "vindue" fordi vi i dette tilfælde kalder buttonClicked direkte (dvs. ikke som obj.buttonClicked()). Det samme sker, når vi tildeler en hændelseshandler til element-tagget, som i tilfældet med den tredje knap. Hvis du klikker på den tredje knap, vises den samme meddelelse som den anden.

Når du bruger biblioteker som jQuery, behøver du ikke tænke på dette. jQuery vil sørge for at omskrive denne værdi i hændelseshandleren, så denne værdi er det element, der rejste hændelsen:
// brug jQuery $("#btn1").click(function() ( alert(this.id); // jQuery vil sørge for, at "dette" er en knap ));
Hvordan klarer jQuery at ændre værdien af ​​dette? Læs nedenunder.

To måder mere: application() og call() Det er logisk, at jo oftere du bruger funktioner, jo oftere skal du videregive dem og kalde dem i forskellige sammenhænge. Ofte er der behov for at tilsidesætte værdien af ​​dette. Hvis du husker det, er funktioner i JavaScript objekter. I praksis betyder det, at funktioner har foruddefinerede metoder. apply() og call() er to af dem. De giver dig mulighed for at tilsidesætte denne værdi:
var bil = (år: 2008, model: "Dodge Bailout" ); makeArray.apply(bil, [ "én", "to" ]); // => [ bil, "en", "to" ] makeArray.call(bil, "en", "to"); // => [ bil, "en", "to" ]
Disse to metoder er meget ens. Den første parameter tilsidesætter dette. Forskellene mellem dem er i de efterfølgende argumenter: Function.apply() accepterer et array af værdier, der sendes til funktionen, mens Function.call() accepterer argumenterne separat. I praksis er det efter min mening mere praktisk at bruge application() .

Funktionskaldsregel #3: Hvis du vil tilsidesætte værdien af ​​dette uden at kopiere funktionen til et andet objekt, kan du bruge myFunction.apply(obj) eller myFunction.call(obj) .

Konstruktører Jeg vil ikke gå i detaljer med at erklære brugerdefinerede typer i JavaScript, men jeg synes, det er vigtigt at minde dig om, at der ikke er nogen klasser i JavaScript, og enhver brugerdefineret type har brug for en konstruktør. Derudover er det bedre at erklære metoder af en brugerdefineret type ved hjælp af prototype , som er en egenskab for konstruktørfunktionen. Lad os skabe vores egen type:
// erklærer konstruktørfunktionen ArrayMaker(arg1, arg2) ( this.someProperty = "uanset"; this.theArray = [ this, arg1, arg2 ]; ) // erklærer metoder ArrayMaker.prototype = ( someMethod: function () ( alert( "Called by someMethod"); ), getArray: function () (retur this.theArray; ) ); var am = new ArrayMaker("one", "to"); var other = new ArrayMaker("first", "second"); am.getArray(); // => [ am, "en", "to" ]
Det vigtige i dette eksempel er tilstedeværelsen af ​​den nye operatør før funktionsopkaldet. Hvis det ikke var for det, ville det være et globalt kald, og de egenskaber, der blev oprettet i konstruktøren, ville være relateret til globalt objekt. Det behøver vi ikke. Derudover returnerer konstruktører normalt ikke eksplicit værdier. Uden den nye operatør ville konstruktøren returnere udefineret, med den returnerer den dette. God stil navnene på konstruktørerne tages i betragtning stort bogstav; Dette vil minde dig om behovet for den nye operatør.

Ellers vil koden inde i konstruktøren sandsynligvis ligne den kode, du ville skrive på et andet sprog. Betydningen af ​​dette i dette tilfælde er nyt objekt, som du opretter.

Funktionskaldsregel nr. 4: Når man kalder en funktion med operatør ny, vil værdien af ​​dette være et nyt objekt oprettet af JavaScript-runtime. Hvis denne funktion ikke returnerer noget objekt eksplicit, vil dette blive returneret implicit.

Konklusion Forhåbentlig at forstå forskellen mellem forskellige veje funktionskald giver dig mulighed for at forbedre din JavaScript-kode. Nogle gange er fejl relateret til denne værdi svære at fange, så det giver mening at forhindre dem på forhånd.

JavaScript-kode kan køres på flere måder - fra en ekstern fil, fra et inline-fragment i hovedsektionen på siden og direkte fra et HTML-elements hændelseshandler. Lad os overveje alle disse metoder mere detaljeret.

Ekstern kode

Den første og anbefalede mulighed er at skrive koden ind ekstern fil(med en .js-udvidelse), som derefter kan inkluderes på vores webside ved hjælp af et HTML-tag og angive placeringen af ​​filen i src-attributten. Tilgængelighed af JavaScript separat fil vil reducere kodeduplikering, hvis du genbruger den på en anden side. Dette vil også give browseren mulighed for at cache filen på computeren fjernklient, hvilket reducerer sideindlæsningstiden.

Indlejret kode

Den anden mulighed er at integrere koden direkte på websiden. Dette opnås også ved hjælp af HTML-tags, men i stedet for at specificere filen i src-attributten, placeres koden mellem tags. Selvom der er tilfælde, hvor det er passende at bruge denne mulighed, er det i de fleste tilfælde bedst at gemme vores kode i en ekstern fil som beskrevet ovenfor.

alert("Hej verden!");

Egenskaber

Den sidste mulighed er at bruge hændelseshandlerattributter HTML-elementer. Denne metode anbefales strengt ikke:

Eksempel

Klik på mig!

Klik også på mig!

Prøv det selv » Placering

Placeringen af ​​de to foregående muligheder er vigtig og kan variere afhængigt af situationen. Hvis du inkluderer JavaScript, der ikke tilgår elementer på siden, er det sikkert at placere scriptet før slut HTML-tagget. Men hvis din kode vil interagere med elementer på siden, skal du sikre dig, at disse elementer allerede eksisterer på det tidspunkt, hvor scriptet udføres. Denne almindelige fejl kan illustreres med eksemplet nedenfor. Scriptet til at finde et element med ID hello-world vil blive udført, før elementet er defineret i dokumentet.

Eksempel

// Forsøg på at få adgang til et element for tidligt
vil føre til uforudsigelige resultater.
var title = document.getElementById("hello-world");
console.log(title);

Hej Verden

Vejen ud er at placere manuskripterne sidst på siden før finalen HTML tag. Dette sikrer, at elementerne allerede er defineret, når scriptet udføres.