Учебный курс по Javascript | Основы | Часть 5–9

Вам не нужно беспокоиться о слишком большом подъеме, вместо этого я приведу пример, чтобы продемонстрировать различия между ними. Мы начнем с выражения:

alert(foo()); // returns Uncaught TypeError: foo is not a function
var foo = function() { return bar; }

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

Вот объявление, обратите внимание на разницу:

alert(foo()); 
// returns 'bar'. Declarations are loaded before any code can run.

function foo() { return 'bar'; }

Хорошей практикой кодирования является импорт или инициализация функций до вызова в любом случае, но в этом и заключается отличие: сохранение значений в переменных и поднятие различий.

Функции

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

function funName() {}
// function named funName. to initiate we use funName(). Can take in arguments.
(function() {} ())
// anon function automatically initated after the {} with the (). Can take in arguments.
const anon = function() {}
//anon function assigned to the constant variable anon. Can take in arguments. initiated by anon()

//ES6 Syntax: 
const anon = () => {}
// naming and anon function
(() => {} )
// anon funciton. You will see me use this often in the future.

Давайте возьмем синтаксис объявления функции и создадим пример:

function text() {
  console.log('Hello World')
}
text() // returns and logs 'Hello World'

Параметры и аргументы

Вы видите, что мы объявляем функцию и внутри блока (фигурные скобки) добавляем наши операторы, либо делаем что-то и возвращаем какое-то значение. Что, если бы мы захотели изменить строку в журнале консоли? Ну, мы можем сделать это одним из двух способов. Неэффективный способ — создать одну функцию для каждой строки текста, которую вы хотите использовать, но это не будет динамическим с пользовательским вводом. Итак, чтобы обойти эту проблему, мы можем начать использовать параметры и аргументы.

Возьмем предыдущую функцию и используем ее в качестве примера:

function hello(text) {
  console.log('text')
}
hello('Hello World') // returns and logs 'Hello World'

Теперь мы можем разобрать, что здесь происходит. Кроме того, параметры и аргументы — это, по сути, одно и то же, поэтому вы можете слышать, что другие используют их взаимозаменяемо. Не волнуйтесь, они оба означают и служат одной и той же цели.

// text is a parameter that takes the arguements from the function // being called. text is essentially a variable that stores the    // arguement. 
function hello(text) { 
  console.log(text)
}
// In this instance our argument is 'hello world' and that is stored // as the text parameter as a variable that can be used within the // function. 
hello('Hello World') // returns and logs 'Hello World'

Теперь функции не нужны параметры или аргументы, и параметры могут называться как угодно от 't' до 'zebra' вместо 'text'. Все, что он делает, это выступает в качестве заполнителя, в котором хранится значение аргумента, которое будет использоваться внутри функции. Я просто использую текст, потому что для меня и других, кто просматривает код, имеет смысл знать, что этот параметр представляет и должен быть в качестве аргумента.

Функции также могут иметь несколько аргументов. Проверь это:

function add(a,b) {
  return a + b
}
hello(5,8) // returns 13

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

function newFunc(number,obj,text) {
    alert(number); 
    alert(obj.foo);
    alert(obj.bar);
    alert(text);
}

newFunc(5, {foo: "This", bar: "works!"}, 'testing Text');

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

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

function newFunc(number,obj,text) {
    alert(number); 
    alert(obj.foo);
    alert(obj.bar);
    alert(text);
}

newFunc({foo: "This", bar: "works!"}, 5, 'testing Text');

Мы поместили объект первым там, где должно быть число, и получили бы ошибку. obj.foo отсутствует, потому что вместо аргумента в этом параметре мы поместили число. Таким образом, размещение аргументов имеет значение и должно соблюдать порядок параметров набора функций.

Функции жирных стрелок — это новый синтаксис ES6 для js. Вы будете видеть это чаще, и это выглядит чище, IMO.

//ES6 Syntax Function Expression: 
const anon = () => {}
//ES6 Syntax anon Function:
(() => {} )

Вскоре мы рассмотрим различия функций es6 с ключевым словом this. Однако, сохраняя параметры и аргументы, я покажу вам несколько примеров одного или нескольких параметров с использованием толстые стрелки

Если мы не используем параметры, нам нужны скобки.

const anon = () => { console.log('Hello World') }

Если мы возвращаем одну строку кода, мы можем сократить ее до этого.

const anon = () => console.log('Hello World')

Если мы возвращаем одну строку кода с одним параметром, мы можем удалить скобки.

const anon = text => console.log(text)

смотри какая чистота!!!!!

Если мы возвращаем одну строку кода с несколькими параметрами, нам нужно использовать круглые скобки.

const anon = (a, b) => console.log(a,b)

Мы говорили о значении ключа return в предыдущей части этого раздела. Однако я хотел поговорить о возврате нескольких строк значений.

const anon = (a, b) => {
   // do somethng 
   return ( 
      // multiple lines of values 
   )
}

Я просто хотел быстро выделить этот вариант использования return, прежде чем мы двинемся дальше, потому что мы будем чаще видеть эту версию return в последующих разделах.

Область действия вложенного оператора

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

