[ Web Proxy ]
URL:
Viewing: https://developer.mozilla.org/ru/docs/Web/JavaScript/Guide/Functions [Back]  [Original]

- JavaScript | MDN

This page was translated from English by the community. Learn more and join the MDN Web Docs community.

View in English Always switch to English

In this article

JavaScript

- JavaScript. (functions as first-class citizen). , , :

  • ;
  • .

JavaScript , .

JavaScript , .

( ?) :

  • (arguments)
  • (Scope) (Closures)
  • (this)
  • (return)
  • (throw)
  • (garbage collector)

"function declaration statement"

(function definition, function declaration, function statement) function :

  • .
  • ( ) () .
  • , , { }.

, square:

js
function square(number) {
  return number * number;
}

square , number. , ( number) . return , .

js
return number * number;

(, ) ; , , .

( , , ), , , :

js
function myFunc(theObject) {
  theObject.make = "Toyota";
}

var mycar = { make: "Honda", model: "Accord", year: 1998 };
var x, y;

x = mycar.make; // x   "Honda"

myFunc(mycar);
y = mycar.make; // y   "Toyota"
// (   )

"function definition expression"

"function declaration statement" (statement), "function definition expression". ( ). , square :

js
var square = function (number) {
  return number * number;
};
var x = square(4); // x   16

, (debugger) - (stack traces; "trace" "" / "").

js
var factorial = function fac(n) {
  return n < 2 ? 1 : n * fac(n - 1);
};

console.log(factorial(3));

"function definition expression" , . map, .

js
function map(f, a) {
  var result = [], //   
    i;
  for (i = 0; i != a.length; i++) result[i] = f(a[i]);
  return result;
}

, function definition expression, .

js
function map(f, a) {
  var result = []; //   
  var i; //  
  for (i = 0; i != a.length; i++) result[i] = f(a[i]);
  return result;
}
var f = function (x) {
  return x * x * x;
};
var numbers = [0, 1, 2, 5, 10];
var cube = map(f, numbers);
console.log(cube);

: [0, 1, 8, 125, 1000].

JavaScript . , myFunc , num 0:

js
var myFunc;
if (num === 0) {
  myFunc = function (theObject) {
    theObject.make = "Toyota";
  };
}

, , Function (runtime), eval().

, . : .

. , .

. , square, :

js
square(5);

5. 25.

, , "function declaration statement" ( hoisting), :

js
console.log(square(5));
/* ... */
function square(n) {
  return n * n;
}

, , , .

: , (.. function funcName(){}). . , function declaration function expression.

js
console.log(square); // square    undefined.
console.log(square(5)); // TypeError: square is not a function
var square = function (n) {
  return n * n;
};

. . show_props() ( ) , .

. , :

js
function factorial(n) {
  if (n === 0 || n === 1) return 1;
  else return n * factorial(n - 1);
}

:

js
var a, b, c, d, e;
a = factorial(1); // a   1
b = factorial(2); // b   2
c = factorial(3); // c   6
d = factorial(4); // d   24
e = factorial(5); // e   120

. , , , . , , ( Function). apply(), .

(function scope)

- , ( ) scope . , scope. scope scope. , .

js
//      scope
var num1 = 20,
  num2 = 3,
  name = "Chamahk";

//      scope
function multiply() {
  return num1 * num2;
}

multiply(); //  60

//   
function getScore() {
  var num1 = 2,
    num2 = 3;

  function add() {
    return name + " scored " + (num1 + num2);
  }

  return add();
}

getScore(); //  "Chamahk scored 5"

Scope

(function stack)

. :

  1. arguments.callee
  2. ,

:

js
var foo = function bar() {
  //   
};

(function body) :

  1. bar()
  2. arguments.callee()
  3. foo()

, , (recursive function). , (loop). , ( , ). , :

js
var x = 0;
while (x < 10) {
  // "x < 10"     
  // - 
  x++;
}

:

js
function loop(x) {
  if (x >= 10) {
    // "x >= 10"       ( ,  "!(x < 10)")
    return;
  }
  //  -
  loop(x + 1); //  
}
loop(0);

. , (, DOM) :

js
function walkTree(node) {
  if (node == null) return;
  // -   
  for (var i = 0; i < node.childNodes.length; i++) {
    walkTree(node.childNodes[i]);
  }
}

loop, .

, , (stack). stack: function stack.

:

js
function foo(i) {
  if (i < 0) return;
  console.log("begin: " + i);
  foo(i - 1);
  console.log("end: " + i);
}
foo(3);

// Output:

// begin: 3
// begin: 2
// begin: 1
// begin: 0
// end: 0
// end: 1
// end: 2
// end: 3

(nested functions) (closures)

. (nested function; inner) (private) (outer). (closure). Closure ( ), , ( "" ("close") ).

closure, , "" (inherit) , . , scope ("outer") .

:

  • .
  • closure: , .

:

js
function addSquares(a, b) {
  function square(x) {
    return x * x;
  }
  return square(a) + square(b);
}
a = addSquares(2, 3); //  13
b = addSquares(3, 4); //  25
c = addSquares(4, 5); //  41

closure, ( outer innner).

js
function outside(x) {
  function inside(y) {
    return x + y;
  }
  return inside;
}
fn_inside = outside(3); //    :   ,
//   3    

