Upload
viktor-andreev
View
39
Download
0
Embed Size (px)
Citation preview
Введение в 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'
Это всё, ребята!