JavaScript: функция

Последнее обновление 14 мая 2019 12:06:58 (UTC / GMT +8 часов)

script1adsense2code

script1adsense3code

Вступление

В программировании функция - это часть программы, которая выполняет отдельную услугу. В этом смысле функция - это тип процедуры или процедуры. Существует некоторое различие между процедурой и функцией в некоторых языках программирования, где функция возвращает значение, а процедура выполняет некоторые операции, но не возвращает значение. В большинстве языков программирования и сценариев есть некоторые встроенные функции, которые хранятся в библиотеке. Кроме того, вы можете написать свою собственную функцию (также называемую «Пользовательская функция» или «UDF».) Для выполнения специализированных задач.

Содержание:

JavaScript функция и синтаксис
Как объявить функцию JavaScript?
Вызов функций JavaScript
Область действия функции
Снова посмотрим на параметры
Затворы
Используя объект аргументов
JavaScript: рекурсивная функция
Полный пример: найдите куб числа

Функция JavaScript

Как и другие языки программирования и написания сценариев, функции являются одним из фундаментальных строительных блоков в JavaScript. Функции используются в программе многократно, и это экономит время при разработке веб-страницы. Чтобы использовать функцию, вы должны определить ее где-то в области видимости, из которой вы хотите ее вызвать. Определение собственной функции в JavaScript - простая задача.

Синтаксис: функция JavaScript

 function functionName (аргумент1, аргумент2..аргументN)
{
  // блок кода в JavaScript
}

Объявление функции всегда начинается с ключевого слова function, за которым следует

Имя вновь созданной функции
Список аргументов, которые принимает функция, заключенные в скобки и разделенные запятыми.
Блок кода JavaScript, заключенный в фигурные скобки {}, для выполнения при вызове функции.
Открывающаяся фигурная скобка ({) обозначает начало кода функции, а закрывающая фигурная скобка (}) обозначает завершение функции.

Объявить функцию JavaScript

Например, чтобы объявить функцию, которая вычисляет куб передаваемого ей аргумента, вы можете сделать это одним из двух способов:

Примечание. В арифметике и алгебре куб числа n является его третьей степенью - результатом числа, умноженного на него дважды: n3 = n × n × n.

Пример - 1:

 куб функции (n) 
{    
вернуть n * n * n; 
}

Пример - 2:

 var cube = function (n) 
{    
вернуть n * n * n; 
};

Функция «куб» принимает один аргумент, называемый n. В теле функции есть только один оператор JavaScript, который инструктирует возвращать аргумент (n) функции после умножения на нее дважды. Здесь оператор return возвращает вычисленное значение.

Руководство по стилю: Объявление функции

Используйте объявления функций вместо выражений функций, так как объявления функций именуются, чтобы их было легче идентифицировать в стеках вызовов. Кроме того, поднимается весь текст объявления функции, тогда как поднимается только ссылка на выражение функции.

// bad
const foo = function () {
};
// good
function foo() {
}

Никогда не объявляйте функцию в не функциональном блоке (если, в то время и т. Д.). Вместо этого назначьте функцию переменной.
ECMA-262 определяет блок как список операторов. Объявление функции не является утверждением.

// bad
if (currentUser) {
  function test() {
    console.log('Nope.');
  }
}
// good
let test;
if (currentUser) {
  test = () => {
    console.log('Yup.');
  };
}

Вызов функций JavaScript

Мы уже узнали, как определить функцию. Определение функции просто называет функцию и указывает, что делать при вызове функции.

Вызов функции фактически выполняет инструкции, написанные внутри функции с указанными параметрами.

Аргументы функции не ограничиваются строками и числами, вы можете передавать целые объекты в функцию.

Например, функция abc () может вызываться следующим образом.

 ABC ();

В любом случае из предыдущего Примера-1 и Примера-2 вы вызываете функцию со строкой кода, подобной следующей:

 кубик (2);

Пример - 1:

Область действия функции - это функция, в которой она объявлена, или вся программа, если она объявлена на верхнем уровне. Вы можете объявить функцию ниже вызова, и она будет работать только тогда, когда вы объявите функцию в формате функции funcName () {} . Следующая функция будет работать:

alert(cube(2));
cube = function (n) 
{    
return n*n*n; 
};

Код ниже не будет работать.

