Введение в JavaScript функции
Функция JavaScript представляет собой блок кода, предназначенный для выполнения конкретной задачи. Функция JavaScript выполняется, когда "что-то" вызывает его (называет). Внутри функции, аргументы используются в качестве локальных переменных. functionName(parameter1, parameter2, parameter3) { code to be executed } JavaScript Functions function myFunction(p1, p2) { return p1 * p2; } var x = myFunction(5, 10); console.log(x);
Functions
Вызов: ● При возникновении события (когда пользователь нажимает кнопку) ● Когда он вызывается (называется) из кода JavaScript ● Автоматически (сам вызывается) Возврат значения: Когда JavaScript достигает оператора возврата, то функция прекратит выполнение. Возвращаемое значение "возвращается" обратно в "вызывающей". Functions
Цели Function Reuse Information hiding цели Composition
Цели Function
Определение Function Функции JavaScript определяются с помощью ключевого слова function. Вы можете использовать объявление function или expression function. Выражение функции может быть сохранено в переменной: var x = function (a, b) {return a * b}; После того, как выражение функция сохранена в переменной, переменная может быть использована в качестве функции: var z = x(4, 3); Функция выше фактически является анонимной функцией (функция без имени).
Определение Function Конструктор Function(): var myFunction = new Function("a", "b", "return a * b"); // тоже самое что и var myFunction = function (a, b) {return a * b};
Определение Function Конструктор Function(): Анти-паттерн
Определение Function Demo: // v 1.1 function foo (a, b) { return a * b; } var z = foo (4, 3); console.log(z);
Определение Function Demo : // v 1.1 function foo (a, b) { return a * b } var z = foo (4, 3); console.log(z); // v 1.2 var z = foo (4, 3); function foo (a, b) { return a * b; } console.log(z);
Определение Function Способы: // v 1.1 function foo (a, b) { return a * b } var z = foo (4, 3); console.log(z); // v 1.2 var z = foo (4, 3); function foo (a, b) { return a * b } console.log(z); // v 1.3 var x = function (a, b) {return a * b}; var z = x(4, 3);
Определение Function Demo : // v 1.1 function foo (a, b) { return a * b } var z = foo (4, 3); console.log(z); // v 1.2 var z = foo (4, 3); function foo (a, b) { return a * b } console.log(z); // v 1.3 var x = function (a, b) {return a * b}; var z = x(4, 3); // v 1.4 var z = x(4, 3); var x = function (a, b) {return a * b};
Определение Function Demo : // v 1.1 function foo (a, b) { return a * b } var z = foo (4, 3); console.log(z); // v 1.2 var z = foo (4, 3); function foo (a, b) { return a * b } console.log(z); // v 1.3 var x = function (a, b) {return a * b}; var z = x(4, 3); // v 1.4 var z = x(4, 3); var x = function (a, b) {return a * b}; Чтооооо?
Hoisting Hoisting - это поведение перемещения объявленных переменных к началу текущей области в JavaScript (по умолчанию). x = 5; // Assign 5 to x elem = document.getElementById("demo"); elem.innerHTML = x; var x; // Declare x JavaScript поднимает только объявление, но не инициализацию var x = 5; // Initialize x elem = document.getElementById("demo"); elem.innerHTML = x + " " + y; var y = 7; // Initialize y Чтобы избежать ошибок, всегда объявляйте все переменные в начале каждого scope!!!!!!
Hoisting
Само вызывающиеся Function Вы должны добавить круглые скобки вокруг функции, чтобы указать, что это выражение функция: (function () { console.log("Hello!!"); // А вызову-ка сама себя })(); Для чего: - Предварительное вычисление - Создание scope
Параметры Function Параметры функции являются имена, перечисленные в определении функции. Аргументы функции реальные значения, переданные (и полученные) функции. functionName(parameter1, parameter2, parameter3) { code to be executed } Параметры: ● Функций JavaScript типы данных для параметров не указываются. ● Функции JavaScript не выполняют проверку типов на переданных аргументов. ● Функции JavaScript не проверяют количество аргументов, полученных.
Параметры Function Если функция вызывается с отсутствующими аргументами (меньше, чем объявлена), отсутствующие значения устанавливаются : undefined Присвоение значения по умолчанию для параметра : function myFunction(x, y) { y = y || 0; console.log(x, y) } Если функция вызывается слишком большим количеством аргументов (больше, чем декларируется), эти аргументы не могут быть переданы, потому что они не имеют названия. Они могут быть достигнуты только в объекте аргументов
Arguments Object Объект аргумент содержит массив аргументов, используемых при вызове функции (x = sumAll(1, 123, 500, 115, 44, 88); function sumAll() { var i, sum = 0; for (i = 0; i < arguments.length; i++) { sum += arguments[i]; } return sum; } Аргументы в действительности не является массивом. Это массиво-подобный объект. Аргумент-объект имеет свойство длины, но у него не хватает всех методов массивов.
Вызов Function Вызов функции приостанавливает выполнение текущей функции, передавая управление и параметры новой функции. В дополнение к заявленным параметрам, каждая функция получает два дополнительных параметра: this and arguments. В JavaScript this, является объектом, который "владеет" текущим кодом. Когда функция вызывается без объекта владельца, значение this становится глобальным объектом.
Вызов Function как метода Когда функция сохраняется как свойство объекта, мы называем это метод. Связывания этого на объект происходит во время вызова. var myObject = { firstName:"Bilbo", lastName: "Baggins", fullName: function () { return this.firstName + " " + this.lastName; }, getContex: function () { return this; } } myObject.fullName(); myObject.getContex();
Вызов Function как Function Функция не принадлежит ни одному объекту. В браузере объект страницы в окне браузера. Функция автоматически становится функцией window . function myFunction(a, b) { return a * b; } myFunction(10, 2); // myFunction(10, 2) will return 20 window.myFunction(10, 2); // window.myFunction(10, 2) will also return 20 function myFunction() { return this; } myFunction(); // Will return the window object
Вызов Function как Function !!! Метод не может использовать внутреннюю функцию, чтобы помочь ему работать со свойствами объекта, потому что внутренняя функция не дает доступа метода в к объекту. var add = function (a, b) { return a + b; }; var myObject = { value: 10 } myObject.double = function () { var helper = function () { this.value = add(this.value, this.value); }; helper(); // Invoke helper as a function. }; // Invoke double as a method. myObject.double(); console.log(myObject.value);
Вызов Function как Function К счастью, есть простой обходной путь. var add = function (a, b) { return a + b; }; var myObject = { value: 10 } myObject.double = function () { var that = this; var helper = function () { that.value = add(that.value, that.value); }; helper(); // Invoke helper as a function. }; // Invoke double as a method. myObject.double(); console.log(myObject.value);
Вызов Function с конструктором Function Если вызову функции предшествует new, он является конструктором вызова. Cоздается новая функция, но поскольку функции JavaScript являются объектами, то на самом деле создается новый объект : // This is a function constructor: function myFunction(arg1, arg2) { this.firstName = arg1; this.lastName = arg2; } // This creates a new object var x = new myFunction("Bilbo","Baggins"); x.firstName; Приставка new также изменяет поведение оператора return.
Вызов Function с методом Function В JavaScript функции являются объектами. JavaScript функции имеют свойства и методы. call() и apply() предопределенные методы функции JavaScript. Оба метода могут быть использованы для вызова функции, и оба метода должны иметь объект владельцем в качестве первого параметра. Единственное отличие состоит в том, что call() принимает аргументы функции по отдельности, и apply() принимает аргументы функции в массиве.. var array = [3, 4]; var sum = add.apply(null, array);
Вызов Function с методом Function // Create a constructor function called Quo.It makes an object with a status property. var Quo = function (string) { this.status = string; }; // Give all instances of Quo a public method called get_status. Quo.prototype.get_status = function ( ) { return this.status; }; // Make an instance of Quo. var myQuo = new Quo("confused"); console.log(myQuo.get_status()); // confused // Make an object with a status member. var statusObject = { status: 'OK' }; // statusObject does not inherit from Quo.prototype, but we can invoke the get_status method on statusObject even though statusObject does not have a get_status method. var status = Quo.prototype.get_status.apply(statusObject); // status is 'OK'
Это всё, ребята!

функции в Java script

  • 1.
  • 2.
    Функция JavaScript представляетсобой блок кода, предназначенный для выполнения конкретной задачи. Функция JavaScript выполняется, когда "что-то" вызывает его (называет). Внутри функции, аргументы используются в качестве локальных переменных. functionName(parameter1, parameter2, parameter3) { code to be executed } JavaScript Functions function myFunction(p1, p2) { return p1 * p2; } var x = myFunction(5, 10); console.log(x);
  • 3.
  • 4.
    Вызов: ● При возникновениисобытия (когда пользователь нажимает кнопку) ● Когда он вызывается (называется) из кода JavaScript ● Автоматически (сам вызывается) Возврат значения: Когда JavaScript достигает оператора возврата, то функция прекратит выполнение. Возвращаемое значение "возвращается" обратно в "вызывающей". Functions
  • 5.
  • 6.
  • 7.
    Определение Function Функции JavaScriptопределяются с помощью ключевого слова function. Вы можете использовать объявление function или expression function. Выражение функции может быть сохранено в переменной: var x = function (a, b) {return a * b}; После того, как выражение функция сохранена в переменной, переменная может быть использована в качестве функции: var z = x(4, 3); Функция выше фактически является анонимной функцией (функция без имени).
  • 8.
    Определение Function Конструктор Function(): varmyFunction = new Function("a", "b", "return a * b"); // тоже самое что и var myFunction = function (a, b) {return a * b};
  • 9.
  • 10.
    Определение Function Demo: // v1.1 function foo (a, b) { return a * b; } var z = foo (4, 3); console.log(z);
  • 11.
    Определение Function Demo : //v 1.1 function foo (a, b) { return a * b } var z = foo (4, 3); console.log(z); // v 1.2 var z = foo (4, 3); function foo (a, b) { return a * b; } console.log(z);
  • 12.
    Определение Function Способы: // v1.1 function foo (a, b) { return a * b } var z = foo (4, 3); console.log(z); // v 1.2 var z = foo (4, 3); function foo (a, b) { return a * b } console.log(z); // v 1.3 var x = function (a, b) {return a * b}; var z = x(4, 3);
  • 13.
    Определение Function Demo : //v 1.1 function foo (a, b) { return a * b } var z = foo (4, 3); console.log(z); // v 1.2 var z = foo (4, 3); function foo (a, b) { return a * b } console.log(z); // v 1.3 var x = function (a, b) {return a * b}; var z = x(4, 3); // v 1.4 var z = x(4, 3); var x = function (a, b) {return a * b};
  • 14.
    Определение Function Demo : //v 1.1 function foo (a, b) { return a * b } var z = foo (4, 3); console.log(z); // v 1.2 var z = foo (4, 3); function foo (a, b) { return a * b } console.log(z); // v 1.3 var x = function (a, b) {return a * b}; var z = x(4, 3); // v 1.4 var z = x(4, 3); var x = function (a, b) {return a * b}; Чтооооо?
  • 15.
    Hoisting Hoisting - этоповедение перемещения объявленных переменных к началу текущей области в JavaScript (по умолчанию). x = 5; // Assign 5 to x elem = document.getElementById("demo"); elem.innerHTML = x; var x; // Declare x JavaScript поднимает только объявление, но не инициализацию var x = 5; // Initialize x elem = document.getElementById("demo"); elem.innerHTML = x + " " + y; var y = 7; // Initialize y Чтобы избежать ошибок, всегда объявляйте все переменные в начале каждого scope!!!!!!
  • 16.
  • 17.
    Само вызывающиеся Function Вы должныдобавить круглые скобки вокруг функции, чтобы указать, что это выражение функция: (function () { console.log("Hello!!"); // А вызову-ка сама себя })(); Для чего: - Предварительное вычисление - Создание scope
  • 18.
    Параметры Function Параметры функцииявляются имена, перечисленные в определении функции. Аргументы функции реальные значения, переданные (и полученные) функции. functionName(parameter1, parameter2, parameter3) { code to be executed } Параметры: ● Функций JavaScript типы данных для параметров не указываются. ● Функции JavaScript не выполняют проверку типов на переданных аргументов. ● Функции JavaScript не проверяют количество аргументов, полученных.
  • 19.
    Параметры Function Если функциявызывается с отсутствующими аргументами (меньше, чем объявлена), отсутствующие значения устанавливаются : undefined Присвоение значения по умолчанию для параметра : function myFunction(x, y) { y = y || 0; console.log(x, y) } Если функция вызывается слишком большим количеством аргументов (больше, чем декларируется), эти аргументы не могут быть переданы, потому что они не имеют названия. Они могут быть достигнуты только в объекте аргументов
  • 20.
    Arguments Object Объект аргументсодержит массив аргументов, используемых при вызове функции (x = sumAll(1, 123, 500, 115, 44, 88); function sumAll() { var i, sum = 0; for (i = 0; i < arguments.length; i++) { sum += arguments[i]; } return sum; } Аргументы в действительности не является массивом. Это массиво-подобный объект. Аргумент-объект имеет свойство длины, но у него не хватает всех методов массивов.
  • 21.
    Вызов Function Вызов функцииприостанавливает выполнение текущей функции, передавая управление и параметры новой функции. В дополнение к заявленным параметрам, каждая функция получает два дополнительных параметра: this and arguments. В JavaScript this, является объектом, который "владеет" текущим кодом. Когда функция вызывается без объекта владельца, значение this становится глобальным объектом.
  • 22.
    Вызов Function какметода Когда функция сохраняется как свойство объекта, мы называем это метод. Связывания этого на объект происходит во время вызова. var myObject = { firstName:"Bilbo", lastName: "Baggins", fullName: function () { return this.firstName + " " + this.lastName; }, getContex: function () { return this; } } myObject.fullName(); myObject.getContex();
  • 23.
    Вызов Function какFunction Функция не принадлежит ни одному объекту. В браузере объект страницы в окне браузера. Функция автоматически становится функцией window . function myFunction(a, b) { return a * b; } myFunction(10, 2); // myFunction(10, 2) will return 20 window.myFunction(10, 2); // window.myFunction(10, 2) will also return 20 function myFunction() { return this; } myFunction(); // Will return the window object
  • 24.
    Вызов Function какFunction !!! Метод не может использовать внутреннюю функцию, чтобы помочь ему работать со свойствами объекта, потому что внутренняя функция не дает доступа метода в к объекту. var add = function (a, b) { return a + b; }; var myObject = { value: 10 } myObject.double = function () { var helper = function () { this.value = add(this.value, this.value); }; helper(); // Invoke helper as a function. }; // Invoke double as a method. myObject.double(); console.log(myObject.value);
  • 25.
    Вызов Function какFunction К счастью, есть простой обходной путь. var add = function (a, b) { return a + b; }; var myObject = { value: 10 } myObject.double = function () { var that = this; var helper = function () { that.value = add(that.value, that.value); }; helper(); // Invoke helper as a function. }; // Invoke double as a method. myObject.double(); console.log(myObject.value);
  • 26.
    Вызов Function сконструктором Function Если вызову функции предшествует new, он является конструктором вызова. Cоздается новая функция, но поскольку функции JavaScript являются объектами, то на самом деле создается новый объект : // This is a function constructor: function myFunction(arg1, arg2) { this.firstName = arg1; this.lastName = arg2; } // This creates a new object var x = new myFunction("Bilbo","Baggins"); x.firstName; Приставка new также изменяет поведение оператора return.
  • 27.
    Вызов Function сметодом Function В JavaScript функции являются объектами. JavaScript функции имеют свойства и методы. call() и apply() предопределенные методы функции JavaScript. Оба метода могут быть использованы для вызова функции, и оба метода должны иметь объект владельцем в качестве первого параметра. Единственное отличие состоит в том, что call() принимает аргументы функции по отдельности, и apply() принимает аргументы функции в массиве.. var array = [3, 4]; var sum = add.apply(null, array);
  • 28.
    Вызов Function сметодом Function // Create a constructor function called Quo.It makes an object with a status property. var Quo = function (string) { this.status = string; }; // Give all instances of Quo a public method called get_status. Quo.prototype.get_status = function ( ) { return this.status; }; // Make an instance of Quo. var myQuo = new Quo("confused"); console.log(myQuo.get_status()); // confused // Make an object with a status member. var statusObject = { status: 'OK' }; // statusObject does not inherit from Quo.prototype, but we can invoke the get_status method on statusObject even though statusObject does not have a get_status method. var status = Quo.prototype.get_status.apply(statusObject); // status is 'OK'
  • 29.