JavaScript объясняется созданием школьной группы

1656662423 javascript obyasnyaetsya sozdaniem shkolnoj gruppy

Кевин Кононенко

1*sQcxkf5QH-TA29tcMGDHGA

Если вы когда-нибудь были в группе, у вас был друг, создавший группу, или вы видели банальный фильм 80-х о создании группы, тогда вы можете понять концепцию «это» в JavaScript.

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

Вы можете подумать: «Мне просто нужно найти функцию, содержащую этои тогда я узнаю, о чем идет речь!»

let band= {  name: "myBand",  playGig:function() {    console.log("Please welcome to the stage" + this.name);  }}

В примере выше, например, this.name относится к названию «myBand». Это кажется легким!

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

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

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

Как вы скоро увидите, самая большая концепция, которую вам нужно понять это есть контекст исполнения. Именно это определяет ценность это.

Прежде чем использовать этот учебник, вам нужно понять объекты и переменные. Просмотрите мои учебники по каждому из этих предметов, если вам нужно просмотреть.

Если вам интересна более техническая версия этого руководства, просмотрите руководство JavaScriptIsSexy.

0*vkmneQ0bjkfUKE4A

Глобальный контекст выполнения

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

Предположим, вы решите воспроизвести несколько песен Билли Джоэла (известного американского исполнителя), и даже если это не ваша любимая, вы знаете, что это то, что вам нужно сделать, чтобы получить деньги.

Вот как это смотрится в коде.

//The songs you will play var artist= "Billy Joel"; 
function playGig(){   //instruments that your band will use   let instruments= ["piano", "microphone", "acousticGuitar", "harmonica"]; 
  console.log("We are going to be playing music from " + this.artist + "tonight!"); } 
playGig();
0*nDmTsWSyhway3yRK

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

В последней строчке мы вызываем функцию playGig. Так что есть этот. художникв этом случае?

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

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

window.playGig(); "We are going to be playing music from Billy Joel tonight!"

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

Итак, в строке 1 фрагмента выше мы также говорим:

//old version- let artist = "Billy Joel"; this.artist="Billy Joel";
0*pR8LAtC76p1kvE5s

Ваша группа исполняет концерт в глобальном контексте, играя музыку, которая привлекает всех (если там нет ненавистников Билли Джоэла).

0*19QcrhPgf38OU00_

Контекст исполнения на уровне объекта

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

0*_djQrnI4NQ5nDzD2

Скажем, вы выбираете Coldplay, поскольку большинство их последних песен являются поп-музыкой. Для этого концерта вам нужен пианино, микрофон, ударная установка и гитара.

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