alert(cube(2));
var cube = function(n) 
{   
return n*n*n;
};

Область действия функции

Источник, из которого можно получить доступ к функции, называется областью действия функции. Когда вы определяли переменные внутри функции, они определяются только в области действия функции, поэтому вы не можете получить доступ к этим переменным вне функции. Функция, определенная в глобальной области видимости, может получить доступ ко всем переменным, определенным в глобальной области действия. Функция, определенная внутри другой функции, может также получить доступ ко всем переменным, определенным в ее родительской функции, и любой другой переменной, к которой родительская функция может получить доступ. Смотрите следующий пример:

// The following variables are defined in the global scope
var x = 12, y = 25;
// This function is defined in the global scope
function add(){
  return (x + y);
}
add(); // Returns 37

В приведенном выше примере x, y и add () объявлены в глобальной области видимости. Поэтому функция add () может получить доступ к значениям x и y и вернуть значение (x + y).

// The following variables are defined in the global scope
var x = 12, y = 25;
// This function is defined in the global scope
function add(){
  return (x + y);
}
add(); // Returns 37

Во втором примере есть функция с именем вычислением (), а функция добавления () вложена в расчет (). Поэтому add () может получить доступ ко всем переменным, определенным в его родительской функции, и вернуть значение (x + y).

Снова посмотрим на параметры

Существует два типа параметров, которые передаются в функцию: параметры примитивного типа данных и параметры не примитивного типа данных. Примитивные типы данных - это предопределенные типы данных, например, целое число, символ и строка - все примитивные типы данных. Непримитивные типы данных создаются пользователем. Их иногда называют «ссылочными переменными» или «объектными ссылками», поскольку они ссылаются на область памяти, в которой хранятся данные. Например, определяемые пользователем объекты, массивы являются непримитивными типами данных.

Если вы передаете примитивный параметр в функцию по значению и если функция изменяет значение параметра, эти изменения не отражаются глобально или в вызывающей функции. Смотрите следующий пример:

JS Примитивные Параметры

Если вы передаете объект в качестве непримитивного параметра, и функция изменяет свойства объекта, эти изменения отражаются глобально, т. Е. Они видны вне функции. Смотрите следующий пример:

function student(theObject)
{
   theObject.name ="Sara";
}
var student1= {name: "Scott", standard: "V", roll_no: 1};
var x,y;
x = student1.name;     // x gets the value "Scott"
student(student1);
y = student1.name;     // y gets the value "Sara"
// (the name property was changed by the function)

Если вы назначите новый объект параметру, то вне функции не будет никакого эффекта, потому что это изменяет значение параметра, а не значение свойств отдельного объекта. Смотрите следующий пример:

function student(theObject)
{
  theObject = {name: "Sara", standard: "VI", roll_no: 1};
}
var student1= {name: "Scott", standard: "V", roll_no: 1};
var x, y;
x = student1.name;  // x gets the value "Scott"
student(student1);
y = student1.name;  // y still gets the value "Scott"

В первом случае объект student1 был передан функции student. Функция изменила свое свойство name и стала видимой глобально. Во втором случае функция не изменила ни одного свойства объекта, вместо этого она создала новую локальную переменную и получила то же имя, что и переданный глобальный объект, так что это не влияет на переданный глобальный объект.

Руководство по стилю: Параметры функции

Никогда не называйте параметры аргументами. Это будет иметь приоритет над объектом аргументов, который предоставляется каждой области действия функции.

// bad
function nope(name, options, arguments) {
  // ...stuff...
}
// good
function yup(name, options, args) {
  // ...stuff...
}

Всегда ставьте параметры по умолчанию последними:

// bad
function handleThings(opts = {}, name) {
  // ...
}
// good
function handleThings(name, opts = {}) {
  // ...
}

Никогда не используйте конструктор Function для создания новой функции. Создание функции таким способом оценивает строку аналогично eval (), которая открывает уязвимости.

// bad
function handleThings(opts = {}, name) {
  // ...
}
// good
function handleThings(name, opts = {}) {
  // ...
}

Интервал в сигнатуре функции:

// bad
const f = function(){};
const g = function (){};
const h = function() {};
// good
const x = function () {};
const y = function a() {};

Затворы