result = fn_inside(5); //  8

result1 = outside(3)(5); //  8

, x , inside. Closure scope. , closure . , inside .

, , .

(Multiply-nested functions)

, .. (A) (B), (C). B C closures, B A, C B. , C B, A, C A. closures scope; scope , . chaining (chain ; "chaining" )

:

js
function A(x) {
  function B(y) {
    function C(z) {
      console.log(x + y + z);
    }
    C(3);
  }
  B(2);
}
A(1); //    6 (1 + 2 + 3)

C y B x A. , :

  1. B closure, A, .. B A.
  2. C closure, B.
  3. closure B A, closure A, C B A. , (chain) scopes B A .

, , . A C, A B. , C B.

(Name conflicts)

scope closure , (name conflict). (more inner) scope , scope , . (scope chain). scope, . :

js
function outside() {
  var x = 5;
  function inside(x) {
    return x * 2;
  }
  return inside;
}

outside()(10); //  20  10

return x * 2 x inside x outside. Scope chain : {inside ==> outside ==> (global object)}. x inside outside, 20 (= 10 * 2), 10 (= 5 * 2).

(Closures)

Closures JavaScript. JavaScript , ( , ).

, , . .

, scope , , , , ( , , , , ).

Closure , - scope .

js
var pet = function (name) {
  //     "name"
  var getName = function () {
    return name; //      "name"  
  };
  return getName; //   ,    
  //     scope
};
myPet = pet("Vivie");

myPet(); //  "Vivie",
// ..     
// name    

. (return).

js
var createPet = function (name) {
  var sex;

  return {
    setName: function (newName) {
      name = newName;
    },

    getName: function () {
      return name;
    },

    getSex: function () {
      return sex;
    },

    setSex: function (newSex) {
      if (
        typeof newSex === "string" &&
        (newSex.toLowerCase() === "male" || newSex.toLowerCase() === "female")
      ) {
        sex = newSex;
      }
    },
  };
};

var pet = createPet("Vivie");
pet.getName(); // Vivie

pet.setName("Oliver");
pet.setSex("male");
pet.getSex(); // male
pet.getName(); // Oliver

name , . . "" "" . .

js
var getCode = (function () {
  var apiCode = "0]Eal(eh&2"; //   ,       - ...

  return function () {
    return apiCode;
  };
})();

getCode(); //  apiCode

, . , , .

js
var createPet = function (name) {
  //       "name".
  return {
    setName: function (name) {
      //        "name".
      name = name; //       "name",    ?
    },
  };
};

arguments

arguments -. :

js
arguments[i];

i , 0. , , arguments[0]. arguments.length.

arguments , , . , , . arguments.length , , , arguments.

, . , , . :

js
function myConcat(separator) {
  var result = "";
  var i;

  // iterate through arguments
  for (i = 1; i < arguments.length; i++) {
    result += arguments[i] + separator;
  }
  return result;
}

, .

js
//  "red, orange, blue, "
myConcat(", ", "red", "orange", "blue");

//  "elephant; giraffe; lion; cheetah; "
myConcat("; ", "elephant", "giraffe", "lion", "cheetah");

//  "sage. basil. oregano. pepper. parsley. "
myConcat(". ", "sage", "basil", "oregano", "pepper", "parsley");

: arguments -, . -, length. .

Function JavaScript- .

ECMAScript 2015 : (default parameters) (rest parameters).

(Default parameters)

JavaScript undefined. . default parameters .

undefined (default). , b, undefined, a * b multiply NaN. :

js
function multiply(a, b) {
  b = typeof b !== "undefined" ? b : 1;

  return a * b;
}

multiply(5); // 5

. b :

js
function multiply(a, b = 1) {
  return a * b;
}

multiply(5); // 5

.

(Rest parameters)

. , 2- . . (Arrow functions), .

js
function multiply(multiplier, ...theArgs) {
  return theArgs.map((x) => multiplier * x);
}

var arr = multiply(2, 1, 2, 3);
console.log(arr); // [2, 4, 6]

(Arrow functions)

"arrow function expression" ( fat arrow function) function expression this. . hacks.mozilla.org "ES6 In Depth: Arrow functions".

: this.

. :

js
var a = ["Hydrogen", "Helium", "Lithium", "Beryllium"];

var a2 = a.map(function (s) {
  return s.length;
});

console.log(a2); //  [8, 6, 7, 9]

var a3 = a.map((s) => s.length);

console.log(a3); //  [8, 6, 7, 9]

this

this ( , undefined strict mode, , , ..). - .

js
function Person() {
  //  Person()  `this`   .
  this.age = 0;

  setInterval(function growUp() {
    //  strict mode  growUp()  `this`
    //  global object,    `this`
    //   Person().
    this.age++;
  }, 1000);
}

var p = new Person();

ECMAScript 3/5 this , .

js
function Person() {
  var self = this; //   `that`  `self`.
  //  -    .
  self.age = 0;

  setInterval(function growUp() {
    //     `self`,
    //     .
    self.age++;
  }, 1000);
}

(bound function), this growUp().

arrow function this , :

js
function Person() {
  this.age = 0;

  setInterval(() => {
    this.age++; // |this|      Person
  }, 1000);
}

var p = new Person();

Function JavaScript .

:


Web Proxy Viewer  |  New URL  |  Original Page