• Глобальный: при написании кода все написанное изначально автоматически попадает в глобальную область. если он находится в глобальной области, он доступен через код.
• Локальный: это ссылки на блоки или {} . Когда вы создаете if , while и т. д. или функции, вы создаете новый блок, таким образом, новую локальную область.
• Лексическая. Подобно локальной области, лексическая область включает блоки внутри блоков, т.е. функции в функциях например.

Вы не можете обращаться к локальным переменным глобально так же, как к глобальным переменным, отсюда и ключевое слово global.

Вот пример глобальной области видимости, используемой локально и глобально:

//GLOBAL SCOPE
var hero = 'Deku';
const heroName = () => {
  // LOCAL SCOPE
  console.log(hero); // Deku
}
// GLOBAL SCOPE
console.log(hero); // Jerry

Вот пример локальной области, используемой локально и глобально:

const heroName = () => {
  // LOCAL SCOPE
  var hero = 'Deku';
  console.log(hero); // Deku
}
// GLOBAL SCOPE
console.log(hero); // Uncaught ReferenceError: hero is not defined

Вы заметили, что поскольку переменная hero объявлена ​​внутри локальной области видимости, мы не можем получить к ней доступ за пределами этой области, но мы можем получить доступ к глобальным переменным внутри local и лексические области. Вот то же понятие, но с лексическим охватом.

// GLOBAL SCOPE
var heroTwo = 'Bakugo';
const heroName = () => {
  // SCOPE 1
  var heroOne = 'Deku';
  const heroNameTwo = () => {
    // SCOPE 2
    console.log(heroOne); // Deku
    console.log(heroTwo); // Bakugo
  }
}

Вернемся к var , let и const . let и const ограничены локальной или лексической областью видимости. В то время как var является функцией.

// GLOBAL SCOPE
var heroTwo = 'Bakugo';
const heroName = () => {
  // SCOPE 1
  var heroOne = 'Deku';
  {
    // SCOPE 2
    var heroOne = 'Bakugo';
    let heroThee = 'All Might';
    const heroFour = 'Endevour';
  }
  console.log(heroOne); // 'Deku' within the same scope
  console.log(heroTwo); // 'Bakugo' Function scoped
  console.log(heroThree); // Error: not accesable
  console.log(heroFour); // Error: not accesable

}

Мы рассмотрим эту концепцию более подробно позже в ООП. В частности, переназначение переменных из разных областей.

Перезвонить Fn

Мы кратко рассмотрели это выше, обсуждая использование функций в качестве аргументов в параметрах функции. Функции обратного вызова — отличный способ перемещать объекты и значения по областям и, в ответ, по компонентам.

Вот как они работают:

function foo(x) {
    alert(x);
}
function bar(func) {
    func("Hello World!");
}

//alerts "Hello World!"
bar(foo);

Мы создали функции панели, которые принимают функцию в качестве аргумента. Мы создали функцию foo, которая передается в качестве аргумента функции bar.

Более распространенным было просмотреть это с помощью анонимных функций, например:

function foo(x) {
   alert(x);
}
function bar(func) {
   func();
}

//alerts "Hello World!" (from within bar AFTER being passed)
bar( () => foo("Hello World!") );

та же концепция, что и выше, однако мы передаем hello world в качестве аргумента внутри функции foo, которая является аргументом для функциональной панели. Аргумент-цепочка, я знаю.

На данный момент это все, есть более продвинутый способ выполнения обратных вызовов с использованием таинственного ключевого слова this еще раз. Я приведу пример тизера, но мы продолжим обсуждение и более подробно рассмотрим его позже.

function funcTwo(power1, power2) {
    alert("My superpowers are " + power1 + " and " + power2 );
}
function funcOne(yourCallbackFunc, args) {
    //do stuff
    //...
    //execute callback when finished
    yourCallbackFunc.apply(this, args);
}

//alerts "My superpowers are super speed and super strength"
myFunc(funcTwo, ["super speed", "super strength"]);

Здесь снова имеет значение порядок аргументов относительно его параметров.

Подробнее об обратных вызовахздесь.

Методы

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

Это то, что мы собираемся рассмотреть далее в ООП, а сейчас я хотел бы познакомить вас с концепцией методов. для вызова методов вам нужно использовать нотацию do. Прежде чем мы создадим наши собственные методы, давайте сначала посмотрим, как их использовать.

var message = "Hello world!"; 
var x = message.toUpperCase();

Помните, строки не являются объектами, НО они передаются через родительский объект, у которого есть методы, присущие дочернему значению строки. Мы можем вызывать эти методы из родительского объекта с помощью точечной нотации. message . — это строка, а .toUpperCase() — это метод, унаследованный родительским объектом, применяемым к строке.

Мы собираемся больше поговорить о методах в краткой части, которая будет следующей, и более подробно в классах и ООП, следующих за встроенными объектами.

Заворачивать

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

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

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

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

• var: область действия функции не определена при доступе к переменной до ее объявления
• let: ReferenceError с блочной областью действия при доступе к переменной до ее объявления
• const: ReferenceError с блочной областью действия при доступе к переменной до ее объявления нельзя переназначить

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

использованная литература

Спасибо за чтение! Если вам понравилась эта статья, не забудьте поаплодировать нам внизу! Это много значит для меня, и это помогает другим людям увидеть историю.

Свяжитесь со мной:

Инстаграм | "YouTube"