Закрытия являются одной из важных особенностей JavaScript. JavaScript допускает вложение функций, т.е. вы можете объявить функцию внутри другой функции. JavaScript предоставляет внутренней функции полный доступ ко всем переменным и функциям, определенным внутри внешней функции, и другим переменным и функциям, к которым внешняя функция может получить доступ. Но внешняя функция не может получить доступ к переменным и функциям, определенным внутри внутренней функции, что обеспечивает своего рода защиту переменных внутренней функции. Замыкание создается, когда внутренняя функция каким-то образом становится доступной для любой области видимости вне внешней функции. Вот пример:

Пример закрытия JavaScript -1

Используя объект аргументов

Используя объект arguments, вы можете вызывать функцию с большим количеством аргументов, и это полезно, если вы заранее не знаете, сколько аргументов будет передано функции. К отдельным аргументам, содержащимся в объекте arguments, можно обращаться так же, как к элементам массива. Вы можете получить доступ к каждому аргументу следующим образом:

 Аргументы [я]

где я указывает позицию или порядок аргумента, начиная с нуля. Поэтому аргумент, передаваемый функции, будет аргументами [0], аргументами [1], аргументами [2] ... и так далее. Свойство length объекта arguments содержит количество аргументов, переданных функции, а общее количество аргументов указывается аргументами. длина.

В следующем примере показано использование свойства arguments. Передавайте любое количество числовых значений в качестве аргументов, функция добавит все эти числа и вернет результат.

Пример аргументов JavaScript

JavaScript: рекурсивная функция

Функция JavaScript может быть даже рекурсивной, то есть функция может вызывать сама себя. Следующий веб-документ принимает число и вычисляет факториалы:

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>JavaScript: Recursive function.</title>
<script type="text/javascript">
function factorial(n)
{
if ((n==0) || (n==1))
return 1;
else 
facn = (n * factorial(n-1))
return facn;
}
</script>
</head>
<body>
<h1 style="color: red">JavaScript Recursive function example</h1>
<hr />
<script type="text/javascript">
function factcal()
{
n=document.form1.text1.value;
result = factorial(n);
alert(" Factorial of "+n+" = "+result);
}
</script>
<form name="form1" action="#">
Input a number :
<input type="text" name="text1" size="5" />
<br />
<input type="button" value="Result" onclick="factcal()" />
</form>
</body>
</html>

Посмотреть пример в браузере

Полный пример: найдите куб числа

Следующий веб-документ принимает число от пользователя и передается в функцию cube () по значению и возвращает куб числа. Внутри функции мы проверяем (через регулярное выражение), является ли входное значение числовым или нет, если оно числовое, то оно вычислит куб числа и отобразит через alert (), в противном случае отобразится сообщение об ошибке.

HTML-код

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Cube of a Number</title>
<link rel='stylesheet' href='form-style.css' type='text/css' />
</head>
<body onload='document.form1.text1.focus()'>
<div class="mail">
<h2>Input a number and get it's Cube</h2>
<form name="form1" action="#">
<ul>
<li><input type='text' name='text1'/></li>
<li>&nbsp;</li>
<li><input type="submit" name="submit" value="Submit" onclick="cube(document.form1.text1)" /></li>
<li>&nbsp;</li>
</ul>
</form>
</div>
<script src="cube-number.js"></script>
</body>
</html>

CSS код

li {list-style-type: none;
font-size: 16pt;
}
.mail {
margin: auto;
padding-top: 10px;
padding-bottom: 10px;
width: 400px;
background : #D8F1F8;
border: 1px soild silver;
}
.mail h2 {
margin-left: 38px;
}
input {
font-size: 20pt;
}
input:focus, textarea:focus{
background-color: lightyellow;
}
input submit {
font-size: 12pt;
}
.rq {
color: #FF0000;
font-size: 10pt;
}

Код JavaScript

function cube(inputtxt)
    {
      var numbers = /^[-+]?[0-9]+$/;  
	  var x;
	  if(inputtxt.value.match(numbers))
      {
      alert('Cube of '+inputtxt.value+' is '+inputtxt.value*inputtxt.value*inputtxt.value);
      document.form1.text1.focus();
      return true;
      }
      else
      {
      alert('Please input numeric characters only');
      document.form1.text1.focus();
      return false;
      }
    }

Посмотреть пример в браузере

Предыдущая: JavaScript: константное заявление
Далее: JavaScript: функция eval ()