//The songs you will play in the public park/fair var artist= "Billy Joel"; 
function playGig(){   //instruments that your band will use   let instruments= ["piano", "microphone", "acousticGuitar", "harmonica"];   console.log("We are going to be playing music from " + this.artist + "tonight!"); } 
//NEW PART let bar = {  artist:"coldplay",  playGig: function(){     //instruments that your band will use     let instruments= ["piano", "microphone", "guitar", "drumset"];         console.log("We are going to be playing music from " + this.artist + "tonight!");    } }

Вот диаграмма кода выше:

0*hfc66VpcvHZZueNz

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

bar.playGig(); //"We are going to be playing music from coldplay tonight!"

И мы все еще можем выполнять функцию playGig на глобальном уровне, но мы получим другой результат. Это отличная новость, поскольку мы не хотим, чтобы Билли Джоэл или Coldplay играли не на том месте…

playGig(); //"We are going to be playing music from Billy Joel tonight!"

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

0*F1hheXRD2SSTmszz

Изменение контекста выполнения с помощью jQuery

Это большое событие, освещаемое в каждом отдельном фильме 1980-х годов: «Битва оркестров»! Да, каждая группа в вашей средней школе примет участие в соревновании, чтобы увидеть, кто лучший.

Вы сыграете несколько песен от AC/DC, едва ли не самой крутой группы на планете. Но для этого вам нужна другая смесь инструментов, чем раньше:

  • микрофон
  • Электрогитара
  • Бас-гитара
  • Барабанная установка

Назовем это битвой объект. Вот как это смотрится в коде.

let battle = {  artist:"acdc",  playGig: function(){     //instruments that your band will use     let instruments= ["microphone", "electricguitar", "bass", "drumset"]; 
    console.log("We are going to be playing music from " + this.artist + "tonight!");   } }

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

$('#annualBattle').click(battle.playGig);

Но если бы вы действительно запустили этот код… он бы не сработал. Ваша группа забыла бы слова и ноты и медленно сошла со сцены.

Чтобы понять почему, вернемся к контексту исполнения. Мы ссылаемся на элемент DOM под названием #ежегоднаяБитвадавайте посмотрим, где это вписывается в окно объект.

Поскольку #ежегоднаяБитва является элементом в DOM, это часть документ объект в пределах окно объект. Он не имеет никакого свойства под названием художник. Итак, если вы запустите код, вы получите:

$('#annualBattle').click(battle.playGig); //"We are going to be playing music from undefined tonight!"

В этом случае контекст выполнения является элементом из DOM. Именно это положило начало методу click(), который использовал функцию playGig как a обратный звонок. Поэтому, это будет иметь неопределенное значение.

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

Чтобы решить эту проблему, нам нужно использовать метод bind(), чтобы убедиться, что метод playGig все еще ссылается на бой объект, даже если мы вызываем его из контекста другого объекта! Это выглядит так:

$('#annualBattle').click(battle.playGig.bind(battle)); //"We are going to be playing music from acdc tonight!"

Теперь мы получаем правильный выход, даже если контекст был элементом DOM.

Извлечение функции из контекста

Скажем, мы хотели бы написать код, который позволит нам тренироваться для события Battle of the Bands. Мы создадим отдельную переменную под названием практикаи назначьте playGig метод от бой объект.

var artist= "Billy Joel"; 
function playGig(){  //instruments that your band will use   let instruments= ["piano", "microphone", "acousticGuitar", "harmonica"]; 
  console.log("We are going to be playing music from " + this.artist + "tonight!"); } 
let battle = {  artist:"acdc",   playGig: function(){     //instruments that your band will use     let instruments= ["microphone", "electricguitar", "bass", "drumset"]; 
    console.log("We are going to be playing music from " + this.artist + "tonight!");   } } 
let practice = battle.playGig; //run a practice practice();

Так что вы, вероятно, задаетесь вопросом: какой контекст выполнения последней строки?

Что ж, это столкнется с проблемой, подобной предыдущему примеру. Когда мы создаем практика теперь мы сохраняем экземпляр метода playGig в глобальный контекст! Это больше не в контексте боевого объекта.

0*nsh11uuf9M7miGMI

Если мы запустим код выше, мы получим:

practice(); 
//"We are going to be playing music from Billy Joel tonight!"

Не то что мы хотим. Мы стараемся практиковать AC/DC, а вместо этого практикуем Билли Джоэла. ой

Вместо этого нам следует использовать метод bind(), как описано выше. Это позволит нам привязать контекст бой объект.

let practice = battle.playGig.bind(battle); 
practice(); //"We are going to be playing music from AC/DC tonight!"

Как анонимные функции влияют на контекст

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

Чтобы сделать это, мы собираемся использовать метод forEach() для повторения каждого элемента в значении инструменты собственность. (Спустя мгновение вы увидите, почему мы изменили его с переменной на свойство). Это будет выглядеть так:

let battle = {  artist:"acdc",
  //instruments that your band will use  instruments: ["microphone", "electricguitar", "bass", "drumset"],
  shoutout: function(){ 
    this.instruments.forEach(function(instrument){      console.log("Give a shoutout to my friend for covering the " + instrument + " from " + this.artist + "!");     }   } } 
battle.shoutout();

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

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

Но когда мы придем к этот. художник в операторе console.log мы получим… «Билли Джоэл». Это из-за анонимной функции, которая используется как обратный вызов в методе forEach(). Он сбрасывает область в глобальную.

1*BACZfoonzMUUwpfNzi9jIw

В этом случае это означает, что в конце мы бы утверждали, что играем Билли Джоэла… ох!

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

let battle = {  artist:"acdc",  //instruments that your band will use   instruments: ["microphone", "electricguitar", "bass", "drumset"],   shoutout: function(){
    //store context of this     let that = this;
    this.instruments.forEach(function(instrument){      console.log("Give a shoutout to my friend for covering the " + instrument + " from " + that.artist + "!");    }   } }
battle.shoutout();

Получите новейшие пособия

Вам понравился этот урок? Если да, похлопайте или подпишитесь на последние визуальные пособия от CodeAnalogies здесь:

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *