функции в Java script

Введение в 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 objectvar 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'

Это всё, ребята!