Изучите основы объектно-ориентированного программирования с помощью JavaScript (и усовершенствуйте свой код…

1656678372 izuchite osnovy obektno orientirovannogo programmirovaniya s pomoshhyu javascript i usovershenstvujte svoj

Крис Байарджон

RWwTArl0ATLaPcoftkFuKamR2taP37rMcw7v

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

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

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

Практически все в JavaScript является объектом. Где-то за кулисами каждый фрагмент кода, который вы пишете, пишется или хранится в ООП. Это одна из причин, почему так важно понимать. Если вы этого не сделаете, вы, скорее всего, никогда не сможете прочесть код других разработчиков. Кроме того, ваш код никогда не раскроет свой полный потенциал!

Новый объект создается в JavaScript путем присвоения переменной двум фигурным скобкам, например:

var myObject = {};
// var myObject = new Object();  // Non recommended version, but it works

Это просто! Теперь у вас есть объект, который может хранить любые типы данных, которые вы храните в переменной. Есть много способов вставить данные в объект, но сейчас мы остановимся на самых простых методах.

Быстрый урок синтаксиса

Чтобы закончить строку в JavaScript, создавая такую ​​переменную:

var a = 5;

«строка» заканчивается точкой с запятой. Когда вы создаете объект, строка будет заканчиваться запятой, например:

myObject = { myProp: 5,  myOtherProp: 10,}
  • Свойство/ключ: имя переменного объекта. Примером может служить myProp в приведенном выше коде. || Левая сторона задач
  • Метод: функция внутри объекта доступна только этому объекту. Это вид принадлежности.
  • Значение: значение переменного объекта. Примером может быть 10, являющееся значением myOtherProp. Это может быть любой действительный тип данных JavaScript.

Только последнее свойство в объекте может не использовать запятую.

Примечание. Вы можете взять свои свойства в одинарные или двойные кавычки. Если в названии свойства есть пробел, вы всегда должны использовать кавычки. При использовании JSON использование кавычек необязательно.

Ссылка на свойства объекта

Точечная нотация

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

var myObject = {
otherObject: {            one: 1,        two: 2      },
addFunction: function(x,y){ return x+y }
}
var dot = myObject.otherObject;console.log(dot);//evaluates to otherObject: {..props:vals..}

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

Обозначение в скобках

var myObject = {  "Other Obj": {          one: 1,      two: 2    }}
var bracket = myObject["Other Obj"];
bracket.newProperty = "This is a new property in myObject";
console.log(bracket.newProperty);
//evaluates to myObject["Other Obj"].newProperty

Другой способ ссылок на объекты – с помощью обозначения в скобках. Это рекомендуется, только если свойство объекта содержит пробел, например свойство myObject[“Other Object”]; . В этом случае использование обозначения в скобках обязательно. При наименовании методы, не используйте пробелы — иначе функцию нельзя будет вызвать. Кроме того, вы можете использовать кавычки для названия любого свойства.

Использование JavaScript IRL

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

Для ключевого слова это, по сути, модное ключевое слово для последнего вызванного родительского объекта функции. Если у него нет родительского объекта, окно будет его родительским объектом. К этому можно привязать функцию ключевое слово с помощью Function.bind(). Узнайте больше здесь. Но это немного продвинутое. Имеет ли какой-нибудь смысл? Давайте посмотрим на код:

var ConstructorForPerson = function(first, last, email) {  this.firstName = first;this.lastName = last;this.fullName = first + " " + last;this.eMail =  email;
}
var Bob = new ConstructorForPerson("bob", "brown", "bob122099@gmail.com");
console.log(Bob.eMail);
//evals "bob122099@gmail.com"

Приведенный выше код вернет новый объект, Bob. Это результат функции-конструктора, которая будет обладать свойствами Bob.firstName, Bob.lastName, Bob.fullNameи Bob.eMail.

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

Простыми словами

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

  • Объект — Здание/Управление. Здесь будет указана вся информация о любом работнике, обо всем, что можно сделать с работником, в том числе о создании нового.
  • Собственность — Работники. Это может быть менеджер или партийный служащий. Это может быть список сотрудников. Это может быть ваша валовая прибыль за этот год. Практически что угодно.
  • Методы – что Google может сделать? Что могут сделать работники? Так создаются новые сотрудники и как они будут «выполнять задачи».

Let’s Code!

Во-первых, давайте посмотрим на наш конечный результат:

var google = { //create {google}
employees: {           management: {            },
developers: {                 },
maintenance: {            }   },      NewEmployee: function(name, role, phone, idNumber) {  //create NewExployee()            var newEmployeeData = {        name: name,        role: role,        phone: phone,        idNumber: idNumber,        working: false,        hours: [],       }     //make new object to append to google.employees[role]        google.employees[role][name] = newEmployeeData;    //assign object to google.employees[role][name]
return  google.employees[role][name];  //return the new object directly from google.employees[role][name]        } //end NewEmployee  } //end {google}
google.NewEmployee("james", "maintenance", "2035555555", "1234521"); //create {google:employees:maintenance["james"]} from NewEmployee()
google.employees["maintenance"]["james"].clockInOut = function() { //create clockInOut() - default false         if(this.working) {         this.hours[this.hours.length - 1].push(Date.now());         this.working = false;         return this.name + " clocked out at " + Date.now();        }       else{         this.hours.push([Date.now()]);         this.working = true;         return this.name + " clocked in at " + Date.now();        }
return "Error"     //if above doesn't work, "Error" }
google.employees["maintenance"]["james"].clockInOut(); //clock James in or out, returns a string w/ the time & state

пугает?

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

Итак, как это будет выглядеть в коде? Чтобы было легче, мы создадим конструктор с помощью обычной функции. Он будет иметь 7 свойств: name, role, phone, idNumber, working, и hours.

Кроме того, он будет иметь 1 метод: clockInOut(), который будет смотреть на working свойство для обновления hours.

Давайте разберем это.

Во-первых, мы обновим наш Google объект с NewEmployee() функция конструктора. Помните, что вместо обычной функции конструктора JavaScript мы будем использовать собственную.

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

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

var google = { //create {google}
employees: {           management: {
},           developers: {
},
maintenance: {
}         }, //<--this comma is unnecessary right now but when we add more object properties it will be necessary}

employees имеет другие объекты, выполняющие разные роли в компании: management, developersи maintenance. Мы будем добавлять сотрудника через роль работника в этом случае обслуживания.

var google = {  NewEmployee: function(name, role, phone, idNumber) {    var newEmployeeData = {      name: name,      role: role,      phone: phone,      idNumber: idNumber,      working: false,      hours: [],     }     //make new object to append to google.employees[role]        google.employees[role][name] = newEmployeeData;    //assign object to google.employees[role][name]
return  google.employees[role][name];  //return the new object directly from google.employees[role][name]  }}

Наша функция «конструктор». Достаточно просто, он берет новый объект и добавляет его в соответствующую роль.

google.employees["maintenance"]["james"].clockInOut = function() { //create clockInOut() - default false         if(this.working) {         this.hours[this.hours.length - 1].push(Date.now());         this.working = false;         return this.name + " clocked out at " + Date.now();        }       else{         this.hours.push([Date.now()]);         this.working = true;         return this.name + " clocked in at " + Date.now();        }
return "Error" //if above doesn't work, "Error" }
google.employees["maintenance"]["james"].clockInOut(); //call clockInOut()

Вот где это может запутаться. Помните, что ключевое слово это это просто забавный способ назвать родительский объект вызывающей функции? Выше мы добавляем метод clockInOut() к нашему коду. Мы вызываем его, просто вызвав его. Если работа имеет значение false, он создаст новый массив с меткой времени Unix с индексом 0. Если вы уже работаете, он просто добавит метку времени Unix к последнему созданному массиву, создавая массив, который выглядит примерно так: [1518491647421, 1518491668453] с первой меткой времени, когда работник «приходит», а второй — когда работник «выходит».

Теперь мы увидели, насколько использование ООП может быть практичным! Каждый отдельный сотрудник может «принять» и «отойти» с помощью простого вызова функции, и все, что вам нужно знать, это его имя и должность!

Это, конечно, можно оптимизировать, чтобы сделать что-то вроде просмотра идентификационного номера вместо их роли и имени, но не слишком усложнять. Ниже мы возвращаем все в одну программу. Чуть менее страшно, верно?

var google = { //create {google}
employees: {           management: {      },      developers: {      },
maintenance: {      }         },      NewEmployee: function(name, role, phone, idNumber) { //create NewExployee()            var newEmployeeData = {        name: name,        role: role,        phone: phone,        idNumber: idNumber,        working: false,        hours: [],       }     //make new object to append to google.employees[role]        google.employees[role][name] = newEmployeeData;    //assign object to google.employees[role][name]
return  google.employees[role][name];  //return the new object directly from google.employees[role][name]        }//end NewEmployee  } //end {google}
google.NewEmployee("james", "maintenance", "2035555555", "1234521"); //create {google:employees:maintenance["james"]} from NewEmployee()
google.employees["maintenance"]["james"].clockInOut = function() { //create clockInOut() - default false         if(this.working) {         this.hours[this.hours.length - 1].push(Date.now());         this.working = false;         return this.name + " clocked out at " + Date.now();        }       else{         this.hours.push([Date.now()]);         this.working = true;         return this.name + " clocked in at " + Date.now();        }
return "Error" //if above doesn't work, "Error" }
google.employees["maintenance"]["james"].clockInOut(); //call clockInOut()

Использование объектно-ориентированного программирования может не только сделать ваш код более мощным, но и гораздо легче для чтения другими разработчиками. Не стесняйтесь связываться со мной через Github о проектах, информации о Free Code Camp, помощи по Javascript/HTML/CSS, чтобы поощрить меня написать учебник по использованию JSON и APIS или поговорить о кошках!

Кстати, если вы не знали всего, что изложено в этом учебнике, а также ЛЮБОЙ, что вам нужно знать о банальном Javascript, HTML, CSS и т.д., вы можете рассчитывать на то, что MDN имеет большой объем знаний об этом. По сути это Google для веб-разработчиков! Он также на 1220% бесплатный и с открытым кодом.

Не забудьте аплодировать и следовать, если вам понравилось! Больше статей в скором времени! 🙂

Следите за мной в Instagram @krux.io

ПРИЛОЖЕНИЕ ОБУЧЕНИЯ О MDN:

ООП ДЛЯ НАЧИНАЮЩИХ

ГЛОБАЛЬНЫЕ ОБЪЕКТЫ

Пособие JSON

ИСПОЛЬЗОВАНИЕ JSON В JAVASCRIPT — ГЛОБАЛЬНЫЙ ОБЪЕКТ JSON

КЛЮЧЕВОЕ СЛОВО ЭТО

ФУНКЦИИ КОНСТРУКТОРА

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

Ваш адрес email не будет опубликован.